@charset "utf-8"; .swiper-container{margin:0 auto; position:relative; overflow:hidden; z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical; -moz-box-orient:vertical; -ms-flex-direction:column; -webkit-flex-direction:column; flex-direction:column}.swiper-wrapper{position:relative; width:100%; height:100%; z-index:1; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-transition-property:-webkit-transform; -moz-transition-property:-moz-transform; -o-transition-property:-o-transform; -ms-transition-property:-ms-transform; transition-property:transform; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate(0,0); -ms-transform:translate3d(0,0,0); transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-box-lines:multiple; -moz-box-lines:multiple; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out; -moz-transition-timing-function:ease-out; -ms-transition-timing-function:ease-out; -o-transition-timing-function:ease-out; transition-timing-function:ease-out; margin:0 auto}.swiper-slide{-webkit-flex-shrink:0; -ms-flex:0 0 auto; flex-shrink:0; width:100%; height:100%; position:relative}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start; -ms-flex-align:start; -webkit-align-items:flex-start; align-items:flex-start; -webkit-transition-property:-webkit-transform,height; -moz-transition-property:-moz-transform; -o-transition-property:-o-transform; -ms-transition-property:-ms-transform; transition-property:transform,height}.swiper-container .swiper-notification{position:absolute; left:0; top:0; pointer-events:none; opacity:0; z-index:-1000}.swiper-wp8-horizontal{-ms-touch-action:pan-y; touch-action:pan-y}.swiper-wp8-vertical{-ms-touch-action:pan-x; touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute; top:50%; width:27px; height:44px; margin-top:-22px; z-index:10; cursor:pointer; -moz-background-size:27px 44px; -webkit-background-size:27px 44px; background-size:27px 44px; background-position:center; background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35; cursor:auto; pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml; charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); left:10px; right:auto}.swiper-button-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-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-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-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-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-pagination{position:absolute; text-align:center; -webkit-transition:.3s; -moz-transition:.3s; -o-transition:.3s; transition:.3s; -webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); transform:translate3d(0,0,0); z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-bullet{width:8px; height:8px; display:inline-block; border-radius:100%; background:#000; opacity:.2}button.swiper-pagination-bullet{border:none; margin:0; padding:0; box-shadow:none; -moz-appearance:none; -ms-appearance:none; -webkit-appearance:none; appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-white .swiper-pagination-bullet{background:#fff}.swiper-pagination-bullet-active{opacity:1; background:#007aff}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-container-vertical>.swiper-pagination{right:10px; top:50%; -webkit-transform:translate3d(0,-50%,0); -moz-transform:translate3d(0,-50%,0); -o-transform:translate(0,-50%); -ms-transform:translate3d(0,-50%,0); transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination .swiper-pagination-bullet{margin:5px 0; display:block}.swiper-container-horizontal>.swiper-pagination{bottom:10px; left:0; width:100%}.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet{margin:0 5px}.swiper-container-3d{-webkit-perspective:1200px; -moz-perspective:1200px; -o-perspective:1200px; perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0))); background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0)); background-image:-moz-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0)); background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0)); background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0))); background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0)); background-image:-moz-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0)); background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0)); background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0))); background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0)); background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0)); background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0)); background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0))); background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0)); background-image:-moz-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0)); background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0)); background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out; -moz-transition-timing-function:ease-out; -ms-transition-timing-function:ease-out; -o-transition-timing-function:ease-out; transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none}.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; visibility:hidden; -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -ms-transform-origin:0 0; transform-origin:0 0; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; width:100%; height:100%; z-index:1}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0; -moz-transform-origin:100% 0; -ms-transform-origin:100% 0; transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto; visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute; left:0; bottom:0; width:100%; height:100%; background:#000; opacity:.6; -webkit-filter:blur(50px); filter:blur(50px); z-index:0}.swiper-scrollbar{border-radius:10px; position:relative; -ms-touch-action:none; background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute; left:1%; bottom:3px; z-index:50; height:5px; width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute; right:3px; top:1%; z-index:50; width:5px; height:98%}.swiper-scrollbar-drag{height:100%; width:100%; position:relative; background:rgba(0,0,0,.5); border-radius:10px; left:0; top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-lazy-preloader{width:42px; height:42px; position:absolute; left:50%; top:50%; margin-left:-21px; margin-top:-21px; z-index:10; -webkit-transform-origin:50%; -moz-transform-origin:50%; transform-origin:50%; -webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite; -moz-animation:swiper-preloader-spin 1s steps(12,end) infinite; animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block; content:""; width:100%; height:100%; background-image:url("data:image/svg+xml; charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position:50%; -webkit-background-size:100%; background-size:100%; background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml; charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}} /* list */ .dlab_list_wrap{margin-top:-5px; padding:25px 15px 20px; background:#e7e7e7; min-height:450px} .dlab_wrap .banner_list{margin-bottom:30px} .dlab_wrap .banner_list li{margin-top:15px} .dlab_wrap .banner_list li:first-child{margin:0} .dlab_wrap .btn.add_view{display:block; padding:13px 0 13px; margin-bottom:50px; font-size:17px; line-height:22px; color:#333333; text-align:center; border:1px solid #cccccc; background:#ffffff} .dlab_wrap .btn.add_view .ico_bot{display:inline-block; width:11px; height:7px; margin-left:8px; background:url(/subscribe/images/event/events/btn_event_addView.png) no-repeat left top; background-size:11px 7px} /* view */ .dlab_tit{position:relative; padding:15px 15px 15px; background:#e7e7e7} .dlab_tit strong{display:block; font-size:15px; font-weight:700; color:#000000} .dlab_tit span{font-size:15px; color:#666666; font-weight:700;} .dlab_tit strong span{padding-left:10px; font-size:15px; color:#666666; font-weight:700;} .dlab_tit .sns_list{position:absolute; right:15px; top:26px} .dlab_tit .sns_list li{float:left; margin-left:5px} .dlab_tit .sns_list li img{height:34px} /* view cont */ .dlab_view_cont{padding:30px 15px 0px; background:#fff; text-align:center} .dlab_view_cont.cont_type02{padding:0px 15px 20px; text-align:left} .dlab_view_cont.cont_type02 .btn.add_view{display:block; padding:13px 0 13px; margin-bottom:50px; font-size:17px; line-height:22px; color:#333333; text-align:center; border:1px solid #cccccc; background:#ffffff} .dlab_view_cont.cont_type03{padding:30px 15px 20px; text-align:left} .dlab_view_cont.kakao_mond{background:#d9ebf5; border-top:2px solid #fff} .dlab_view_cont h2{font-size:31px; font-weight:700; color:#000;} .dlab_view_cont .h2_copy{font-size:20px; margin-bottom:22px} .dlab_view_cont .dlab_txt{font-size:15px; color:#666} .dlab_view_cont .dlab_txt.type02{color:#333; margin-bottom:45px} .dlab_view_cont .dlab_txt span{font-size:16px} .dlab_view_cont .dlab_txt span.tip_txt{font-size:14px; color:#666} .dlab_view_cont .parking_wrap{margin-bottom:90px} .dlab_view_cont .dlab_video{width:100%; height:236px} .dlab_view_cont .quiz_box{border:1px solid #cccccc; padding:46px 20px 22px; margin:20px 0 30px; font-size:16px; color:#000; background:url(/subscribe/images/dlb/ico_quiz.png) center 20px no-repeat; background-size:42px} .dlab_view_cont .quiz_box strong{font-weight:700} .dlab_view_cont .cont_sns{/* height:60px; */margin-bottom:35px; padding-top:25px} .dlab_view_cont .cont_sns .sns_list{width:112px; margin:0 auto} .dlab_view_cont .cont_sns .sns_list li{float:left; margin-left:5px} .dlab_view_cont .cont_sns .sns_list li:first-child{margin:0} .dlab_view_cont .cont_sns .sns_list li img{height:34px} /* .dlab_view_cont .cont_sns.line_type{height:60px; padding-top:25px} */ .dlab_view_cont .btn_plus_friend{padding:30px 0 65px; text-align:center} .dlab_view_cont .btn_plus_friend img{height:45px} /* color */ .c_blue{color:#00819a !important} .c_black{color:#000 !important} /* 2016.10.05 수정 */ .dlab_view_cont .dot_list li{margin:7px 0; padding-left:9px; text-align:left; background:url(/subscribe/images/common/bu_dt_black.gif) left 8px no-repeat; background-size:3px 3px; font-size:15px; color:#000} .dlab_view_cont .dot_list li:first-child{margin:7px 0} .dlab_view_cont .dot_list li:last-child{margin-bottom:0} .dlab_view_cont .bu_star{color:#666; font-size:14px; margin:3px 0 0 -9px; padding-left:9px; text-align:left; background:url(/subscribe/images/common/bu_star.gif) left 6px no-repeat; background-size:5px 5px} .mgt65{margin-top:65px!important} .mgt100{margin-top:100px!important} .dlab_view_cont .instar_list li{float:left; width:30%; height:100px; margin-right:5%; margin-bottom:15px} .dlab_view_cont .instar_list li:nth-child(3n){margin-right:0} .dlab_view_cont .bullet_list{padding-left:9px} /* 2016.09.28 페이스북 반응형 */ .fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe{width:100% !important} .dlab_view_cont .btn_wrap.more_btn{margin:30px 0 0; padding-bottom:25px; border-bottom:1px solid #dddddd} .dlab_wrap .btn.add_view.btn_more{position:relative; margin:0 42px; background:#019a81; color:#fff; border:none} .dlab_wrap .btn.add_view.btn_more:after{position:absolute; display:block; left:65%; top:20px; width:10px; height:7px; background:url(/subscribe/images/dlb/bu_aw_dw.png) no-repeat; background-size:10px 7px; content:""} /* FAQ */ .faq_list{width:100%; border-top:1px solid #dddddd; text-align:left; margin-bottom:50px} .faq_list dt{border-bottom:1px solid #e7e7e7; position:relative} .faq_list dt:before{content:''; display:block; width:11px; height:13px; background:url(/subscribe/images/dlb/good/ico_q.png) no-repeat; background-size:11px; position:absolute; top:13px; left:0} .faq_list dt:after{content:''; display:block; width:16px; height:10px; background:url("../images/common/spt_type01.png") no-repeat 0px -85px; background-size:170px; position:absolute; top:14px; right:0} .faq_list dt.open:after{background-position:-50px -0px; top:14px} .faq_list dt a{padding:8px 60px 7px 17px; display:block; color:#000; font-size:15px} .faq_list dd{padding:17px 15px; background:#f4f4f4; border-bottom:1px solid #e7e7e7; font-size:13px; line-height:16px; color:#666; display:none} .faq_list .no_result{border-bottom:1px solid #e7e7e7} /* 착한보험 안내서 */ .dlab_wrap.good_guide{background:#fff url(/subscribe/images/dlb/good/bg_good.gif) repeat-x; background-size:1px 158px} .good_cont .dlab_tit{position:relative; padding:0px; background:#fff} .dlab_wrap .btn.add_view.btn_link{position:relative; margin:30px 0 0; background:#0096af; color:#fff; border:none} /* 눔플러스 */ .dlab_view_cont.noom_type01{padding:0px 0px 0px} .dlab_view_cont.noom_type02{padding:0px 15px 35px} .dlab_view_cont.noom_type03{padding:35px 15px 15px; background-color:#eceaea} .noom_txt_box01{margin:0 0 24px} .noom_txt_box01 p{margin-top:7px; font-size:13px; color:#666} .txt_brown{color:#90494c !important} .layer_wrap.noom_layer .alert .ico_alert.ico_check{background:url(/subscribe/images/dlb/ico_check.png) no-repeat 0px 0px; background-size:34px} .layer_wrap.noom_layer .alert .txt_tip{text-align:left; padding:12px 0 0} .layer_wrap.noom_layer .alert .txt_tip span{font-size:13px; color:#666666} .btn_noom a{display:block} .noom_tab{width:100%; margin:0 -3px 15px 0;} .noom_tab li{float:left; width:33.2%; height:35px; margin:0 0 0 -1px} .noom_tab li a{display:block; height:33px; border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; border-left:1px solid #d9d9d9; color:#999; font-size:15px; text-align:center; line-height:35px; background:#ffffff} .noom_tab li:last-child{width:34.1%} .noom_tab li:last-child a{border-right:1px solid #ccc} .noom_tab .on a{position:relative; border:1px solid #0c8ce6 !important; color:#fff; font-weight:700; background:#0c95f6} .noom_tab_cont{display:none} .noom_tab_cont.on{display:block} .tab_oversize{margin:0 -15px -15px; padding:30px 15px 35px; background:#fff} #pop_wrap #pop_content .pop_content_inner.noom_pop{padding-bottom:20px} #pop_wrap #pop_content .noom_pop h2{font-size:16px} .gray_tip_box{padding:15px; margin-bottom:20px; background:#f4f4f4; font-size:14px;} .gray_tip_box > strong{display:block; color:#000; margin-bottom:12px} .gray_tip_box p{color:#666} .gray_tip_box span{color:#333} .core_list li{display:table} .core_list li > *{display:table-cell; font-size:15px} .core_list li strong{min-width:50px; color:#00819a} .core_list li span{color:#333} .mgt85{margin-top:85px !important} .mgb40{margin-bottom:40px !important} .mgb45{margin-bottom:45px !important} .mgl30{margin-left:30px !important} .mgl40{margin-left:40px !important} /* 멤버십, 멤버십 충전소 공통 css */ .mem_top{position:relative; margin:-5px 0 0 0; padding:30px 15px; background:#f9d5da} .mem_top:after{position:absolute; right:12px; bottom:-1px; width:88px; height:70px; content:""; display:block; background:url(/subscribe/images/dlb/mem/img_top_mem01.png) no-repeat 0px 0px; background-size:88px 70px} .mem_top h2{margin:0 0 10px 0; font-weight:700; font-size:19px; color:#000} .mem_top p{margin:0 0 24px 0; font-size:15px; color:#e21b22} .mem_top .mem_top_menu{overflow:hidden} .mem_top .mem_top_menu li{float:left} .mem_top .mem_top_menu li a{position:relative; padding:0 25px; font-size:14px; color:#000} .mem_top .mem_top_menu li a:after{position:absolute; right:0; top:3px; width:1px; height:12px; background:#ae9598; content:""; display:block} .mem_top .mem_top_menu li:first-child a{padding-left:0} .mem_top .mem_top_menu li:last-child a{padding-right:0} .mem_top .mem_top_menu li:last-child a:after{content:""; content:none} .mem_cont{position:relative; padding:25px 15px 30px} .mem_cont .btn_join{display:block; margin-bottom:40px} .mem_cont h3{margin:0 0 7px 0; font-size:16px; color:#000; font-weight:700} .mem_cont .stxt{margin-bottom:15px; font-size:13px; color:#666} .mem_cont .mem_tit.ico{padding-left:40px; background:url("/subscribe/images/dlb/mem/ico_gun.png") no-repeat 0 0; background-size:35px 20px} .mem_cont .benefit_download{display:block; margin-bottom:40px; text-align:center} .mem_cont .benefit_moth{margin:0 0 15px 0; text-align:center} .mem_cont .benefit_list li{margin:0 0 15px 0; text-align:center} .mem_cont .benefit_list li:last-child{margin-bottom:0} .mem_cont .benefit_list li a{display:block} .mem_cont .btn.add_view{display:block; padding:13px 0 13px; font-size:17px; line-height:22px; color:#333333; text-align:center; border:1px solid #ccc; background:#fff} .mem_cont .btn.add_view .ico_bot{display:inline-block; width:11px; height:7px; margin-left:8px; background:url(/subscribe/images/event/events/btn_event_addView.png) no-repeat left top; background-size:11px 7px} .mem_cont .t_txt{margin:0 0 10px 0; font-size:14px; color:#333; line-height:21px} .mem_cont .btn_modify{position:absolute; right:15px; top:22px; font-size:13px} .mem_cont .btn_modify img{width:15px; height:15px} .mem_cont .mem_agree{margin-bottom:30px} .mem_cont .coupon_info{border-top:2px solid #000} .mem_cont .coupon_info li .coupon_tit{position:relative; display:block; padding:15px 10px; border-top:1px solid #ddd; font-size:15px} .mem_cont .coupon_info li .coupon_tit:after{content:""; position:absolute; bottom:11px; right:10px; width:23px; height:23px; margin:0 0 0 7px; display:inline-block; background:url(/subscribe/images/common/btn_cir_bott.png) no-repeat left top; background-size:23px 23px} .mem_cont .coupon_info li .coupon_tit.open:after{content:""; position:absolute; bottom:11px; right:10px; width:23px; height:23px; margin:0 0 0 7px; display:inline-block; background:url(/subscribe/images/common/btn_cir_gtop.png) no-repeat left top; background-size:23px 23px} .mem_cont .coupon_info li:first-child .coupon_tit{border-top:0} .mem_cont .coupon_info li:last-child .coupon_tit{border-bottom:1px solid #ddd} .mem_cont .coupon_info li .coupon_tit p{margin:0 0 8px 0; font-weight:700; text-decoration:underline; color:#000} .mem_cont .coupon_info li .coupon_tit em{display:inline-block; width:47px; margin:0 7px 0 0; padding:3px 0; font-size:11px; color:#aaa; text-align:center; border:1px solid #bbb} .mem_cont .coupon_info li .coupon_tit span{color:#555; font-size:16px; vertical-align:bottom} .mem_cont .coupon_info li .coupon_detail{display:none; padding:13px 10px 10px 10px; border-top:1px solid #ddd; background:#f4f4f4} .mem_cont .coupon_info li .coupon_detail.open{display:block} .mem_cont .coupon_info li:last-child .coupon_detail{border-bottom:1px solid #ddd} .mem_cont .coupon_info li .coupon_detail dl{overflow:hidden; margin:0 0 5px 0} .mem_cont .coupon_info li .coupon_detail dl dt{position:relative; float:left; width:90px; padding:0 0 0 6px; font-size:13px; color:#666} .mem_cont .coupon_info li .coupon_detail dl dt:before{position:absolute; left:0; top:8px; content:""; display:block; width:3px; height:1px; background:#666} .mem_cont .coupon_info li .coupon_detail dl dd{float:left; font-size:14px; color:#000} .mem_cont .coupon_info li .coupon_detail dl dd .btn_resend{display:inline-block; width:61px; padding:3px 0; color:#fff; font-size:12px; text-align:center; background:#6d7287} .mem_cont .benefit_detail dl{margin:0 0 40px 0} .mem_cont .benefit_detail dl dt{font-size:17px} .mem_cont .benefit_detail dl dd{font-size:14px; color:#333} .mem_cont .benefit_detail dl dd .txt{display:block; margin-bottom:8px; font-size:15px} .mem_cont .benefit_detail dl dd .bnefit_list ol li{margin-bottom:3px; font-size:15px; color:#666} .mem_cont .benefit_detail dl dd .mem_list li{position:relative; margin-bottom:5px; padding-left:7px; font-size:14px; color:#333} .mem_cont .benefit_detail dl dd .mem_list li:before{content:''; display:block; width:3px; height:3px; background:#333; position:absolute; top:9px; left:0} .mem_cont .benefit_detail .btn_shop{display:inline-block; padding:5px 8px; font-size:12px; color:#fff; background:#6d7287} .mem_cont_bt{padding:40px 15px 50px; background:#ebebeb} .mem_cont_bt h3{margin-bottom:7px; font-size:16px; font-weight:bold; color:#000} .mem_cont_bt .stxt{margin-bottom:15px; font-size:13px; color:#666} .mem_cont_bt .benefit_life{margin-bottom:40px} .mem_cont_bt .benefit_life li{float:left; width:48%} .mem_cont_bt .benefit_life li a{display:inline-block} .mem_cont_bt .benefit_life li:nth-child(1), .mem_cont_bt .benefit_life li:nth-child(2){margin-bottom:10px} .mem_cont_bt .benefit_life li:nth-child(odd){margin-right:4%} .mem_cont_bt .btn_join{display:block} .mem_cont .bx_agree{padding:18px 11px 11px; background:#efefef} .mem_cont .bx_agree .input_checkbox input[type=checkbox]+label{padding-left:0} .mem_cont .bx_agree .input_checkbox input[type=checkbox]+label em{display:block; padding-left:30px} @media screen and (max-width:359px){ .mem_cont .bx_agree .input_checkbox input[type=checkbox]+label em{font-size:13px} } /*사소한 사치*/ .d_visual{text-align:center} .d_video .big_video{display:block} .d_video .video_list{overflow:hidden; margin:20px 0 30px 0} .d_video .video_list dl{float:left; width:32%; margin-right:2%} .d_video .video_list dl:last-child{float:right; margin-right:0} .d_video .video_list dl dt{margin-bottom:7px; text-align:left; font-size:13px} .d_video .video_list dl dd{} .d_video .video_list dl dd a{display:inline-block} .sachi .btn_sachi a{display:block} .sachi .sachi_notice{margin:-30px 0 25px 0} .sachi .e_cont{margin-bottom:35px} .sachi .e_cont .btn_sachi{display:block; width:240px; height:41px; margin:10px auto 20px} /* 멤버십 어드민용 170320 */ .admin_explain_frame{font-size:14px} .admin_explain_frame dl dt{font-size:15px; line-height:24px; font-weight:600; margin-bottom:6px} .admin_explain_frame .disc_type dt{margin:0 0 3px; padding-left:7px; background:url(/subscribe/images/common/bu_dt_black.gif) left 7px no-repeat; background-size:3px 3px; color:#333; font-size:15px} .admin_explain_frame .disc_type dd li{margin:0; padding-left:7px; background:url(/subscribe/images/common/bu_dash_gray.gif) left 7px no-repeat; background-size:3px 1px; color:#666; font-size:14px; line-height:20px} .admin_explain_frame .disc_type dd li li{padding:0; background:0 0} .admin_explain_frame .disc_type dd li table{width:101%; margin-left:-7px} .admin_explain_frame .disc_type.txt_black dt{color:#000} .admin_explain_frame .disc_type.kor dd li dt,.admin_explain_frame .disc_type.kor dd p{color:#666; font-size:14px} .admin_explain_frame .disc_type.txt_black dd{font-size:14px} .admin_explain_frame .disc_type.kor dt{padding:0 0 0 18px; background:0 0; font-size:14px; text-indent:-18px} .admin_explain_frame .disc_type.kor dd li dl{margin:8px 0 0} .admin_explain_frame .disc_type.kor dd li dt{font-weight:400} .admin_explain_frame .disc_type.kor dd li dd{padding-left:5px; background:url(/subscribe/images/common/bu_dt_circle.gif) left 9px no-repeat; background-size:2px 2px} .admin_explain_frame ul.disc_type li{padding-left:7px; background:url(/subscribe/images/common/bu_dt_black.gif) left 7px no-repeat; background-size:3px 3px; color:#333; font-size:15px} .admin_explain_frame ul.disc_type li p{margin:4px 0 0; padding-left:7px; background:url(/subscribe/images/common/bu_dash_gray.gif) left 7px no-repeat; background-size:3px 1px; color:#666; font-size:14px} .admin_explain_frame ul.disc_type li:last-child{margin-bottom:0} .admin_explain_frame ul.disc_type.gray{margin:0} .admin_explain_frame ul.disc_type.gray li{margin:0; background:url(/subscribe/images/common/bu_dt_gray333.gif) left 8px no-repeat; background-size:3px 3px} a.link_show{text-decoration:underline !important} /*멤버십 충전소*/ .mstation_join{padding:25px 15px 50px; background-color:#f9d5da} .mstation_join h2{margin:0 auto 40px; width:280px} .mstation_join .mstation_point{position:relative; box-sizing:border-box; margin:0 auto 30px; width:100%; min-height:180px; background-color:#fff; padding:80px 15px 40px; text-align:center; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px} .mstation_join .mstation_point:after{width:122px; height:90px; margin-left:-61px; content:" "; position:absolute; left:50%; top:-30px; background:url(/subscribe/images/dlb/mem/bg_mstation_mondi.png) 0 0 no-repeat; background-size:122px 90px} .mstation_join .mstation_point p{margin-bottom:9px; font-size:17px; font-weight:800} .mstation_join .mstation_point p span{color:#e21b22} .mstation_join .mstation_point em{font-size:14px; color:#666; letter-spacing:-1px} .mstation_join .btn_benefit{display:block; width:100%; height:50px; text-align:center; line-height:50px; background-color:#e21b22} .mstation_join .btn_benefit span{color:#fff; font-size:16px; font-weight:700} /* 팀다이렉트를 소개합니다 */ .new_mondi,.new_teamdirect{margin-top:-5px} .team_scene{position:relative} .team_scene .taemb_txt img{max-width:none} .team_scene .taemb_txt.txt01,.team_scene .taemb_txt.txt02{opacity:0;} .team_scene .taemb_txt.txt03,.team_scene .taemb_txt.txt04{opacity:0;} .team_scene.txt_ani .team_cont_wrap h1{opacity:0; animation: fadeInTitle 0.9s forwards;animation-delay: 0.4s;} .team_scene.txt_ani .taemb_txt.txt01{animation: fadeIn 1.1s forwards;animation-delay: 0.9s;} .team_scene.txt_ani .taemb_txt.txt02{animation: fadeIn 1.1s forwards;animation-delay: 1.3s;} .team_scene.txt_ani .taemb_txt.txt03{animation: fadeIn 1.1s forwards;animation-delay: 1.7s;} .team_scene.txt_ani .taemb_txt.txt04{animation: fadeIn 1.1s forwards;animation-delay: 2.1s;} .team_scene .logo_team{opacity:0;} .team_scene.txt_ani .logo_team{animation: fadeIn 1.5s forwards;animation-delay: 1.7s;} .team_scene .team_cont_wrap{position:relative; position:absolute; padding:40px 24px;} .team_scene .team_cont_wrap h1{position:relative; margin-bottom:20px;opacity: 0;} .team_scene.t_scene06 .team_cont_wrap h1{margin-bottom: 30px;} .team_scene.t_scene06 .team_cont_wrap .taemb_txt.txt01{margin-bottom: 9px;} .team_scene .team_cont_wrap .taemb_txt{margin-bottom:14px} .t_scene06 h1{width:100%; max-width:170px} .logo_team img{max-width:none} @media screen and (max-width:359px){ .team_scene .taemb_txt img{max-width:100%} } @keyframes fadeInTitle{ 0% {opacity: 0;margin-top: -7px;} 50% {opacity: 0.5;margin-top: 6px;} 100% {opacity: 1;margin-top: 0px;} } @keyframes fadeIn{ from { opacity: 0; margin-top: 0px; } to { opacity: 1; } } /* 자동차 가입완료 이메일 내 모바일랜딩페이지 */ #wrap_mobile_product .rending_type #header{background:url(/subscribe/images/common/bg_dt_top02.png) left bottom repeat-x; background-size:1px 5px} #wrap_mobile_product .rending_type .header_wrap{background-color:#333333 !important} #wrap_mobile_product .rending_type #header .header_wrap h1 a{background:url(/subscribe/images/common/logo_direct_rending.gif) left top no-repeat; background-size:115px 34px} .rending_type #container{margin-top:-5px} .rending_type #container .product_wrap{min-height:370px} #wrap_mobile_product #container .rending_type .content h2{font-size:17px !important} .rending_type .rding_bottom{position:fixed; left:0; bottom:0} .rending_type .rding_logo_box{height:60px; padding:7px 0 0 75px; margin:15px 0 25px; background:url(/subscribe/images/common/img_meritz.gif) left top no-repeat; background-size:60px 60px; font-size:15px; box-sizing:border-box} .rending_type .rding_btn_box{display:table; width:100%; margin-bottom:13px} .rending_type .rding_btn_box>*{display:table-cell; text-align:center; font-size:15px} .rending_type .rding_btn_box div p{padding:18px 0; border:1px solid #dddddd; border-bottom:none} .rending_type .rding_btn_box div a{display:block; padding:8px 0; font-weight:700; color:#fff} .rending_type .rding_btn_box .l_box{width:calc(50% - 5px)} .rending_type .rding_btn_box .l_box a{background:#0096af} .rending_type .rding_btn_box .r_box{width:calc(50% - 5px)} .rending_type .rding_btn_box .r_box a{background:#495d90} .rending_type .rding_btn_box .space{width:10px} @media screen and (max-width:359px){ .rending_type .rding_logo_box,.rending_type .rding_btn_box>*{font-size:13px} } @media screen and (max-height:667px){ .rending_type .rding_bottom{position:static} } /* 챗봇 프로젝트D */ .prdj_chatbot_wrap{overflow-x:hidden} .prdj_chatbot_wrap .chatbot_cont .dlab_tit{padding-bottom:30px; background:none; font-family:"RixSGo M"} .prdj_chatbot_wrap .chatbot_cont .dlab_tit strong{color:#fff; font-weight:inherit} .prdj_chatbot_wrap .chatbot_cont .dlab_tit span{color:#fff; font-weight:inherit; font-size:14px} .prdj_chatbot_wrap .chat_img_pop{margin:0} .prdj_chatbot_wrap .chat_img_pop .imgTitle{margin:0 40px 25px 40px} .prdj_chatbot_wrap .chat_img_pop .hashTagCon{padding:30px 10px 20px; text-align:center} .prdj_chatbot_wrap .chatbot_cont{background:rgba(104,111,217,1); background:-moz-linear-gradient(top, rgba(104,111,217,1) 0%, rgba(122,133,255,1) 2%, rgba(122,133,255,1) 45%, rgba(220,223,255,1) 61%, rgba(255,255,255,1) 64%); background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(104,111,217,1)), color-stop(2%, rgba(122,133,255,1)), color-stop(45%, rgba(122,133,255,1)), color-stop(61%, rgba(220,223,255,1)), color-stop(64%, rgba(255,255,255,1))); background:-webkit-linear-gradient(top, rgba(104,111,217,1) 0%, rgba(122,133,255,1) 2%, rgba(122,133,255,1) 45%, rgba(220,223,255,1) 61%, rgba(255,255,255,1) 64%); background:-o-linear-gradient(top, rgba(104,111,217,1) 0%, rgba(122,133,255,1) 2%, rgba(122,133,255,1) 45%, rgba(220,223,255,1) 61%, rgba(255,255,255,1) 64%); background:-ms-linear-gradient(top, rgba(104,111,217,1) 0%, rgba(122,133,255,1) 2%, rgba(122,133,255,1) 45%, rgba(220,223,255,1) 61%, rgba(255,255,255,1) 64%); background:linear-gradient(to bottom, rgba(104,111,217,1) 0%, rgba(122,133,255,1) 2%, rgba(122,133,255,1) 45%, rgba(220,223,255,1) 61%, rgba(255,255,255,1) 64%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#686fd9', endColorstr='#ffffff', GradientType=0 )} .prdj_chatbot_wrap .chatbot_cont .chatbot_txt{position:relative; margin:0 0 43px 0; text-align:center; font-family:"RixSGo M"; font-size:15px} .prdj_chatbot_wrap .chatbot_cont .chatbot_txt p{color:#fff} .prdj_chatbot_wrap .chatbot_cont .chatbot_txt p:nth-child(1){margin:0 0 6px 0; font-size:17px} .prdj_chatbot_wrap .chatbot_cont .chatbot_txt p:nth-child(2){margin:0 0 143px 0; font-size:25px; color:#fffafa; font-family:"RixSGo B"} .prdj_chatbot_wrap .chatbot_cont .chatbot_txt p:nth-child(4){margin:25px 0 11px 0; color:#000} .prdj_chatbot_wrap .chatbot_cont .chatbot_txt p:nth-child(5){margin:0 0 11px 0; color:#000} .prdj_chatbot_wrap .chatbot_cont .chatbot_txt p:nth-child(6){margin:0 0 11px 0; color:#000} .prdj_chatbot_wrap .chatbot_cont .chatbot_txt p:nth-child(7){color:#000} .prdj_chatbot_wrap .chatbot_cont .chatbot_txt .imgCon{position:absolute; left:50%; top:90px; z-index:1; width:70px; height:70px; margin-left:-35px} .prdj_chatbot_wrap .chatbot_cont .chatbot_txt .ani_wave{position:relative} .prdj_chatbot_wrap .chatbot_cont .chatbot_txt .ani_wave span{position:absolute; left:0; bottom:0; display:block} .prdj_chatbot_wrap .chatbot_cont .chatbot_txt .ani_wave span img{max-width:1000%; animation-name:dlab-wave; animation-iteration-count:infinite; animation-timing-function:linear; animation-duration:25s; -webkit-animation-name:dlab-wave; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -webkit-animation-duration:25s; } .prdj_chatbot_wrap .chatbot_cont .chatbot_txt .ani_wave .wave01 img,.prdj_chatbot_wrap .chatbot_cont .chatbot_txt .ani_wave .wave03 img{ animation-name:dlab-wave; -webkit-animation-name:dlab-wave; } .prdj_chatbot_wrap .chatbot_cont .chatbot_txt .ani_wave .wave02 img{margin-left:-392%} .prdj_chatbot_wrap .chatbot_cont .chatbot_txt .ani_wave .wave02 img{ animation-name:dlab-wave2; -webkit-animation-name:dlab-wave2; } @keyframes dlab-wave{ 0%{margin-left:0} 50%{margin-left:-392%} 100%{margin-left:0} } @-webkit-keyframes dlab-wave{ 0%{margin-left:0} 50%{margin-left:-392%} 100%{margin-left:0} } @keyframes dlab-wave2{ 0%{margin-left:-392%} 50%{margin-left:0} 100%{margin-left:-392%} } @-webkit-keyframes dlab-wave2{ 0%{margin-left:-392%} 50%{margin-left:0} 100%{margin-left:-392%} } .prdj_chatbot_wrap .dlab_view_cont .cont_sns{padding-top:40px} #footer .btn_mondi_chatting{display:none} .cbot #footer{margin-bottom:55px !important; padding-bottom:0 !important} .cbot #footer address{padding-bottom:20px} .cbot #footer .btn_mondi_chatting{position:fixed; bottom:0; display:block; width:100%; margin-left:-15px; -webkit-box-shadow:0px -4px 19px 0px rgba(0, 0, 0, 0.51); box-shadow:0px -4px 19px 0px rgba(0, 0, 0, 0.51)} .cbot #footer .btn_mondi_chatting a{display:block; padding:18px 0 17px 0; text-align:center; font-size:15px; font-weight:700; color:#fffefe; background:rgba(0,0,0,0.8)} .cbot #footer .btn_mondi_chatting a img{display:inline-block; width:23px; margin-right:7px} .cbot #footer .btn_mondi_chatting a span{position:relative; padding-right:13px; background:url(/subscribe/images/dlb/btn_link.png) right 3px no-repeat; background-size:7px 12px} /* 20181008 new membership */ .new_mem{} .new_mem .mem_top{background:none; padding:30px 35px 19px; margin:0} .new_mem .mem_top h2{font-family:"RixSGo M"; font-size:13px; font-weight:400} .new_mem .mem_top h2 img{height:20px; vertical-align:bottom; margin-left:4px} .new_mem .mem_top p{margin-bottom:10px; line-height:25px; color:#333; font-size:19px; font-family:"RixSGO B"} .new_mem .mem_top p em{color:#ff6665} .new_mem .mem_top:after{position:absolute; right:35px; bottom:-1px; width:38%; height:101px; content:""; display:block; background:url(/subscribe/images/dlb/mem/img_top_mem02.png) no-repeat 0px 0px; background-size:auto 119px} .new_mem .mem_top .join_btn{font-size:12px; font-family:"RixSGo B"; color:#333; padding:5px 12px; border:1px solid #ccc; border-radius:25px; display:inline-block} .new_mem .mem_top .join_btn .ico_arrow{display:inline-block; width:5px; height:9px; margin-left:4px; background:url(/subscribe/images/dlb/mem/ico_arrow.png) no-repeat left top; background-size:5px 9px} .mem_top_logout{text-align:center; padding:22px 0 19px} .mem_top_logout .stamp_con{position:relative; background:url(/subscribe/images/dlb/mem/bg_logout.png) no-repeat left top; background-size:100% auto; text-align:left; width:65%; margin:0 auto 19px} .mem_top_logout .stamp_con .info_txt{position:absolute; font-family:"RixSGo M"; font-size:11px; top:26px; left:72%; padding:2px 10px; text-align:center; border-radius:20px; border:1px solid #ccc; box-sizing:border-box; text-indent:0; letter-spacing:0} .mem_top_logout .stamp_con>a>div{margin-left:43%; padding-top:8px; margin-bottom:-8px} .mem_top_logout .stamp_con>a>div em.big_point{font-size:60px; font-weight:700; color:#ff6665; letter-spacing:-4px} .mem_top_logout .stamp_con>a>div span{font-family:"RixSGo M"; font-size:11px; color:#666} .mem_top_logout .stamp_con>a>div span em{font-size:23px; color:#666; font-family:"Roboto M"; letter-spacing:-1px; margin-right:3px} .mem_top_logout>p{font-family:"RixSGo M"; font-size:13px; color:#333} .mem_top_logout>p a{color:#ff6665; text-decoration:underline} .mem_top_logout>p em{color:#ff6665} .new_mem_event_list{padding:20px 35px 25px 35px } .new_mem_event_list>div{display:table; width:100%} .new_mem_event_list>div div{display:table-cell; width:50%} .new_mem_event_list>div div+div{border-left:1px solid #ddd; margin-left:-1px; text-indent:15px} .new_mem_event_list>div h3{font-family:"RixSGo B"; font-size:15px; color:#333; margin-bottom:4px} .ico_new{display:inline-block; width:29px; height:18px; margin-left:5px; background:url(/subscribe/images/dlb/mem/ico_new.png) no-repeat left top; background-size:29px 15px; vertical-align:middle} .ico_cs{display:inline-block; width:65px; height:18px; margin-left:5px; background:url(/subscribe/images/dlb/mem/ico_cs.png) no-repeat left top; background-size:65px 15px; vertical-align:middle} .new_mem_event_list>div p{font-family:"RixSGo M"; font-size:13px; color:#666} .new_mem_login_menu{padding:0 35px 65px} .new_mem_login_menu li{text-align:center; border-radius:5px; border:1px solid #ccc} .new_mem_login_menu li a{display:block; position:relative; font-family:"RixSGo B"; font-size:15px; color:#333; line-height:53px; padding-left:15px;} .new_mem_login_menu li a:before{content:""; clear:both; display:block; position:absolute; left:50%; top:6px; width:33px; height:32px; background:url(/subscribe/images/dlb/mem/ico_melda_login.png) no-repeat 0 0; background-size:contain; margin-left:-75px;} .new_mem_mp_menu{overflow:hidden; padding:0 35px 65px} .new_mem_mp_menu li{float:left; width:47%; text-align:center; border-radius:5px; border:1px solid #ccc; box-sizing:border-box} .new_mem_mp_menu li+li{margin-left:6%} .new_mem_mp_menu li a{font-family:"RixSGo B"; font-size:13px; color:#333; line-height:21px; font-weight:400; margin:7px 0; display:block} .new_mem.mem_cont h2{font-family:"RixSGo B"; font-size:17px; color:#000; line-height:21px; margin-bottom:10px} .new_mem.mem_cont h2+p{font-family:"RixSGo M"; font-size:14px; color:#333; line-height:21px} .new_mem.mem_cont h3{font-weight:400; font-size:17px; font-family:"RixSGo B"; margin:0 0 20px 0} .new_mem.mem_cont h4{font-weight:400; font-size:15px; font-family:"RixSGo B"; margin:28px 0 5px 0} .new_mem.mem_cont .mem_agree{margin-top:15px; padding-top:15px; margin-bottom:0; border-top:1px solid #ddd} .new_mem.mem_cont .mem_join{font-family:"RixSGo B"; font-size:15px; color:#333; line-height:21px; font-weight:400; margin-bottom:7px} .new_mem.mem_cont .mem_join+p.txt{font-family:"RixSGo M"; font-size:13px; color:#666; line-height:19px} .new_mem.mem_cont .bx_agree{background:none; padding:0} .new_mem.mem_cont .bx_agree .total_agree{/*margin-bottom:16px*/} .new_mem.mem_cont .bx_agree .total_agree label{font-size:14px; font-family:"RixSGo B"; padding-left:30px !important} .new_mem.mem_cont .bx_agree .total_agree label strong{font-weight:400} .new_mem.mem_cont .bx_agree .sec{} .new_mem.mem_cont .bx_agree .sec .sec_title{font-size:13px; font-family:"RixSGo M"; color:#000; margin:0 0 8px} .new_mem.mem_cont .bx_agree .sec .box_gray15{padding:20px 14px; font-size:12px !important; font-family:"RixSGo B"; color:#000; height:125px; overflow-y:scroll} .new_mem.mem_cont .bx_agree .sec .box_gray15 .chk_wrap{margin:10px 0 25px} .new_mem.mem_cont .bx_agree .sec .box_gray15 .chk_wrap .input_radio input[type=radio]+label em{top:0} .new_mem.mem_cont .terms_cont p,.new_mem.mem_cont .terms_cont li, .new_mem.mem_cont .bx_agree .sec .box_gray15 .list_type02 dt,.new_mem.mem_cont .bx_agree .sec .box_gray15 .list_type02 dd, .new_mem.mem_cont .bx_agree .sec .box_gray15 .list_type02 dd li,.new_mem.mem_cont .bx_agree .sec .box_gray15 .list_type02 dd p{font-size:12px !important; font-family:"RixSGo B"; color:#000; font-weight:normal} .new_mem.mem_cont .show_step_mypage_ch{margin-bottom:9px} .new_mem.mem_cont .show_step_mypage_ch img{height:19px} .new_mem.mem_cont .t_txt{font-size:14px; color:#333; font-family:"RixSGo M"} .new_mem.mem_cont .group.ico>img{position:absolute; right:0; bottom:10px; width:16px} .new_mem.mem_cont .group input{font-size:15px; font-family:"RixSGo B"; font-weight:400} .new_mem.mem_cont .group label,.new_mem.mem_cont .tit_select,.new_mem.mem_cont .tit_label{font-size:12px !important; font-family:"RixSGo M"} .new_mem.mem_cont .selectbx .target_select{font-family:"RixSGo M"; font-size:15px; font-weight:400} .new_mem.mem_cont .btn_white02 input, .new_mem.mem_cont .btn_white02 span, .new_mem.mem_cont .btn_white02 strong{font-size:13px; font-family:"RixSGo M"} .new_mem.mem_cont .btn_white02.small{height:24px} .new_mem.mem_cont .btn_white02.small span{font-size:12px; line-height:24px} .new_mem.mem_cont .txt_tip{font-family:"RixSGo M"} .new_mem.mem_cont .sub_expl{font-family:"RixSGo M"; font-size:13px; color:#666; line-height:19px; margin:26px 0 7px} .new_mem.mem_cont .show_stemp_cur{padding:13px 17px; background:#e7e7e7; overflow:hidden; font-family:"RixSGo B"; font-size:14px; line-height:19px} .new_mem.mem_cont .show_stemp_cur dd em{font-size:17px; font-family:"Myriad Pro"; color:#e11b22} .new_mem.mem_cont .sss_img_con{margin:-25px -15px 0} .new_mem.mem_cont .sss_exp_con{margin-top:30px} .new_mem.mem_cont .sss_exp_con dt{font-family:"RixSGo B"; font-size:14px; line-height:22px; color:#333; margin-bottom:6px} .new_mem.mem_cont .sss_exp_con dd{font-family:"RixSGo M"; font-size:8px; line-height:20px; color:#666} .new_mem.mem_cont .sss_exp_con dd ul li{list-style-type:disc; list-style-position:inside; text-indent:-13px; padding-left:16px} .new_mem.mem_cont .sss_exp_con dd ul li span{ font-size:12px} .new_mem.mem_cont .sss_exp_con dd ul li span a{text-decoration:underline; text-decoration-color:#bcbcbc} .new_mem.mem_cont .sss_exp_con dd ul li span a:after{display:inline-block; content:""; width:6px; height:10px; background:url(/subscribe/images/dlb/mem/ico_arr_r.gif) no-repeat left top; background-size:6px 10px; margin:2px 0 0 5px} .new_mem.mem_cont .dlab_view_cont{padding:31px 0 15px} .new_mem.mem_cont .dlab_view_cont .cont_sns{padding:0; margin-bottom:25px} .new_mem.mem_cont .input_radio input[type=radio]+label em{font-size:15px; font-family:"RixSGo M"} .btn_area.btn_mem.new_mem a{margin:0 1% 0 0; padding:10px 0} .btn_area.btn_mem.new_mem a:last-child{width:67%} .btn_area.btn_mem.new_mem a span{font-weight:400; font-family:"RixSGo B"} /* 이벤트 리스트 */ .new_mem.mem_cont .banner_list{} .new_mem.mem_cont .banner_list li{position:relative} .new_mem.mem_cont .banner_list li+li{margin-top:28px} .new_mem.mem_cont .banner_list li a{text-align:center; font-family:"RixSGo M"; font-size:12px; color:#555} .new_mem.mem_cont .banner_list li a p{margin-top:7px} .new_mem.mem_cont .banner_list li a p .date_txt{display:block; font-size:11px; font-family:"Myriad Pro"; margin-top:8px; letter-spacing:0;} .new_mem.mem_cont .banner_list li a>span{position:absolute; right:10px; top:10px; font-family:"RixSGo B"; font-size:10px; color:#000; padding:4px 0; border-radius:25px; background:#fff; width:65px} .new_mem.mem_cont .banner_list li a>span.active{color:#e24737;} .new_mem.mem_cont .banner_list li a>span em{color:#e24737} .new_mem.mem_cont .btn.add_view{display:block; padding:7px 30px; font-size:13px; line-height:22px; color:#333333; text-align:center; border:1px solid #ccc; background:#fff; margin:30px auto 0} /* 푸터 */ .new_mem_footer{position:fixed; bottom:0; left:0; background:#ff6665; width:100%; z-index:100} .new_mem_footer ul li{float:left; width:33.3333%; padding:15px 0; text-align:center} .new_mem_footer ul li a{display:inline-block; min-height:26px; color:#fff; padding-left:33px; font-family:"RixSGo M"; font-size:13px; line-height:30px; background:url(/subscribe/images/dlb/mem/ico_footer.png) no-repeat left top; background-size:27px auto} .new_mem_footer ul li a.home{background-position:0 -30px; padding-left:30px} .new_mem_footer ul li a.mypage{background-position:0 -60px; padding-left:27px} @media screen and (max-width:320px){ .mem_top_logout .stamp_con>div{margin-left:40%} .mem_top_logout .stamp_con>div em.big_point{font-size:54px} .mem_top_logout .stamp_con .info_txt{top:23px; left:69%} } @media screen and (min-width:410px){ .mem_top_logout .stamp_con>div{margin-left:47%; padding-top:15px; margin-bottom:-15px} .mem_top_logout .stamp_con .info_txt{top:33px} } .mem_cont.new_mem .confirm_agree{margin:0; padding:0; border-bottom:0} .mem_cont.new_mem .sec{padding-top:15px; border-top:1px dotted #ccc} .mem_cont.new_mem .sec:first-child{border-top:0 none} .mem_cont.new_mem .bx_agree > .box_gray15{padding:20px 14px; font-size:12px !important; font-family:"RixSGo B"; color:#000} .mem_cont.new_mem .bx_agree .input_checkbox label em strong{font-size:14px; font-weight:400} .mem_cont.new_mem .bx_agree .input_checkbox label em{font-size:13px; letter-spacing:-0.05em} .mem_cont.new_mem .confirm_agree label em{font-size:13px} /* 마이페이지 */ .new_mem.mypage_info .my_stamp_view{background:#f1f1f1} .new_mem.mypage_info .my_stamp_view .stamp_cnt{position:relative; padding:10px 10px 0} .new_mem.mypage_info .my_stamp_view .stamp_cnt strong{line-height:60px; font-weight:600; font-size:60px; color:#ff6665; letter-spacing:-0.075em} .new_mem.mypage_info .my_stamp_view .stamp_cnt span{font-size:23px; color:#666; letter-spacing:-0.075em} .new_mem.mypage_info .my_stamp_view .stamp_cnt span em{position:relative; top:-2px; font-size:11px} .new_mem.mypage_info .my_stamp_view .stamp_cnt .btn_refresh{margin:-3px 0 0 5px; width:17px; height:17px; border:0 none; background:url(/subscribe/images/dlb/mem/btn_refresh.png) no-repeat 0 0; background-size:17px auto; text-indent:-999em} .new_mem.mypage_info .my_stamp_view .stamp_cnt .btn_modify{position:absolute; right:10px; bottom:8px; display:block; width:18px; height:18px; background:url(/subscribe/images/dlb/mem/btn_modi_my.png) no-repeat 0 0; background-size:18px auto; text-indent:-999em} .new_mem.mypage_info .my_stamp_view{padding:0 15px 25px} .new_mem_stamp_slide{width:330px; height:245px; margin-bottom:10px} .new_mem_stamp_slide .swiper-slide{width:330px; display:flex; flex-shrink:0; position:relative} .new_mem_stamp_slide .swiper-slide img{width:100%; height:100%} @media screen and (max-width:320px){ .new_mem.mypage_info .my_stamp_view{padding:0 5px 25px} .new_mem_stamp_slide{width:300px; height:245px; margin-bottom:10px} .new_mem_stamp_slide .swiper-slide{width:300px; display:flex; flex-shrink:0; position:relative} } .new_mem_stamp_slide .swiper-slide .stamp_box{padding:7px 25px 15px; border-radius:5px; border:2px solid #ff6665; background:#fff} .new_mem_stamp_slide .swiper-slide .stamp_box ul:after{content:''; display:block; clear:both} .new_mem_stamp_slide .swiper-slide .stamp_box li{float:left; margin-top:8px; width:20%; text-align:center} .new_mem_stamp_slide .swiper-slide .stamp_box li span{display:block; margin:0 auto; width:46px; height:46px; background:url(/subscribe/images/dlb/mem/ico_stamp.png) no-repeat 0 0; background-size:92px auto} .new_mem_stamp_slide .swiper-slide .stamp_box li span.on{background-position:-46px 0; background-size:92px auto} .new_mem_stamp_slide .swiper-button-next, .new_mem_stamp_slide .swiper-button-prev{margin-top:-9px; width:13px; height:18px; background:url(/subscribe/images/dlb/mem/btn_stamp_slide.png) no-repeat 0 0; background-size:30px auto} .new_mem_stamp_slide .swiper-button-next{background-position:-18px 0} .new_mem.mypage_info .my_stamp_view .sp_info{margin-left:8px; padding-left:7px; background:url(/subscribe/images/dlb/mem/bul_dot_gray2.png) no-repeat 0 7px; background-size:3px auto; font-size:13px; letter-spacing:-0.05em} .new_mem.mypage_info .my_stamp_view .sp_info span{color:#ff6665} .new_mem.mypage_info .my_stamp_view .new_mem_mp_menu{margin-top:15px; padding:0 25px; background:none; font-weight:600} .new_mem.mypage_info .my_stamp_view .new_mem_mp_menu li{float:left; background:#fff}/*20190307 마이페이지 걱정인형 소개버튼*/ .new_mem_mp_menu li+li{margin-left:4%} .new_mem.mypage_info .my_history .tab_cont{margin-bottom:50px} .new_mem.mypage_info .my_history .tab_ctaArea li{height:40px; background:#b4b4b4} .new_mem.mypage_info .my_history .tab_ctaArea li.on{background:#fff} .new_mem.mypage_info .my_history .tab_ctaArea li a{line-height:40px; height:40px; background:#b4b4b4; font-weight:600; font-size:14px; color:#fff} .new_mem.mypage_info .my_history .tab_ctaArea li.on a{background:#fff; color:#333} .new_mem.mypage_info .stamp_empty{padding:0 15px} .new_mem.mypage_info .stamp_empty > div {margin-top:15px} .new_mem.mypage_info .stamp_empty > div:first-child {margin-top:30px} .new_mem.mypage_info .stamp_empty .line_box{position:relative; padding:19px 95px 19px 15px; min-height:100px; border:1px solid #ccc; box-sizing:border-box} .new_mem.mypage_info .stamp_empty .line_box:after{content:''; position:absolute; right:20px; top:12px; display:block; width:72px; height:70px; background:url(/subscribe/images/dlb/mem/bg_stamp.png) no-repeat 0 0; background-size:72px auto} .new_mem.mypage_info .stamp_empty .line_box .ev_tag{display:inline-block; margin-bottom:8px; padding:0 8px; height:20px; line-height:20px; border-radius:10px; background:#ff6665; font-weight:400; font-size:10px; color:#fff} .new_mem.mypage_info .stamp_empty .line_box .tit_txt{font-weight:400; font-size:14px} .new_mem.mypage_info .stamp_empty .line_box .add_txt{font-size:12px; color:#666} .new_mem.mypage_info .stamp_empty .line_box .add_txt em{color:#f04c51} .new_mem.mypage_info .stamp_empty .coming_box{padding:30px 0 0; min-height:100px; text-align:center; border:1px solid #ccc; background:#f7f7f7; box-sizing:border-box} .new_mem.mypage_info .stamp_empty .coming_box p{line-height:19px; font-size:14px; color:#d6d6d6} .new_mem.mypage_info .stamp_empty .coming_box p span{font-size:15px} .new_mem.mypage_info .stamp_list:after{content:''; display:block; clear:both} .new_mem.mypage_info .stamp_list{padding:0 15px} .new_mem.mypage_info .stamp_list .i_info{margin:12px 0 0 10px; padding-left:15px; background:url(/subscribe/images/dlb/mem/bul_alt_s.png) no-repeat 0 1px; background-size:12px auto; line-height:16px; font-size:12px; color:#777} .new_mem.mypage_info .stamp_list .chk_wrap{float:right; margin:25px 0 15px} .new_mem.mypage_info .stamp_list .chk_wrap label{font-size:14px} .new_mem.mypage_info .stamp_list .tbl_list02 tr th:first-child,.new_mem.mypage_info .stamp_list .tbl_list02 tr td:first-child{padding-left:6px} .new_mem.mypage_info .stamp_list .tbl_list02 th,.new_mem.mypage_info .stamp_list .tbl_list02 td{font-size:15px} .new_mem.mypage_info .stamp_list .tbl_list02 .ct{text-align:center} .new_mem.mypage_info .stamp_list .tbl_list02 .ptc{color:#ff6665} /* 팝업 */ .layer_wrap .alert.new_mem{padding:20px 0 0} .layer_wrap .alert .ico_alert_newMem{display:block; width:94px; height:91px; margin:0 auto 12px; background:url(/subscribe/images/dlb/mem//ico_alert.png) 0 0 no-repeat; background-size:94px 91px} .layer_wrap .btn_newMem_pop{display:block; font-family:"RixSGo B"; font-size:14px; padding:13px 0; background:#ff6665; color:#fff} /* 프로젝트D 챗봇 수정(컨텐츠 추가) 181218 */ .prdj_chatbot_wrap .chatbot_cont{background-color:#eceff8;} .prdj_chatbot_wrap.type02 .chatbot_txt1{width:100%; height:109.17vw; background-color:#eceff8; background:url(/subscribe/images/dlb/img_prdjD01.gif) 0 0 no-repeat; background-size:100% 100%; position:relative;} .click_wrap{padding:0 15px; box-sizing:border-box; position:absolute; width:100%; top:46.6%; left:50%; transform:translateX(-50%);} /*.prdj_chatbot_wrap.type02 .chatbot_txt1 li{box-sizing:border-box; width:100%; position:absolute; top:50%; transform:translateY(-50%); padding:0 21% 0 7%;}*/ .prdj_chatbot_wrap.type02 .chatbot_txt1 li:first-child{color:#000; font-weight:700; /*letter-spacing:-0.025em; */ font-size:15px;} .chatbot_txt1 .inner .ing{background:#fff; border-radius:30px; box-sizing:border-box; height:44px; display:block; position:relative;} .chatbot_txt1 .inner .ing{height:44px; position:relative;} .chatbot_txt1 .inner .ing .slide_box{width:90%; height:44px; line-height:44px; position:absolute; left:9%; top:0px;}/* overflow:hidden; */ .chatbot_txt1 .inner .ing .slide_box .slide{position:absolute; width:100%;} /* 220411 : CKM : 프로젝트D 예시 질문 삭제 */ .chatbot_txt1 .inner .ing .slide ul li a, .chatbot_txt1 .inner .ing .slide ul li a{font-weight:700; font-size:13px; /*letter-spacing:-0.025em; */; opacity:1; display:block;} .chatbot_txt1 .send{background:url(/subscribe/images/dlb/img_send1.png) 0 0 no-repeat; background-size:100% 100%; width:48px; height:25px; text-indent:-9999em; position:absolute; right:4%; top:50%; transform:translateY(-50%); animation:send 2s 1 1s forwards; -webkit-animation:send 2s 1 1s forwards; -ms-animation:send 2s 1 1s forwards;} @keyframes send{ 0%{background:url(/subscribe/images/dlb/img_send1.png) 0 0 no-repeat; background-size:100% 100%; width:48px; height:25px;} 100%{background:url(/subscribe/images/dlb/img_send.png) 0 0 no-repeat; background-size:100% 100%; width:48px; height:25px;} } @-webkit-keyframes send{ 0%{background:url(/subscribe/images/dlb/img_send1.png) 0 0 no-repeat; background-size:100% 100%; width:48px; height:25px;} 100%{background:url(/subscribe/images/dlb/img_send.png) 0 0 no-repeat; background-size:100% 100%; width:48px; height:25px;} } .chatbot_txt1 .inner{position:relative; background:#cfcfcf; display:block; padding:6px; border-radius:30px; box-sizing:border-box; z-index:-1; animation:inner 3s ease-out 1.5s 1 forwards; -webkit-animation:inner 3s ease-out 1.5s 1 forwards; -ms-animation:inner 3s ease-out 1.5s 1 forwards;} @keyframes inner{ 0%{padding:6px; background:#cfcfcf;} 20%{padding:3px;} 100%{padding:3px;} } @-webkit-keyframes inner{ 0%{padding:6px; background:#cfcfcf;} 20%{padding:3px; background:linear-gradient(-180deg,#6c6ff3, #6f72f5);} 100%{padding:3px; background:linear-gradient(-180deg,#6c6ff3, #6f72f5);} } /* 그라데이션 */ .chatbot_txt1 .gd{background:linear-gradient(90deg,#cfcfcf, #6c6ff3); border-radius:30px; height:100%; position:absolute; top:0; z-index:-1; animation:gradient 3s ease-out 1s 1 forwards; -webkit-animation:gradient 3s ease-out 1s 1 forwards; -ms-animation:gradient 3s ease-out 1s 1 forwards;} @keyframes gradient{ 0%{left:0; width:0%;} 20%{left:0; width:100%;} 100%{left:0; width:100%; background:linear-gradient(-180deg,#6c6ff3, #6f72f5);} } @-webkit-keyframes gradient{ 0%{left:0; width:0%;} 20%{left:0; width:100%;} 100%{left:0; width:100%; background:linear-gradient(-180deg,#6c6ff3, #6f72f5);} } /* 링크영역 */ .clickWrap, .mondi_question{background-color:#eceff8;} .clickWrap .img, .mondi_question .img{position:relative;} .clickWrap .img img, .mondi_question .img img{width:100%; vertical-align:top; margin-top:0; display:block} .clickWrap .img .btn1{position:absolute; top:19%; left:7.4%; width:85%; height:81%;} .clickWrap .img .btn1 span{position:absolute; z-index:-1;} .clickWrap .img .btn2{position:absolute; top:14%; left:7.4%; width:85%; height:86%;} .clickWrap .img .btn2 span{position:absolute; z-index:-1;} .clickWrap .img .btn3{position:absolute; top:11%; left:7.4%; width:85%; height:66.9%;} .clickWrap .img .btn3 span{position:absolute; z-index:-1;} .mondi_question .img .btn{position:absolute; top:49%; left:4.2%; width:91.5%; height:33%;} .mondi_question .img .btn span{position:absolute; z-index:-1; text-indent:-9999em;} .mondi_question .img i{position:absolute; top:60.5%; left:10.8%; width:91.5%; height:33%; z-index:-1; text-indent:-9999em; animation:chatD 1s step-end infinite; -webkit-animation:chatD 1s step-end infinite; -ms-animation:chatD 1s step-end infinite; background:url(/subscribe/images/dlb/img_cursor.png) 0 0 no-repeat; background-size:100% 100%; width:1px; height:16px;} @keyframes chatD{ 0%{z-index:1;} 50%{z-index:-1} } @-webkit-keyframes chatD{ 0%{z-index:1;} 50%{z-index:-1} } /* 2019-02-20 멜다방 1차 이벤트 3종 추가*/ .melda_event_cont{width:100%; overflow:hidden;} .melda_event_cont .melda_img_con{position:relative; font-size:0; line-height:0;} .melda_event_cont .melda_img_con img{display:block; vertical-align:top;} .melda_event_cont .melda_form_con{position:relative;} .mel_exp_con{margin:20px 0; padding:0 15px;} .mel_exp_con dt{font-family:"RixSGo B"; font-size:14px; line-height:22px; color:#333; margin-bottom:6px} .mel_exp_con dd{font-family:"RixSGo M"; font-size:8px; line-height:20px; color:#666} .mel_exp_con dd ul li{position:relative;padding-left:8px;text-indent:-6px;} .mel_exp_con dd ul li:before {position: absolute;left:0;top:10px;display:block;content:"";width:2px;height:2px;background:#666666;} .mel_exp_con dd ul li span{margin-left:7px;font-size:12px} .mel_exp_con dd ul li span a{text-decoration:underline; text-decoration-color:#bcbcbc} .mel_exp_con dd ul li span a:after{display:inline-block; content:""; width:6px; height:10px; background:url(/subscribe/images/dlb/mem/ico_arr_r.gif) no-repeat left top; background-size:6px 10px; margin:2px 0 0 5px} .melda_event_cont .dlab_view_cont{padding:31px 15px 15px} .melda_event_cont .dlab_view_cont .cont_sns{padding:0; margin-bottom:25px} .melda_event_cont .btn.add_view{display:block; padding:7px 30px; font-size:13px; line-height:22px; color:#333333; text-align:center; border:1px solid #ccc; background:#fff; margin:30px auto 0} .melda_event_cont .melda_form_con.mel_customer{background-color:#4b4b5e;} .melda_event_cont .melda_form_con{position:relative; width:100%;} .melda_event_cont .customer_form{text-align:center; padding-bottom:10px;} .melda_event_cont .customer_form input[type=text]{font-size:15px; font-family:"RixSGo B"; font-weight:400; border:solid 2px #333333; border-radius:3px 3px 3px 3px; width:284px; height:49px; line-height:49px; box-sizing:border-box; text-align:center;} .melda_event_cont .customer_form label{text-indent:-999px; overflow:hidden; width:1px; height:1px; position:absolute; left:-1px; top:-1px;} .melda_event_cont .melda_confirm{width:100%; background-color:#4b4b5e; padding:8px 0 16px; text-align:center; box-sizing:border-box;} .melda_event_cont .melda_confirm a{max-width:284px; display:inline-block;} /* 2019-02-22 BHY :New membership - modify */ .new_mem_slide_con{padding:12px 0; opacity:0} .new_mem_slide_con .swiper-wrapper .swiper-slide{display:flex; flex-shrink:0; position:relative; width:300px !important; transform:scale(1, 1);} .new_mem_slide_con .swiper-wrapper .swiper-slide.swiper-slide-active{transform:scale(1.1, 1.1);} .new_mem_slide_con .swiper-wrapper .swiper-slide img{width:100%; height:100%} /* 2019-02-26 멜다방 걱정인형 소개페이지 추가*/ .melda_event_cont .mel_wrydoll{background-color:#78c9fb;} .melda_event_cont .exp_wrydoll.mel_exp_con dd ul li span a:after{display:none;} /*2019-03-07 멜다방 신장개업 이벤트 페이지 추가*/ .melda_event_cont.season_evt .melda_img_con .btn_01{position:absolute; left:10%; top:87.5%; width:80%; height:6%;} /*2019-03-08 멜다방 로그인 수정*/ .new_mem.mem_cont .login_header p{font-family:"RixSGo M"; font-size:14px; color:#333; line-height:21px} .new_mem.mem_cont .login_header .btn_wrap{text-align:left; margin-top:10px; line-height:25px;} .new_mem.mem_cont .login_header .btn_wrap:after{content:""; clear:both; display:block;} .new_mem.mem_cont .login_header .btn_wrap p{line-height:25px;} .new_mem.mem_cont .login_header .btn_wrap a{color:#e11b22; text-decoration:underline;} /* .new_mem.mem_cont .login_header .btn_wrap a{font-family:"RixSGo B"; border:1px solid #ccc; display:block; height:25px; color:#666; font-weight:400; vertical-align:top; line-height:25px; padding:0px 20px; width:100px; text-align:center; margin:10px auto 0;} */ .new_mem.mem_cont .login_header .btn_wrap a span{color:#666; font-size:13px;} /*2019-03-12 공통 grid 추가 kjw*/ * [class*="grid_"]{box-sizing:border-box} * [class*="grid_"]:before,* [class*="grid_"]:after{content:''; display:block; clear:both} * [class*="grid_"]>*{float:left} .grid_02>*{width:50%} .grid_03>*{width:33.33%} .grid_04>*{width:25%} /*2019-03-20 멜다방 생일 축하 이벤트 페이지 - kjw*/ .melda_event_cont.birth_evt .melda_img_con.birth_btn{padding-bottom:15%; background:#f9c0b5;} .melda_event_cont.birth_evt .melda_img_con .btn_01{position:absolute ; left:11.5%; top:0; width:76.9%; height:60%;} .melda_event_cont.birth_evt .melda_img_con .birth_type{position:relative;} .melda_event_cont.birth_evt .melda_img_con .birth_type .birth_yes{position:absolute; left:12.9%; bottom:3.1%; width:auto; height:19.0%;} .melda_event_cont.birth_evt .melda_img_con .birth_type .birth_yes span:first-of-type{display:block; float:left; line-height:1em;} .melda_event_cont.birth_evt .melda_img_con .birth_type .birth_yes img:first-of-type{float:left; width:23.4vw; margin-left:9px;} .melda_event_cont.birth_evt .melda_img_con .birth_type .birth_yes img:nth-of-type(2){width:49.4vw; margin-top:15%;} .melda_event_cont.birth_evt .melda_img_con .birth_type .birth_yes span, .melda_img_con .birth_type .birth_no span{font-size:5.6vw; color:#fff9c8; font-weight:700; line-height:1em;} .melda_event_cont.birth_evt .melda_img_con .birth_type .birth_no{position:absolute; left:12.9%; bottom:3.1%; height:19.0%;} .melda_event_cont.birth_evt .melda_img_con .birth_type .birth_no p{padding-top:2%;box-sizing:border-box; line-height:1em;} .melda_event_cont.birth_evt .melda_img_con .birth_type .birth_no p:after{content:''; display:block; clear:both;} .melda_event_cont.birth_evt .melda_img_con .birth_type .birth_no p span{margin:0 5px; box-sizing:border-box; display:block; float:left; line-height:1em; vertical-align:middle;} .melda_event_cont.birth_evt .melda_img_con .birth_type .birth_no p span:first-of-type{margin-left:0;} .melda_event_cont.birth_evt .melda_img_con .birth_type .birth_no p img {display:block; float:left; box-sizing:border-box; vertical-align:middle;} .melda_event_cont.birth_evt .melda_img_con .birth_type .birth_no p:first-child img {width:23vw;} .melda_event_cont.birth_evt .melda_img_con .birth_type .birth_no p:nth-of-type(2) img:first-of-type {height:4.7vw;} .melda_event_cont.birth_evt .melda_img_con .birth_type .birth_no p:nth-of-type(2) img:nth-of-type(2) {width:18vw;} .melda_event_cont.birth_evt .melda_img_con .birth_type .birth_no p:nth-of-type(3) {width:49vw;margin-top:1%;} /*멜다방 월드컵 이벤트 - kjw*/ .melda_event_cont.worldcup_evt{background:url(/subscribe/images/dlb/melbang/event/bg_wc_event.png) repeat 0 0;} .melda_event_cont.worldcup_evt .wc_charinfo{margin-bottom:5%;} .melda_event_cont.worldcup_evt .worldcup_evtcon{position:relative; width:88.9%; min-width:320px; max-width:632px; margin:5% auto; background:#fff; border:2px solid #000; box-sizing:border-box} .melda_event_cont.worldcup_evt .worldcup_evtcon:before,.melda_event_cont.worldcup_evt .worldcup_evtcon:after{content:''; display:block; clear:both;} .melda_event_cont.worldcup_evt .worldcup_evtcon .vote_start{position:relative; left:0; width:100%; height:100%; z-index:10;} .melda_event_cont.worldcup_evt .worldcup_evtcon .wc_charwrap .wc_character{position:absolute; left:27%; top:12.5%; display:block; width:40.6%; min-width:130px; min-height:120px; transform:translateX(-50%)} .melda_event_cont.worldcup_evt .worldcup_evtcon .wc_charwrap .wc_character.on{animation:wc_char_ani 1 1s linear;} .melda_event_cont.worldcup_evt .worldcup_evtcon .wc_charwrap .wc_character+.wc_character{left:73%;} .melda_event_cont.worldcup_evt .worldcup_evtcon .vs{position:absolute; left:50%; top:30%; width:12.34%; min-width:40px; min-height:40px; transform:translateX(-50%); animation:wc_vs_ani infinite 2s } .melda_event_cont.worldcup_evt .worldcup_evtcon .next_wc{position:absolute; left:0; bottom:0; width:100%; height:20%; border-top:2px solid #000; overflow:hidden;} .melda_event_cont.worldcup_evt .worldcup_evtcon .next_wc:before{content:""; position:absolute; left:0; top:0; width:0; height:100%; background-color:#ff6665; z-index:1;} .melda_event_cont.worldcup_evt .worldcup_evtcon .next_wc:after{content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-color:#a4a4a4;} .melda_event_cont.worldcup_evt .worldcup_evtcon .next_wc.on:before{width:100%;} .melda_event_cont.worldcup_evt .worldcup_evtcon .next_wc a{display:block; position:absolute; left:0; top:0; width:100%; height:100%; z-index:2;} .melda_event_cont.worldcup_evt .wc_winner{position:absolute; left:0; top:0; width:100%; z-index:-1;} .melda_event_cont.worldcup_evt .wc_winner.on{z-index:1;} .melda_event_cont.worldcup_evt .mel_exp_con{background:#fff; margin:0; padding:30px 15px;} .melda_event_cont.worldcup_evt .worldcup_btnwrap{display:none; width:100%;margin:5% 0;min-height:45px;} .melda_event_cont.worldcup_evt .worldcup_btnwrap.on{display:block;} .melda_event_cont.worldcup_evt .worldcup_btnwrap a{display:block; width:88.9%; min-width:320px; margin:0 auto; border:2px solid #000; box-sizing:border-box; padding:4%; background:#ff6665; text-align:center;} .melda_event_cont.worldcup_evt .worldcup_btnwrap a img{width:27.2%} @keyframes wc_char_ani{ 0%{transform:translateX(-50%) rotateY(0deg)} 25%{transform:translateX(-50%) rotateY(90deg)} 50%{transform:translateX(-50%) rotateY(180deg)} 75%{transform:translateX(-50%) rotateY(270deg)} 100%{transform:translateX(-50%) rotateY(360deg)} } @keyframes wc_vs_ani{ 0%{transform:translateX(-50%) scale(1.0)} 25%{transform:translateX(-50%) scale(0.8)} 50%{transform:translateX(-50%) scale(1.0)} 75%{transform:translateX(-50%) scale(0.8)} 100%{transform:translateX(-50%) scale(1.0)} } /* 190408 보험금 청구 안내 랜딩 페이지 */ .landing_pbox .header {position:relative;height:57px;background-color:#fff;box-sizing:border-box; box-shadow: 0 0 15px rgba(0,0,0,0.3);text-align: center;} .landing_pbox .header h1 {padding-top:12px;width: 120px;margin:0 auto} .landing_pbox .header h1 a {display: block;width: 120px;} /* 190416 : KJW : 멜다방 룰렛 이벤트 */ .melda_event_cont.roulette_evt {margin:0 auto; max-width:720px;} .melda_event_cont.roulette_evt img[class*="roulette_con"]{position:absolute; left:50%; transform:translate(-50%);} .melda_event_cont.roulette_evt .roulette_con01{width:86%; top:39.6%;} .melda_event_cont.roulette_evt .roulette_con02{position:absolute; left:50%; width:75.6%; top:42.8%; transform:translate(-50%);transition: opacity 1s ease-in } .melda_event_cont.roulette_evt .roulette_con02 img{transform-origin:center center;} .melda_event_cont.roulette_evt .roulette_con02.on img{transition:all 5s ease-out;} .melda_event_cont.roulette_evt .roulette_con03{width:7.2%; top:36.9%;} .melda_event_cont.roulette_evt .btn_01{position:absolute; width:24.2%; left:50%; top:59.4%; transform:translate(-50%);} /* 190527 : KJW : 멜다방 6월 룰렛 이벤트 */ .roulette06_evt {margin:0 auto; max-width:720px;width:100%; overflow-x:hidden;} .roulette06_evt .melda_img_con{position:relative; font-size:0; line-height:0;} .roulette06_evt img[class*="roulette_con"]{position:absolute; left:50%; transform:translate(-50%);} .roulette06_evt .roulette_con01{width:86%; top:39.6%;} .roulette06_evt .roulette_con02{position:absolute; left:50%; width:75.6%; top:42.8%; transform:translate(-50%);} .roulette06_evt .roulette_con02 img{transform-origin:center center;} .roulette06_evt .roulette_con02.on img{transition:all 5s ease-out;} .roulette06_evt .roulette_con03{width:7.2%; top:36.9%;} .roulette06_evt .btn_01{position:absolute; width:24.2%; left:50%; top:59.4%; transform:translate(-50%);} /* 20190607 : KSH : EVENT 종료*/ .end_evt_box{position: relative; padding:30px 0 22px; margin:0 0 53px;} .event01_dim{position: absolute; top: 65px; width: 100vw; height: 93%; left: -15px; background: rgba(0, 0, 0, 0.4); z-index: 10; text-align: center;} .event01_end_ment{position: relative; top:50%; margin-top:-17px; color: #fff; font-size: 25px; text-decoration: underline; text-underline-position: under;} .btn_sachi{margin-bottom: 48px;} /* 190624 : BHY : 멜다방 7월 이벤트 */ .cafe_july_event .luckyBox {position: relative;} .cafe_july_event .luckyBox .toy_left {position: absolute;left:3.4%;top:57.4%;z-index:1;width: 14%;height:14%} .cafe_july_event .luckyBox .toy_left .smark {position: absolute;left:37%;top:5%;z-index:3;width: 20%;height:20%} .cafe_july_event .luckyBox .toy_left .toy {position: absolute;left:0%;top:10%;z-index:2;} .cafe_july_event .luckyBox .toy_left .toy.active {transform: rotate(-45deg);transform-origin: center bottom} .cafe_july_event .luckyBox .toy_left .toy_box {position: absolute;left:7%;top:60%;z-index:1;width:100%;} .cafe_july_event .luckyBox .toy_right {position: absolute;right:3.8%;top:58.2%;z-index:1;width: 14%;height:14%} .cafe_july_event .luckyBox .toy_right .smark {position: absolute;right:15%;top:0%;z-index:3;width: 20%;height:20%} .cafe_july_event .luckyBox .toy_right .toy {position: absolute;right:0%;top:18%;z-index:2;} .cafe_july_event .luckyBox .toy_right .toy.active {transform: rotate(45deg);transform-origin: center bottom} .cafe_july_event .luckyBox .toy_right .toy_box {position: absolute;right:7%;top:60%;z-index:1;width:100%;} .cafe_july_event .luckyBox .boxWrap {position: absolute;left:25%;top:48%;z-index:2;width: 50%;height:50%} .cafe_july_event .luckyBox .box_top {position: absolute;left:0%;top:0%;z-index:2;width: 100%;} .cafe_july_event .luckyBox .box {position: absolute;left:2%;top:12%;z-index:1;width: 98%;} .cafe_july_event .luckyBox .mark {position: absolute;left:47%;top:40%;z-index:1;width: 8%;height:8%} .cafe_july_event .notice {margin:30px 0; padding:0 15px;} .cafe_july_event .notice dt{font-family:"RixSGo B"; font-size:14px; line-height:22px; color:#333; margin-bottom:6px} .cafe_july_event .notice dd{font-family:"RixSGo M"; font-size:8px; line-height:20px; color:#666} .cafe_july_event .notice dd ul li{list-style-type:disc; list-style-position:inside; text-indent:-13px; padding-left:16px} .cafe_july_event .notice dd ul li span {font-size:12px} .move { animation: boxMove 0.3s infinite; animation-direction : alternate; animation-delay : 0.5s } .moveTop { transform: rotate(-10deg) } @keyframes boxTopMove{ 0% {transform: rotate(0deg);} 100% {transform: rotate(45deg)} } @keyframes boxMove{ 0% {left:24%;} 25% {left:25%;} 50% {left:24%;} 75% {left:25%;} 100% {left:25%;} } /* 190717 : KSH : 멜다방 플친 이벤트 */ .melda_plfr_stamp_box>a.hide_on{ display: none; } .mel_exp_con.plus_friends{ background-color: #e8e8e8; padding: 30px 15px; margin: 0; } /* 190729 : KSH : 멜다방 걱정인형 신청 */ .mem_cont .doll_apply_header h2 {font-family:"RixSGo B"; font-size:17px; color:#000; line-height:21px; margin-bottom:10px; font-weight:bold;} .mem_cont .doll_apply_header p {margin-bottom:15px; font-family:"RixSGo M"; font-size:14px; color:#333; line-height:21px} .mem_cont .doll_apply_header p .underline{color:#e11b22; text-decoration:underline;} .mem_cont .doll_apply_header .btn_area{padding: 15px 0;} .btn_area .doll_apply_btn {display:inline-block; padding:8px; text-align:center; background:#0096af; color:#fff;} .mem_cont . {margin: 30px 0;} .mem_cont .doll_apply_notice dt {font-family:"RixSGo B"; font-size:14px; line-height:22px; color:#333; margin-bottom:6px;} .mem_cont .doll_apply_notice dd{font-family:"RixSGo M"; font-size:8px; line-height:20px; color:#666;} .mem_cont .doll_apply_notice dd ul li{list-style-type:disc; list-style-position:inside; text-indent:-13px; padding-left:16px;} .mem_cont .doll_apply_notice dd ul li span{font-size:12px;} .mem_cont .doll_info_header h2 {font-family:"RixSGo B"; font-size:17px; color:#000; line-height:21px; margin-bottom:10px; font-weight:bold;} .mem_cont .doll_info_header p {margin-bottom:15px; font-family:"RixSGo M"; font-size:14px; color:#333; line-height:21px} .mem_cont .doll_info_main {margin:15px 0 0 0; padding-top:15px; border-top:1px solid #ddd;} .mem_cont .doll_info_main h3{font-family:"RixSGo B"; font-size:15px; color:#333; line-height:21px; font-weight:400; margin-bottom:7px;} .mem_cont .doll_info_main.mem_agree .group input{font-size:15px;font-family:"RixSGo B";font-weight:400;} .mem_cont .doll_info_notice {margin:30px 0;} .mem_cont .doll_info_notice dt {font-family:"RixSGo B"; font-size:14px; line-height:22px; color:#333; margin-bottom:6px;} .mem_cont .doll_info_notice dd{font-family:"RixSGo M"; font-size:8px; line-height:20px; color:#666;} .mem_cont .doll_info_notice dd ul li{list-style-type:disc; list-style-position:inside; text-indent:-13px; padding-left:16px;} .mem_cont .doll_info_notice dd ul li span{font-size:12px;} .mem_cont .doll_apply_header.hide_on, .mem_cont .doll_apply_notice.hide_on, .mem_cont .doll_info_header.hide_on, .mem_cont .doll_info_main.hide_on, .mem_cont .doll_info_notice.hide_on{display: none;} .doll_apply_btn_box>.apply_input_cancle{float:left; display:inline-block; padding:8px; width:26%; text-align:center; background:#555; color:#fff;} .doll_apply_btn_box>.apply_input_success{float:right; display:inline-block; padding:8px; width:62%; text-align:center; background:#0096af; color:#fff;} /* 190802 : BHY : 수정 추가 */ .cafe_address_find dt {color:#000;font-weight:400;font-size:13px;padding-bottom:2%} /* .cafe_address_find dd a {border:1px solid #000} */ .cafe_address_find dd a span{color:#000;} /* 190820 : KJW : 멜다방 9월 룰렛 이벤트 */ .roulette09_evt {margin:0 auto; max-width:720px;width:100%; overflow-x:hidden;} .roulette09_evt .melda_img_con{position:relative; font-size:0; line-height:0;} .roulette09_evt img[class*="roulette_con"]{position:absolute; left:50%; transform:translate(-50%);} .roulette09_evt .roulette_board{position:absolute; left:50%; top:39.6%; width:86.7%; transform:translate(-50%);} .roulette09_evt .roulette_con01{position:absolute; left:50%; transform:translate(-50%); top:44%; width:72.5%;} .roulette09_evt .roulette_con01 img{transform-origin:center center;} .roulette09_evt .roulette_con01.on img{transition:all 5s ease-out;} .roulette09_evt .roulette_con02{width:7.2%; top:37%;} .roulette09_evt img.roulette_con03{left:auto; right:0; width:25.3%; top:78.6%; transform:translate(0);} .roulette09_evt .btn_01{position:absolute; width:23.2%; left:50%; top:60%; transform:translate(-50%);} /* 190820 : KJW : 멜다방 9월 룰렛 이벤트 팝업 */ .rouletteBox_wrap .rouletteBox_info{width:100%; background:#fff;} .rouletteBox_wrap .rouletteBox_info ul li{padding:35px 0 30px; text-align:center;} .rouletteBox_wrap .rouletteBox_info ul li img{width:53.3%;text-align: center;} .rouletteBox_wrap .rouletteBox_info ul li strong{font-size:18px; letter-spacing:-0.05em; font-weight:700; margin-bottom:10px;} .rouletteBox_wrap .rouletteBox_info ul li p{font-size:14px; letter-spacing:-0.025em;} .rouletteBox_wrap .rouletteBox_info+.btn_confirm{display:block; background:#ff6665; color:#fff; padding:15px 0; font-size:14px; font-weight:700; text-align:center;} .rouletteBox_wrap .fireWorks{animation:rouletteBox_fire 1.2s ease; transform:scale(1);} @keyframes rouletteBox_fire{ 0%{transform:scale(0)} 24%{transform:scale(0)} 100%{transform:scale(1)} } /* 190917 : KJW : 멜다방 퀴즈쇼 */ /* 190917 : KJW : 멜다방 퀴즈쇼 공통 */ .meldaQuizShow{padding: 15px 15px 25px 15px; background:#fff6e5;} .meldaQuizShow .quiz_top{width:78.5%; margin:40px auto 100px;} .meldaQuizShow .melda_quiz_box{position:relative;} .meldaQuizShow .melda_quiz_box .quizbox_img{display:block; position:absolute; left:47%; top:0; width:100%; min-width:306px; transform: translateX(-50%) translateY(-90%); z-index:1;} .meldaQuizShow .melda_page{font-size:14px; color:#bbb; letter-spacing:0;} .meldaQuizShow .melda_page em{font-size:13px; color:#e11b22;} .meldaQuizShow .melda_quiz{position:relative; margin-bottom:20px; border:3px solid #4e2a06; background:#fff;} .meldaQuizShow .melda_quesArea{display:table; text-align:left;} .meldaQuizShow .melda_quesArea p{display:table-cell; padding:0 10px 0 20px; vertical-align:top; font-size:20px; color:#000; font-weight:700;} .meldaQuizShow .melda_quesText{padding:8px 8px 25px 15px; text-align:right; border-bottom:3px solid #000;} .meldaQuizShow .melda_quiz .melda_imgQ{display:table-cell; width:67px; height:67px; background:url(/subscribe/images/dlb/melbang/event/ico_quiz_ques.png) 0 0 no-repeat; background-size:67px 67px;} .meldaQuizShow .melda_quiz.wrong .melda_imgQ{background:url(/subscribe/images/dlb/melbang/event/ico_quiz_wrong.png) 0 0 no-repeat; background-size:67px 67px;} .meldaQuizShow .melda_quiz.correct .melda_imgQ{background:url(/subscribe/images/dlb/melbang/event/ico_quiz_correct.png) 0 0 no-repeat; background-size:67px 67px;} .melda_quiz .quesChoi{padding:25px 18px; border-bottom:3px solid #4e2a06;} /* 190917 : KJW : 멜다방 퀴즈쇼 객관식 문제 */ .meldaQuizShow .multiple_quiz .obj_list li{position:relative; margin:0 0 15px 0; border:2px solid #bfbfbf; border-radius:5px; text-align:center;} .meldaQuizShow .multiple_quiz .obj_list li:nth-of-type(3){margin-bottom:0;} .meldaQuizShow .multiple_quiz .obj_list li a{display:block; width:100%; height:43px; line-height:43px; color:#000; font-size:20px; font-weight:700;} .meldaQuizShow .multiple_quiz .obj_list li.on a{color:#fff; background:#419639;} .meldaQuizShow .multiple_quiz .obj_list li.on{border:2px solid #000;} .meldaQuizShow .melda_quiz.correct .multiple_quiz .obj_list li.on:after, .meldaQuizShow .melda_quiz.wrong .multiple_quiz .obj_list li.on:after{position:absolute; right:7px; top:-3px; width:20px; height:40px; display:block; content:""; background:url(/subscribe/images/dlb/melbang/event/ico_quiz_flag.png) 0 0 no-repeat; background-size:20px 40px;} .meldaQuizShow .multiple_quiz .obj_list li.wrong a{color:#cacaca; background-color:#e1e1e1; background-size:6px 6px; background-repeat:repeat; background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.3) 45%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0) 100%);} /* 190917 : KJW : 멜다방 퀴즈쇼 OX 문제 */ .meldaQuizShow .ox_quiz{text-align:center;} .meldaQuizShow .ox_quiz .sub_list li{display:inline-block; position:relative;} .meldaQuizShow .ox_quiz .sub_list li:first-child{margin:0 20px 0 0;} .meldaQuizShow .ox_quiz .sub_list li:first-child a{background:url(/subscribe/images/dlb/melbang/event/img_oxquiz_O.png) 0 0 no-repeat; background-size:130px 120px;} .meldaQuizShow .ox_quiz .sub_list li:first-child.on a{background: url(/subscribe/images/dlb/melbang/event/img_oxquiz_on_O.png) 0 0 no-repeat; background-size:130px 120px;} .meldaQuizShow .ox_quiz .sub_list li:first-child.wrong a{background:url(/subscribe/images/dlb/melbang/event/img_oxquiz_wr_O.png) 0 0 no-repeat; background-size:130px 120px;} .meldaQuizShow .ox_quiz .sub_list li:last-child a{background:url(/subscribe/images/dlb/melbang/event/img_oxquiz_X.png) 0 0 no-repeat; background-size:130px 120px;} .meldaQuizShow .ox_quiz .sub_list li:last-child.on a{background: url(/subscribe/images/dlb/melbang/event/img_oxquiz_on_X.png) 0 0 no-repeat; background-size:130px 120px;} .meldaQuizShow .ox_quiz .sub_list li:last-child.wrong a{background:url(/subscribe/images/dlb/melbang/event/img_oxquiz_wr_X.png) 0 0 no-repeat; background-size:130px 120px;} .meldaQuizShow .ox_quiz .sub_list>li>a{display:block; width:130px; height:120px;} .meldaQuizShow .melda_quiz.wrong .ox_quiz .sub_list li.on:after,.meldaQuizShow .melda_quiz.correct .ox_quiz .sub_list li.on:after{position:absolute; right:7px; top:-3px; width:20px; height:40px; display:block; content:""; background:url(/subscribe/images/dlb/melbang/event/ico_quiz_flag.png) 0 0 no-repeat; background-size:20px 40px} @media screen and (max-width: 360px){ .meldaQuizShow .ox_quiz .sub_list{min-width:260px;} .meldaQuizShow .ox_quiz .sub_list>li>a{width:117px; height:108px;} .meldaQuizShow .ox_quiz .sub_list li:first-child a{background-size:100% 100%;} .meldaQuizShow .ox_quiz .sub_list li:first-child.on a{background-size:100% 100%;} .meldaQuizShow .ox_quiz .sub_list li:first-child.wrong a{background-size:100% 100%;} .meldaQuizShow .ox_quiz .sub_list li:last-child a{background-size:100% 100%;} .meldaQuizShow .ox_quiz .sub_list li:last-child.on a{background-size:100% 100%;} .meldaQuizShow .ox_quiz .sub_list li:last-child.wrong a{background-size:100% 100%;} .meldaQuizShow .ox_quiz .sub_list li:first-child{margin:0 16px 0 0;} } /* 20190916 : KJW : 멜다방 퀴즈쇼 주관식 문제 */ .meldaQuizShow .short_answer .sub_textarea{height:50px;} .meldaQuizShow .short_answer textarea{width:100%; height:100%; box-sizing:border-box; border-radius:10px; padding:15px 30px; text-align:left; font-size:18px; font-weight:700} .meldaQuizShow .short_answer textarea.on{border:2px solid #000; background:#e1e1e1;} /* 190917 : KJW : 멜다방 퀴즈쇼 초성 퀴즈쇼 문제/입력 */ .meldaQuizShow .melda_inital_quiz{position:relative; margin:24px auto 20px; max-width:280px;} .meldaQuizShow .melda_inital_quiz:after{content:''; display:block; clear:both;} .meldaQuizShow .melda_inital_quiz li{float:left; width:60px; height:60px; line-height:60px; font-size:25px; font-family:'RixSGo M'; box-sizing:border-box; border:solid 2px #4e2a06; border-radius:10%; margin:5px; text-align:center;} .meldaQuizShow .melda_inital_txta{height:50px;} .meldaQuizShow .melda_inital_txta textarea{width:100%; height:100%; overflow:hidden; box-sizing:border-box; border-radius:10px; padding:0 30px; text-align:left; font-size:18px; font-weight:700; line-height:50px;} .meldaQuizShow .melda_inital_txta textarea.on{border:2px solid #000; background:#fff} /* 190917 : KJW : 멜다방 퀴즈쇼 초성 퀴즈쇼 정답 */ .meldaQuizShow .inital_answer_wrap{width:100%; min-width: 280px; margin:0 auto;} .meldaQuizShow .inital_answer{position:relative; margin:25px auto; max-width:280px;} .meldaQuizShow .inital_answer:after{content:''; display:block; clear:both;} .meldaQuizShow .inital_answer li{float:left; width:60px; height:60px; line-height:60px; font-size:25px; font-family:'RixSGo M'; box-sizing:border-box; border:solid 2px #000; border-radius:10%; margin:5px; text-align:center; background:#e1e1e1;} /* 190917 : KJW : 멜다방 퀴즈쇼 버튼 */ .meldaQuizShow .btnCase .quesBtn{position:relative; width:100%; height:41px; line-height:41px; text-align:center; background:#d5d5d5;} .meldaQuizShow .btnCase.on .quesBtn{background:#4e2a06;} .meldaQuizShow .btnCase .quesBtn a{display:block; width:100%; height:41px; line-height:41px; font-size:20px; color:#4e2a06; font-weight:700;} .meldaQuizShow .btnCase .quesBtn a:first-child+a{display:none;} .meldaQuizShow .quesBtn.event a:first-child{display:none;} .meldaQuizShow .quesBtn.event a:first-child+a{display:block;} .meldaQuizShow .btnCase.on .quesBtn a{color:#fff;} .meldaQuizShow .btnCase .quesBtn a .ico_arr{position:relative;} .meldaQuizShow .btnCase .quesBtn a .ico_arr:after{content:''; display:block; position:absolute; right:-19px; top:50%; margin-top:1px; transform:translateY(-50%); width:9px; height:14px; background:url(/subscribe/images/dlb/melbang/event/ico_next_arrow.png) 0 0 no-repeat; background-size:100% 100%;} .meldaQuizShow .btnCase.on .quesBtn a .ico_arr:after{content:''; display:block; position:absolute; right:-19px; top:50%; margin-top:1px; transform:translateY(-50%); width:9px; height:14px; background:url(/subscribe/images/dlb/melbang/event/ico_next_on_arrow.png) 0 0 no-repeat; background-size:100% 100%;} /* 190917 : KJW : 멜다방 퀴즈쇼 스탬프 적립 팝업 */ .ly_meldaQuizShow .quizShow_info{width:100%; background:#fff;} .ly_meldaQuizShow .quizShow_info>ul>li{padding:50px 0 30px; text-align:center;} .ly_meldaQuizShow .quizShow_info>ul>li img{width:53.3%; text-align:center;} .ly_meldaQuizShow .quizShow_info>ul>li strong{display:block; font-size:18px; letter-spacing:-0.05em; font-weight:700; margin-top:20px;} .ly_meldaQuizShow .quizShow_info>ul>li strong span{color:#ff6665;} .ly_meldaQuizShow .quizShow_info+.btn_confirm{display:block; background:#ff6665; color:#fff; padding:15px 0; font-size:14px; font-weight:700; text-align:center;} .ly_meldaQuizShow .fireWorks{animation:quizShow_fire 1.2s ease; transform:scale(1);} @keyframes quizShow_fire{ 0%{transform:scale(0)} 24%{transform:scale(0)} 100%{transform:scale(1)} } /* 190926 : WYJ : 멜다방 10월 룰렛 이벤트 */ .roulette10_evt {margin:0 auto; max-width:720px;width:100%; overflow-x:hidden;} .roulette10_evt .melda_img_con{position:relative; font-size:0; line-height:0;} .roulette10_evt img[class*="roulette_con"]{position:absolute; left:50%; transform:translate(-50%);} .roulette10_evt .roulette_board{position:absolute; left:50%; top:39.6%; width:86.7%; transform:translate(-50%);} .roulette10_evt .roulette_con01{position:absolute; left:50%; transform:translate(-50%); top:43.6%; width:74.3%;} .roulette10_evt .roulette_con01 img{transform-origin:center center;} .roulette10_evt .roulette_con01.on img{transition:all 5s ease-out;} .roulette10_evt .roulette_con02{width:7.2%; top:37%;} .roulette10_evt img.roulette_con03{left:auto; right:0; width:25.3%; top:78.6%; transform:translate(0);} .roulette10_evt .btn_01{position:absolute; width:23.2%; left:50%; top:60%; transform:translate(-50%);} /* 191007 : WYJ 멜다방 이벤트 완료 팝업 */ .quiz_end_wrap {transform: translateY(-50%);} .quiz_end_wrap .btn {float:right;margin-right:-10px;} .quiz_end_wrap .quiz_end_img {} /* 191021 : WYJ : 멜다방 10월 룰렛 이벤트 */ .roulette11_evt {margin:0 auto; max-width:720px;width:100%; overflow-x:hidden;} .roulette11_evt .melda_img_con{position:relative; font-size:0; line-height:0;} .roulette11_evt img[class*="roulette_con"]{position:absolute; left:50%; transform:translate(-50%);} .roulette11_evt .roulette_board{position:absolute; left:50%; top:39%; width:86.7%; transform:translate(-50%);} .roulette11_evt .roulette_con01{position:absolute; left:50%; transform:translate(-50%); top:42.9%; width:74.7%;} .roulette11_evt .roulette_con01 img{transform-origin:center center;z-index:1;} .roulette11_evt .roulette_con01.on img{transition:all 5s ease-out;} .roulette11_evt img.roulette_con02{width:7.2%; top:37%; -webkit-transform:translate(-50%) translate3d(0,0,0);} .roulette11_evt img.roulette_con03{left:4.4%; width:13.2%; top:80%; transform:translate(0);} .roulette11_evt .btn_01{position:absolute; width:23.2%; left:50%; top:60%; transform:translate(-50%);} /* 200206 : KJW : 멜다방 20년 2월 룰렛 이벤트 */ .roulette2002_evt {margin:0 auto; max-width:720px;width:100%; overflow-x:hidden;} .roulette2002_evt .melda_img_con {position:relative; font-size:0; line-height:0;} .roulette2002_evt img[class*="roulette_con"] {position:absolute; left:50%; transform:translate(-50%);} .roulette2002_evt .roulette_board {position:absolute; left:50%; top:39%; width:86.7%; transform:translate(-50%);} .roulette2002_evt .roulette_con01 {position:absolute; left:50%; transform:translate(-50%); top:42.9%; width:74.7%;} .roulette2002_evt .roulette_con01 img {transform-origin:center center;z-index:1;} .roulette2002_evt .roulette_con01.on img {transition:all 5s ease-out;} .roulette2002_evt img.roulette_con02 {width:7.2%; top:37%; -webkit-transform:translate(-50%) translate3d(0,0,0);} .roulette2002_evt img.roulette_con03 {left:4.4%; width:13.2%; top:80%; transform:translate(0);} .roulette2002_evt .btn_01 {position:absolute; width:23.2%; left:50%; top:60%; transform:translate(-50%);} .roulette2002_evt .mel_exp_con dd ul li {text-indent:-16px;} /* 멜다방 20년 2월 룰렛 이벤트 팝업 */ .rouletteBox_wrap20 .rouletteBox_info{width:100%; background:#fff;} .rouletteBox_wrap20 .rouletteBox_info ul li{padding:35px 0 30px; text-align:center;} .rouletteBox_wrap20 .rouletteBox_info ul li img{} .rouletteBox_wrap20 .rouletteBox_info ul li strong{display:block; text-align:center; font-size:18px; letter-spacing:-0.05em; font-weight:700; margin-bottom:10px;} .rouletteBox_wrap20 .rouletteBox_info ul li p{font-size:14px; letter-spacing:-0.025em;} .rouletteBox_wrap20 .rouletteBox_info+.btn_confirm{display:block; background:#ff6665; color:#fff; padding:15px 0; font-size:14px; font-weight:700; text-align:center;} .rouletteBox_wrap20 .fireWorks{animation:rouletteBox_fire20 1.2s ease; transform:scale(1);} @keyframes rouletteBox_fire20{ 0%{transform:scale(0)} 24%{transform:scale(0)} 100%{transform:scale(1)} } /* 191111 : WYJ : 이벤트 퀴즈쇼 */ .quiz_total .event_wrap {padding:15px 20px 20PX;} .quiz_total .logo img {display:block; height:15px;} .quiz_total .event_info {width:240px;margin:8px auto 0;} .quiz_total .event_info li {position:relative;display:flex;line-height:1.4;color:#fff;font-size:11px;} .quiz_total .event_info .txt {margin:0 0 0 6px; } .quiz_total .event_info .date {margin-left: 15px;} .quiz_total .event_info li:before{position:absolute;content:'';display:block;left:0;top:7px;width:2px;height:2px;background:url("/subscribe/images/event/quiz_show/icon_dot_white.png") no-repeat 0 0;background-size:100%;} /* 건강 */ .quiz_total.quiz_health {background:#f7f7f7 url("/subscribe/images/event/quiz_show/bg_health.png") no-repeat 0 0;background-size:100% 398px;} .quiz_total.quiz_health .la_tit {display:block;width:276px;height:140px;margin:11px auto 0;background:url("/subscribe/images/event/quiz_show/tit_health.png") no-repeat 0 0;background-size:276px 140px;} .quiz_total.quiz_health .mi_tit {display:block;width:210px;height:37px;margin:10px auto 0;background:url("/subscribe/images/event/quiz_show/stit_health.png") no-repeat 0 0;background-size:210px 37px;} .quiz_total.quiz_health .sense {display:block;width:320px;height:63px;margin:54px auto 0;background:url("/subscribe/images/event/quiz_show/img_peo_helath.png") no-repeat 0 0;background-size:320px 63px;} .quiz_total.quiz_health .quiz_try {display:block;width:332px;height:169px;margin:0 auto 10px;background:url("/subscribe/images/event/quiz_show/btn_health.png") no-repeat 0 0;background-size:332px 169px;} /* 보험 */ .quiz_total.quiz_insur {background:#f7f7f7 url("/subscribe/images/event/quiz_show/bg_insur.png") no-repeat 0 0;background-size:100% 398px;} .quiz_total.quiz_insur .la_tit {display:block;width:276px;height:140px;margin:11px auto 0;background:url("/subscribe/images/event/quiz_show/tit_insur.png") no-repeat 0 0;background-size:276px 140px;} .quiz_total.quiz_insur .mi_tit {display:block;width:210px;height:37px;margin:10px auto 0;background:url("/subscribe/images/event/quiz_show/stit_insur.png") no-repeat 0 0;background-size:210px 37px;} .quiz_total.quiz_insur .sense {display:block;width:320px;height:60px;margin:54px auto 0;background:url("/subscribe/images/event/quiz_show/img_peo_insur.png") no-repeat 0 0;background-size:320px 60px;} .quiz_total.quiz_insur .quiz_try {display:block;width:332px;height:169px;margin:0 auto 10px;background:url("/subscribe/images/event/quiz_show/btn_insur.png") no-repeat 0 0;background-size:332px 169px;} /* 메리츠 */ .quiz_total.quiz_meritz {background:#f7f7f7 url("/subscribe/images/event/quiz_show/bg_meritz.png") no-repeat 0 0;background-size:100% 398px;} .quiz_total.quiz_meritz .la_tit {display:block;width:231px;height:126px;margin:15px auto 0;background:url("/subscribe/images/event/quiz_show/tit_meritz.png") no-repeat 0 0;background-size:231px 126px;} .quiz_total.quiz_meritz .mi_tit {display:block;width:auto;height:57px;margin:6px auto 0;background:url("/subscribe/images/event/quiz_show/stit_meritz.png") no-repeat center center;background-size:contain;} .quiz_total.quiz_meritz .sense {display:block;width:320px;height:67px;margin:54px auto 0;background:url("/subscribe/images/event/quiz_show/img_peo_meritz.png") no-repeat 0 0;background-size:320px 67px;} .quiz_total.quiz_meritz .quiz_try {display:block;width:332px;height:173px;margin:0 auto 10px;background:url("/subscribe/images/event/quiz_show/btn_meritz.png") no-repeat 0 0;background-size:332px 173px;} /* 운전 */ .quiz_total.quiz_drive {background:#f7f7f7 url("/subscribe/images/event/quiz_show/bg_drive.png") no-repeat 0 0;background-size:100% 398px;} .quiz_total.quiz_drive .la_tit {display:block;width:280px;height:140px;margin:11px auto 0;background:url("/subscribe/images/event/quiz_show/tit_drive.png") no-repeat 0 0;background-size:280px 140px;} .quiz_total.quiz_drive .mi_tit {display:block;width:210px;height:37px;margin:10px auto 0;background:url("/subscribe/images/event/quiz_show/stit_drive.png") no-repeat 0 0;background-size:210px 37px;} .quiz_total.quiz_drive .sense {display:block;width:320px;height:64px;margin:54px auto 0;background:url("/subscribe/images/event/quiz_show/img_peo_drive.png") no-repeat 0 0;background-size:320px 64px;} .quiz_total.quiz_drive .quiz_try {display:block;width:332px;height:169px;margin:0 auto 10px;background:url("/subscribe/images/event/quiz_show/btn_drive.png") no-repeat 0 0;background-size:332px 169px;} /* 치아 */ .quiz_total.quiz_dental {background:#f7f7f7 url("/subscribe/images/event/quiz_show/bg_dental.png") no-repeat 0 0;background-size:100% 398px;} .quiz_total.quiz_dental .la_tit {display:block;width:280px;height:140px;margin:11px auto 0;background:url("/subscribe/images/event/quiz_show/tit_dental.png") no-repeat 0 0;background-size:280px 140px;} .quiz_total.quiz_dental .mi_tit {display:block;width:210px;height:37px;margin:10px auto 0;background:url("/subscribe/images/event/quiz_show/stit_dental.png") no-repeat 0 0;background-size:210px 37px;} .quiz_total.quiz_dental .sense {display:block;width:320px;height:58px;margin:54px auto 0;background:url("/subscribe/images/event/quiz_show/img_peo_dental.png") no-repeat 0 0;background-size:320px 58px;} .quiz_total.quiz_dental .quiz_try {display:block;width:332px;height:169px;margin:0 auto 10px;background:url("/subscribe/images/event/quiz_show/btn_dental.png") no-repeat 0 0;background-size:332px 169px;} /* 퀴즈 */ .quiz_total .quiz_wrap {position:relative;margin-bottom:35px;border:3px solid #000;border-radius:20px;background:#fff;} .quiz_total .quiz_top {padding:30px 18px 18px;border-top-left-radius:16px;border-top-right-radius:16px;} .quiz_total .quiz_num {position:absolute;top:10px;right:13px;color:#000;font-size:13px;} .quiz_total.quiz_health .quiz_top {background-color:#e1e4f6;} .quiz_total.quiz_health .quiz_num em {color:#4c61cb;} .quiz_total.quiz_insur .quiz_top {background-color:#d9eef7;} .quiz_total.quiz_insur .quiz_num em {color:#1d99cd;} .quiz_total.quiz_meritz .quiz_top {background-color:#f6e1e1;} .quiz_total.quiz_meritz .quiz_num em {color:#cb4c4c;} .quiz_total.quiz_drive .quiz_top {background-color:#d7ede0;} .quiz_total.quiz_drive .quiz_num em {color:#14934a;} .quiz_total.quiz_dental .quiz_top {background-color:#e7e1f6;} .quiz_total.quiz_dental .quiz_num em {color:#734ccb;} .quiz_total .quiz_top .ques {overflow:hidden;} .quiz_top .ques span {float:left;margin-right:3px;color:#000;font-size:20px;font-weight:bold;} .quiz_top .ques .ty01 {width:20px} .quiz_top .ques .ty02 {width:80%;} .quiz_top .indu_info {margin-top:-10px;text-align:center;color:#000;font-weight:bold;} .quiz_top .quiz_ones {overflow:hidden;max-width:292px;margin:8px 0 0 -5px;text-align:left;} .quiz_top .quiz_ones li {float:left;width:62px;height:59px;margin:7px 0 0 7px;text-align:center;line-height:59px;color:#000;border-radius:10px;border:2px solid #000;font-size:30px;font-weight:bold;} .quiz_total .quiz_mid {margin:25px 0;} .quiz_total .quiz_mid.private {margin:25px 17px;} .quiz_total .quiz_mid.right {text-align:center;} .quiz_total .quiz_mid.right li {display:inline-block;margin-left:16px;} .quiz_total .quiz_mid.right li:first-child {display:inline-block;margin-left:0;} .quiz_total .quiz_mid.right li a {display:block;width:130px;height:120px;background:url("/subscribe/images/event/quiz_show/img_x.png") no-repeat 0 0;background-size:130px 120px;} .quiz_total .quiz_mid.right li:first-child a {background:url("/subscribe/images/event/quiz_show/img_o.png") no-repeat 0 0;background-size:130px 120px;} .quiz_total.quiz_health .quiz_mid.right li.on a {background:url("/subscribe/images/event/quiz_show/health_on_x.png") no-repeat 0 0;background-size:130px 120px;} .quiz_total.quiz_health .quiz_mid.right li.on:first-child a {background:url("/subscribe/images/event/quiz_show/health_on_o.png") no-repeat 0 0;background-size:130px 120px;} .quiz_total.quiz_insur .quiz_mid.right li.on a {background:url("/subscribe/images/event/quiz_show/insur_on_x.png") no-repeat 0 0;background-size:130px 120px;} .quiz_total.quiz_insur .quiz_mid.right li.on:first-child a {background:url("/subscribe/images/event/quiz_show/insur_on_o.png") no-repeat 0 0;background-size:130px 120px;} .quiz_total.quiz_meritz .quiz_mid.right li.on a {background:url("/subscribe/images/event/quiz_show/meritz_on_x.png") no-repeat 0 0;background-size:130px 120px;} .quiz_total.quiz_meritz .quiz_mid.right li.on:first-child a {background:url("/subscribe/images/event/quiz_show/meritz_on_o.png") no-repeat 0 0;background-size:130px 120px;} .quiz_total.quiz_drive .quiz_mid.right li.on a {background:url("/subscribe/images/event/quiz_show/drive_on_x.png") no-repeat 0 0;background-size:130px 120px;} .quiz_total.quiz_drive .quiz_mid.right li.on:first-child a {background:url("/subscribe/images/event/quiz_show/drive_on_o.png") no-repeat 0 0;background-size:130px 120px;} .quiz_total.quiz_dental .quiz_mid.right li.on a {background:url("/subscribe/images/event/quiz_show/dental_on_x.png") no-repeat 0 0;background-size:130px 120px;} .quiz_total.quiz_dental .quiz_mid.right li.on:first-child a {background:url("/subscribe/images/event/quiz_show/dental_on_o.png") no-repeat 0 0;background-size:130px 120px;} .quiz_total .quiz_mid.multi {margin:25px 17px;} .quiz_total .quiz_mid.multi li {margin-top:15px;text-align:center;border:2px solid #bfbfbf;border-radius:5px;} .quiz_total .quiz_mid.multi li:first-child {margin-top:0;} .quiz_total .quiz_mid.multi li a {display:block;width:100%;height:42px;line-height:42px;color:#000;font-size:21px;font-weight:bold} .quiz_total .quiz_mid.multi li.on {border-color:#000;} .quiz_total .quiz_mid.multi li.on a {color:#fff;} .quiz_total.quiz_health .quiz_mid.multi li.on a {background:#4c61cb;} .quiz_total.quiz_insur .quiz_mid.multi li.on a {background:#1d99cd;} .quiz_total.quiz_meritz .quiz_mid.multi li.on a {background:#cb4c4c;} .quiz_total.quiz_drive .quiz_mid.multi li.on a {background:#14934a;} .quiz_total.quiz_dental .quiz_mid.multi li.on a {background:#734ccb;} .quiz_total .quiz_mid.single {margin:25px 17px;} .quiz_total .quiz_mid.single li {width:100%;} .quiz_total .quiz_mid.single input {width:calc(100% - 10px);padding-left:5px;border:2px solid #bfbfbf;font-size:19px;font-weight:bold;border-radius:5px;line-height:44px;} .quiz_total .quiz_mid.single input::placeholder {color:#a9a9a9;} .quiz_total .quiz_mid.single input:focus {border-color:#000;color:#000;outline:none;} .quiz_total .quiz_mid .bx_valid .group {display:flex;flex-direction:row;margin:0 0 20px;} .quiz_total .quiz_mid .bx_valid .group label, .quiz_total .quiz_mid .bx_valid .group .tit_label {display:flex;width:74px;text-align:left;line-height:25px; font-size:14px;color:#000;} .quiz_total .quiz_mid .bx_valid .group .tit_label {width:73px;} .quiz_total .quiz_mid .bx_valid .group input {display:flex;width:100%;height:32px;line-height:32px;box-sizing:border-box;padding:4px 3px 6px 12px; border:1.5px solid #ccc;font-size:14px;} .quiz_total .quiz_mid .bx_valid .group input:focus {border-color:#000;color:#000;} .quiz_total .quiz_mid .bx_valid .chk_wrap {display:flex;width:100%;} .quiz_total .quiz_mid .bx_valid .group button {width:calc(100% - 3px);padding:4px 0 5px;border:2px solid #ccc;color:#a9a9a9;min-width: auto;background:transparent;outline:none;} .quiz_total .quiz_mid .bx_valid .group button:first-child {margin-right:7px;} .quiz_total .quiz_mid .bx_valid .group button:last-child {margin-left: 0;} .quiz_total .quiz_mid.private button.on {color:#fff;border-color:#000;} .quiz_total.quiz_health .quiz_mid.private button.on {background:#4c61cb;} .quiz_total.quiz_insur .quiz_mid.private button.on {background:#1d99cd;} .quiz_total.quiz_meritz .quiz_mid.private button.on {background:#cb4c4c;} .quiz_total.quiz_drive .quiz_mid.private button.on {background:#14934a;} .quiz_total.quiz_dental .quiz_mid.private button.on {background:#734ccb;} .quiz_total .quiz_btm {text-align:center;border-top:3px solid #000;} .quiz_total .quiz_btm a {display:block;width:100%;height:40px;line-height:40px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background:#d5d5d5;} .quiz_total .quiz_btm a em {display:inline-block;width:47px;height:15px;vertical-align:middle; background:url("/subscribe/images/event/quiz_show/txt_next.png") no-repeat 0 0; background-size:47px 15px;} .quiz_total .quiz_btm a.on {display:block;width:100%;height:40px;line-height:40px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background:#000;} .quiz_total .quiz_btm a.on em {display:inline-block;width:47px;height:15px;vertical-align:middle;background: url("/subscribe/images/event/quiz_show/txt_on_next.png") no-repeat 0 0; background-size:47px 15px;} .quiz_total .quiz_btm a.event em {display:inline-block;width:125px;height:16px;background:url("/subscribe/images/event/quiz_show/txt_event.png") no-repeat 0 0;background-size:125px 16px;} .quiz_total .quiz_btm a.on.event em {display:inline-block;width:230px;height:34px;background:url("/subscribe/images/event/quiz_show/txt_kakao_event.png") no-repeat 0 0;background-size:230px 34px;} /* 하단 */ .note {margin:23px 15px 25px;} .note .txt {color:#333;font-size:14px;font-weight:bold;} .note .list {margin-top:3px;} .note .list li {position:relative;padding-left:8px;line-height:1.4;color:#666;font-size:12px;} .note .list li:before{position:absolute;content:'';display:block;left:0;top:7px;width:2px;height:2px;background:url("/subscribe/images/event/quiz_show/icon_dot_black.png") no-repeat 0 0;background-size:100%;} /* 퀴즈 레이어팝업 */ .layer_wrap.quizcomp .layer_content .layer_info.quiz {border-radius:0;} .layer_wrap.quizcomp.ty02 {position:fixed;top:50% !important;-webkit-transform:translate(0, -50%);transform:translate(0, -50%)} .layer_wrap.quizcomp.ty02 .layer_content {padding:0 30px;} .layer_wrap.quizcomp .layer_content .quiz_result {width:100%;padding:35px 0;text-align:center;} .layer_wrap.quizcomp .layer_content .quiz_result img {margin-bottom:15px} .layer_wrap.quizcomp .layer_content .quiz_result p {font-size:28px;} .layer_wrap.quizcomp .layer_content .quiz_result .info01 {color:#1730b0;font-size:28px;} .layer_wrap.quizcomp .layer_content .quiz_result .info02 {color:#de0010;font-size:28px;} .layer_wrap.quizcomp .layer_content .quiz_result .info03 {color:#333;font-size:14px;} .layer_wrap.quizshow .layer_content .layer_info.quiz_total {max-height:480px;} /* 퀴즈 footer 수정 */ .renew_type_f #footer { margin-bottom:initial; padding:0; background-color:transparent; font-family:"Pretendard", "Helvetica,sans-serif";} .renew_type_f #footer .foot_inner { padding:24px 18px 33px; background:#f5f5f5; } .renew_type_f #footer .foot_callcenter { display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; } .renew_type_f #footer .foot_callcenter .foot_callcenter_item { flex:1; } .renew_type_f #footer .foot_callcenter .foot_callcenter_item + .foot_callcenter_item { margin-left:10px; } .renew_type_f #footer .foot_callcenter .foot_callcenter_item a { display:block; padding:14px 10px; font-size:14px; color:#111; font-weight:500; text-align:center; white-space:nowrap; background:#fff; border:1px solid #bbb; border-radius:6px; } .renew_type_f #footer .foot_callcenter .foot_callcenter_item a > em { position:relative; display:inline-block; padding-right:18px; font-size:inherit; color:inherit; font-weight:inherit; } .renew_type_f #footer .foot_callcenter .foot_callcenter_item a > em:after { position:absolute; right:0; top:50%; display:inline-block; width:11px; height:14px; background:url("/subscribe/images/renew/ico_foot_call.svg") no-repeat center center; background-size:contain; transform:translateY(-53%); content:""; } .renew_type_f #footer .foot_callcenter + .f_menu { margin-top:16px; } .renew_type_f #footer .kwa_mark { display:block; width:33px; margin:12px 0 0 auto; } .renew_type_f #footer .f_menu { display:flex; flex-flow:row nowrap; justify-content:stretch; align-items:center; gap:16px; margin:0; } .renew_type_f #footer .f_menu:before, .renew_type_f #footer .f_menu:after { display:none; } .renew_type_f #footer .f_menu li { position:relative; flex:0; float:none; margin:0; padding:0; background:none; } .renew_type_f #footer .f_menu li:before { position:absolute; right:-10px; top:50%; width:1px; height:10px; background:#999; transform:translateY(-50%); content:""; } .renew_type_f #footer .f_menu li:nth-last-of-type(1):before { display:none; } .renew_type_f #footer .f_menu li a { display:block; padding-bottom:8px; color:#888; font-size:12px; font-weight:500; text-align:center; white-space:nowrap; } .renew_type_f #footer .f_menu li:nth-of-type(1) a { color:#333; font-weight:700; } .renew_type_f #footer address p { font-size:13px; color:#999; line-height:1.5; } .renew_type_f #footer address p span { display:inline; margin-left:10px; } .renew_type_f #footer address p span:before { display:inline-block; width:1px; height:8px; margin-right:10px; background:#999; content:""; } .renew_type_f #footer address .copyright { font-size:11px; } #pop_wrap.new_agr_confirm #pop_agree h1 { font-family: 'Pretendard', Helvetica,sans-serif !important; font-weight: 500; color: #111;} #pop_wrap.new_agr_confirm .gurt21_renew .btn_total_agree { display: flex; align-items: center;} #pop_wrap.new_agr_confirm .gurt21_renew .ico_gurt_check { width: 24px; height: 24px; margin: 0 8px 0 16px; background: url(/subscribe/images/renew/ico_checkbox_n.png) no-repeat !important; background-position: 0 0; background-size: 24px 48px !important;} #pop_wrap.new_agr_confirm .gurt21_renew .btn_total_agree.on .ico_gurt_check { background-position-y: -24px !important;} #pop_wrap.new_agr_confirm .gurt21_renew .btn_total_agree .txt { font-size: 16px;} #pop_wrap.new_agr_confirm .gurt21_renew .total_agree_sub_info { padding-bottom: 0; font-size: 12px; color: #767676;} #pop_wrap.new_agr_confirm .gurt21_renew .btn_total_agree { border-color: #de4738; border-radius: 6px;} #pop_wrap.new_agr_confirm .agree_total_cont .total_agree_grade_title { padding: 0; font-size: 14px; color: #767676;} #pop_wrap.new_agr_confirm .info04ver { margin-top: 7px;} #pop_wrap.new_agr_confirm .input_radio input[type=radio]+label em { left: 5px;} #pop_wrap.new_agr_confirm .chk_wrap>span:first-child { margin-right: 20px;} #pop_wrap.new_agr_confirm .my_certification_wrap.agree_total .my_certification a.on { border-color: #111;} #pop_wrap.new_agr_confirm .txtarea { background-color: #f5f5f5;} #pop_wrap.new_agr_confirm .txtarea.no_scroll {height:auto; overflow-y: inherit;} #pop_wrap.new_agr_confirm .gurt_agree_box .top_notice { color: #656565; line-height: 16px;} #pop_wrap.new_agr_confirm .btn_area { margin: 24px 0;} #pop_wrap.new_agr_confirm .btn_area .btns.insur_fee_chk_btn { display: flex; align-items: center; justify-content: center; height: 52px; background-color: #ccc; border-radius: 6px;} #pop_wrap.new_agr_confirm .btn_area .btns.insur_fee_chk_btn span { font-size: 16px;} #pop_wrap.new_agr_confirm .btn_area .btns.passing { background-color: #de4738;} #pop_wrap.new_agr_confirm .new_cont .bx_valid .txt_error { font-weight: 400;} #pop_wrap.new_agr_confirm .total_agree_grade_box { display: flex; align-items: center;} #pop_wrap.new_agr_confirm .total_agree_grade .total_agree_grade_txt.btn_blue {background-color:#28c4f9;} #pop_wrap.new_agr_confirm .total_agree_grade .total_agree_grade_tooltip.right_tooltip2 {right:-58px;} #pop_wrap.new_agr_confirm .total_agree_grade .total_agree_grade_tooltip.right_tooltip2:before, #pop_wrap.new_agr_confirm .total_agree_grade .total_agree_grade_tooltip.right_tooltip2:after {right:64px;} #pop_wrap.new_agr_confirm.font_renew .gurt21_renew, #pop_wrap.new_agr_confirm.font_renew .gurt21_renew label { font-family: 'Pretendard', Helvetica,sans-serif !important; } #layerAreaWrap #pop_wrap .overfleowYscroll { overflow-x: hidden; overflow-y: auto; height: 245px;} /* 푸터 레이어 팝업 */ #pop_wrap.tm_evt_pop_renew { position:fixed; bottom:0; font-family: 'Pretendard', Helvetica,sans-serif !important; } #pop_wrap.tm_evt_pop_renew #pop_header { height:64px; min-height:64px; padding:0; text-align:left; background-color:#fff; } #pop_wrap.tm_evt_pop_renew #pop_header h1 { position:absolute; left:18px; top:50%; font-family:"Pretendard", "Helvetica,sans-serif"; font-size:20px; color:#111; font-weight:700; transform:translateY(-50%); } #pop_wrap.tm_evt_pop_renew #pop_content { margin-top:64px; overflow-y:auto; } #pop_wrap.tm_evt_pop_renew #pop_content .terms_wrap { margin:0; } #pop_wrap.tm_evt_pop_renew #pop_content .terms_wrap + .terms_wrap { margin-top:20px; } #pop_wrap.tm_evt_pop_renew #pop_content .pop_content_inner { padding-bottom:70px; } #pop_wrap.tm_evt_pop_renew .pop_close { top:30px; width:40px; height:40px; transform:translateY(-50%); z-index:100; padding: 12px 8px; right:8px; box-sizing: border-box;} #pop_wrap.tm_evt_pop_renew .pop_close:before, .tm_evt_pop_renew .pop_close:after { position:absolute; left:50%; top:50%; background:#111; content:""; } #pop_wrap.tm_evt_pop_renew .pop_close:before { width:1px; height:50%; transform:translate(-50%, -50%) rotate(45deg); } #pop_wrap.tm_evt_pop_renew .pop_close:after { width:50%; height:1px; transform:translate(-50%, -50%) rotate(45deg); } #pop_wrap.tm_evt_pop_renew .pop_close span { width:1px; height:1px; text-overflow:ellipsis; font-size: 1px; clip:rect(1px, 1px, 1px, 1px); overflow:hidden; color: transparent; background: none;} /*============================ 푸터 약관 ============================*/ #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont h3.tit {font-family: 'Pretendard', Helvetica, sans-serif; font-size:16px; color:#111; line-height:1.4; padding:0; margin:24px 0 8px 0; background:none;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont h4.sub_tit, #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_wrap > dl.type01 > dd span.tit {font-size:14px; color:#111; margin:8px 0;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont h4.sub_tit::before {width:0; height:0; margin:0; background:none; content:"";} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .info_txt, #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont p {line-height:1.4; color:#656565;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .color_blk {color:#111;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont a.underline {color:#656565; text-decoration:underline;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list * {color:#656565; line-height:1.4;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list.txt_indt li {text-indent:-13px; padding-left:13px;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list.txt_indt li > p {text-indent:-10px; margin-left:11px;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list li ~ li {margin-top:12px;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont li > .inner_indt {margin:8px 0 0 1px; text-indent:1px;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list ol > li {margin-top:12px;} /* 수정할수도있음 */ #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list ol > li > ol li {margin-top:5px;} /* 수정할수도있음 */ #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list.txt_indt li > ol > li > ol > li {padding-left:20px; text-indent:-20px;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list li .tbl_tit {display:block; color:#111; font-size:14px; margin:8px 0;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list li table {width:100%; margin-bottom:24px; border-top:1px solid #111; border-bottom:1px solid #111;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list li table th {padding:16px 10px 16px 0; border-bottom:1px solid #ddd; color:#111;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list li table td {padding:16px 0; border-bottom:1px solid #ddd; color:#767676;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list li table td .small_tit {color:#333;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list li table tr:last-child th, #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list li table tr:last-child td {border-bottom:1px solid #111;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list li table div ~ div {margin-top:4px;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list li table div.txt_indt {text-indent:-8px; margin-left:10px;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list li table div, #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list li table div > p {color:#767676;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list li table div > p {margin-left:12px;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list li table div > p ~ p {margin-left:12px;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list li a {color:#0066cc; word-break:break-all;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list li table .tbl_list p {text-indent:-10px; margin-left:12px; color:#767676;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .terms_list li ul {margin-top:4px;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .ft_13 {font-size:13px;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .txt_wrap {margin-top:12px;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .txt_wrap p {text-indent:-10px; margin-left:10px; color:#656565;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .txt_wrap p ~ p {margin-top:4px;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .info_wrap {margin-top:8px;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .info_num {margin-top:24px;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .info_wrap .info_tit {color:#333; font-weight:500;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .info_wrap.type02 {padding-left:12px;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .info_wrap p.none {margin-left:0; text-indent:0;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .info_wrap p ~ p {margin-left:11px; text-indent:-10px;} #pop_wrap.tm_evt_pop_renew #pop_content .footer_cont .info_wrap a {color:#0066cc;} /* 20220526: DJM 퀴즈 카카오톡 개인정보처리동의 */ #pop_wrap #pop_header.quiz_pop {position: fixed;padding: 12px 0 13px;} #pop_wrap #pop_header.quiz_pop .title{font-size: 15px; text-align: left; margin-left: 4%; color: #ffffff; font-weight: 700;} #pop_wrap #pop_content .pop_content_inner .quiz_notice{font-size: 14px; } #pop_wrap #pop_content .pop_content_inner .quiz_agrwrap .quiz_agrchk {position: relative;} #pop_wrap #pop_content .pop_content_inner .quiz_agrwrap .quiz_agrchk .txt {font-size: 13px; font-weight: bold; display:inline-block;} #pop_wrap #pop_content .pop_content_inner .quiz_agrwrap .quiz_cont {color: #666;font-size: 12px;font-weight: 700;} #pop_wrap #pop_content .pop_content_inner .quiz_agrwrap .quiz_cont .underline_txt {font-size: 13px; text-decoration: underline;} #pop_wrap #pop_content .pop_content_inner .quiz_agrwrap .quiz_dot.mid{background-position-y: 6px;} #pop_wrap #pop_content .pop_content_inner .quiz_agrwrap .quiz_dot{padding-left:7px;background:url(/subscribe/images/common/bu_dot_gray666.gif) left 4px no-repeat;background-size:3px 3px;font-size: 12px; } #pop_wrap #pop_content .pop_content_inner .quiz_agrwrap .quiz_dash {margin:0 0 0 8px; padding-left:7px; background:url(/subscribe/images/common/bu_dash_gray.gif) left 7px no-repeat; background-size:3px 1px; } #pop_wrap #pop_content .pop_content_inner .quiz_agrwrap .quiz_star {margin:0 0 0 8px;padding-left:9px;background:url(/subscribe/images/common/bu_star.gif) left 6px no-repeat;background-size:5px 5px} #pop_wrap #pop_content .pop_content_inner .quiz_agrwrap .quiz_cont ul li {margin-bottom: 3px;} #pop_wrap #pop_content .pop_content_inner .quiz_agrwrap .quiz_cont ul li p {margin-left: 7px;} #pop_wrap #pop_content .pop_content_inner.quiz_req {padding: 17px 15px 30px;} #pop_wrap #pop_content .pop_content_inner.quiz_req .quiz_agrwrap .quiz_cont{height: 170px;} /* 20220530 : DJM 퀴즈 참여완료 페이지추가 */ .quiz_complete {position: relative; height: 100vh;background-color: #eff0f7;} .quiz_complete .quiz_top {position: relative; text-align: center; background-color: #ffffff;} .quiz_complete .quiz_complete_close {position: absolute; right: 4%; top: 11%; width: 13px; cursor: pointer; outline: none;} .quiz_complete .quiz_product_list {position: relative; padding: 0 20px 30px;} .quiz_complete .quiz_product_list .list_top {position: relative; padding-top: 15px;} .quiz_complete .quiz_product_list .list_top p{ font-size: 20px; color: #000000; } .quiz_complete .quiz_product_list .list_conts {padding-top: 10px;} .quiz_complete .quiz_product_list .list_conts li { position: relative; margin-bottom: 12px; background-color: #ffffff; border-radius: 5px;box-shadow: 0px 3px 10px 0px rgba(0,0,0, 0.1);} .quiz_complete .quiz_product_list .list_conts li button{text-align: left; width: 100%; outline: solid 0; cursor: pointer; border: 0;} .quiz_complete .quiz_product_list .list_conts li:first-child:after {content: ""; position: absolute; top: -60px; right: 0; width: 93px; height: 60px; background: url(/subscribe/images/event/quiz_complete/quiz_complete_chr.png);background-size: cover; background-repeat: no-repeat; } .quiz_complete .quiz_product_list .list_conts .list_item{display: flex; padding:18px 20px; justify-content: space-around; align-items: center;} .quiz_complete .quiz_product_list .list_conts .list_item div:last-child {min-width: 190px; letter-spacing: -1px; margin-left: 10px;} .quiz_complete .quiz_product_list .list_conts .list_item .list_img{width: 80px; height: 80px;} .quiz_complete .quiz_product_list .list_conts .list_item dt {font-size: 16px; color: #222222; font-weight: 700;} .quiz_complete .quiz_product_list .list_conts .list_item dd {font-size: 14px; color: #666666; margin-top: 3px; } .quiz_complete .quiz_product_list .list_conts .list_item dd:last-child {color: #0096af; height: 18px; font-weight: 700;} .quiz_complete .quiz_product_list .list_conts .list_item dd .more {display: inline-block;content: "";width: 6px;height: 9px;font-size: 0;line-height: 0;vertical-align: middle;margin: -3px 0 0 5px; background: url(/subscribe/images/event/quiz_complete/quiz_complete_more.png) no-repeat 0 0; background-size: 100%;} /* 20220629: DJM 퀴즈 팝업 추가 */ .layer_wrap .quiz_confirm {padding: 0 5.6%;} .layer_wrap .quiz_confirm .btn_box {position:absolute; bottom: 15%; width: 90%; height: 20%; box-sizing: border-box;} .layer_wrap .quiz_confirm .btn_box button {height: 100%; outline: solid 0; cursor: pointer; border: 0; text-indent: -9999px;} .layer_wrap .quiz_confirm .btn_box button:first-child {width: 25%; margin-left: 6%;} .layer_wrap .quiz_confirm .btn_box button:last-child {width: 60%; margin-left: 2%;} /* 191128 : WYJ : 멜다방 럭키박스 이벤트 */ .cafe_luckybox_event .luckyBox {position: relative;} .cafe_luckybox_event .luckyBox .peo {position: absolute;left:3.8%;top:65.6%;z-index:1;width:68.9%;height:28.7%;z-index:10;} .cafe_luckybox_event .luckyBox .boxWrap {position: absolute;left:25%;top:48%;z-index:2;width: 50%;height:50%} .cafe_luckybox_event .luckyBox .box_top {position: absolute;left:0%;top:0%;z-index:2;width: 100%;} .cafe_luckybox_event .luckyBox .box {position: absolute;left:2%;top:12%;z-index:1;width: 98%;} .cafe_luckybox_event .luckyBox .mark {position: absolute;left:47%;top:40%;z-index:1;width: 8%;height:8%} .cafe_luckybox_event .notice {margin:30px 0; padding:0 15px;} .cafe_luckybox_event .notice dt{font-family:"RixSGo B"; font-size:14px; line-height:22px; color:#333; margin-bottom:6px} .cafe_luckybox_event .notice dd{font-family:"RixSGo M"; font-size:8px; line-height:20px; color:#666} .cafe_luckybox_event .notice dd ul li{list-style-type:disc; list-style-position:inside; text-indent:-13px; padding-left:16px} .cafe_luckybox_event .notice dd ul li span {font-size:12px} .move { animation: boxMove 0.3s infinite; animation-direction : alternate; animation-delay : 0.5s } .moveTop { transform: rotate(-10deg) } @keyframes boxTopMove{ 0% {transform: rotate(0deg);} 100% {transform: rotate(45deg)} } @keyframes boxMove{ 0% {left:24%;} 25% {left:25%;} 50% {left:24%;} 75% {left:25%;} 100% {left:25%;} } /* 191216 : KSH : 멜다방 복주머니 이벤트 */ .cafe_luckybag_event .luckyBag {position: relative;} .cafe_luckybag_event .luckyBag .peo {position: absolute;left:5%;top:72%;z-index:1;width:90%;height:28.7%;z-index:10;} .cafe_luckybag_event .luckyBag .boxWrap {position: absolute;left:13%;top:43%;z-index:2;width: 75%;height:50%} .cafe_luckybag_event .luckyBag .boxWrap.move { animation: luckyBagMove 0.3s infinite; animation-direction : alternate; animation-delay : 0.5s } @keyframes luckyBagMove{ 0% {left:12%;} 25% {left:13%;} 50% {left:12%;} 75% {left:13%;} 100% {left:13%;} } .boxWrap .lucky_bag_fire{position: absolute;top: -40px;transform:scale(0);} .boxWrap.luckyBagFireWorks .lucky_bag_fire{animation:luckyBagfire 1.2s ease; transform:scale(1);} @keyframes luckyBagfire{ 0%{transform:scale(0)} 24%{transform:scale(0)} 100%{transform:scale(1)} } .boxWrap.luckyBagRotate{animation:luckyBagRotate 3s linear;} @keyframes luckyBagRotate{ 0%, 10%, 20%, 30%, 40%{left: 15.3%} 5%, 15%, 25%, 35%{left:12.7%} 42.5%{transform:rotate(10deg)} 45%, 50%, 55%, 60%, 65%, 70%, 75%, 80%, 85%, 90%{transform:rotate(25deg)} 47.5%, 52.5%, 57.5%, 62.5%, 67.5%, 72.5%, 77.5%, 82.5%, 87.5%{transform:rotate(-25deg)} 92.5%{transform:rotate(-15deg)} 95%{transform:rotate(15deg)} 97.5%{transform:rotate(-5deg)} 100%{transform:rotate(5deg)} } .cafe_luckybag_event .notice {margin:30px 0; padding:0 15px;} .cafe_luckybag_event .notice dt{font-family:"RixSGo B"; font-size:14px; line-height:22px; color:#333; margin-bottom:6px} .cafe_luckybag_event .notice dd{font-family:"RixSGo M"; font-size:8px; line-height:20px; color:#666} .cafe_luckybag_event .notice dd ul li{list-style-type:disc; list-style-position:inside; text-indent:-13px; padding-left:16px} .cafe_luckybag_event .notice dd ul li span {font-size:12px} /* 191226 : WYJ : 멜다방 로고 이벤트 */ .newyear {position:relative;min-height:400px;padding:40px 0 35px;background:#346b60 url("/subscribe/images/dlb/melbang/event/newyear/bg_newyear_01.png") no-repeat 0 0;background-size:100%;} .newyear .left_doll {position:absolute;width:20.8%;height:10.6%;left:6%;top:385px;z-index:5;} .newyear .right_doll {position:absolute;width:11.3%;height:10.2%;right:8%;top:385px;z-index:5;} .newyear .cont {margin:185px 25px 0;border-radius:10px;background:#fff;} .newyear .cont .result {display:block;margin-top:30px;} .newyear .cont .type03 .result {display:block;margin-top:0;} .newyear .type01 .info {margin:0 22px;padding-top:31px;} .newyear .type02 .info {margin:0 22px;padding-top:37px;} .newyear .type02 .btn_area {overflow:hidden;margin-top:30px;text-align:center;} .newyear .type02 .btn_area li {display:inline-block;width:40%;margin-left:20px;box-sizing:border-box;border:2px solid #e2e2e2;border-radius:6px;} .newyear .type02 .btn_area li.on {border-color:#de4949;} .newyear .type02 .btn_area li img {border-radius:6px;} .newyear .type02 .btn_area li:first-child {margin-left:0;} .newyear .type03 .info {padding-top:37px;} /* 200113 : KJW : 보장분석 결과 페이지 */ /* 공통 */ #gurt20_result {} #gurt20_result #footer {margin: 40px -4% 0; padding: 15px 0 60px 15px; background-color: #f4f4f4;} .gurt20_result_con {padding:0 4% 30px; background: #3c454e;} div[class^="gurt20_tab"] {position:relative; min-width:330px; margin:0 auto; left:2px; top:6px; background:#fff; box-shadow:3px 3px 7px #333;} .gurt20_result_con h3 {font-size:17px; color:#fff; font-weight:700; line-height:60px; text-align:center;} .gurt20_result_con h3 span {position:relative;} .gurt20_result_con h3 span:after {content:''; display:block; clear:both; position:absolute; left:50%; bottom:-4px; margin-left:-50%; width:100%; height:1px; background:#fff;} .gurt20_content {position:relative; left:-6px; top:-6px; box-sizing:border-box; background:#fff; box-shadow:3px 3px 7px #666;} .gurt20_content:before {content:''; display:block; clear:both; width:32px; height:45px; background:#fff url("/subscribe/images/dlb/gurtanly/bg_gurtAnly20_top_left.png") 10px 10px no-repeat; background-size:22px 17px;} .gurt20_content:after {content:''; display:block; clear:both; position:absolute; right:0; top:0; width:22px; height:42px; background: url("/subscribe/images/dlb/gurtanly/bg_gurtAnly20_top_right.png") 0 0 no-repeat; background-size:22px 42px;} .gurt20_content h4 {font-size:21px; font-weight:700; letter-spacing:-0.1em; padding:0 5px;} /* 탭메뉴 */ .gurt20_nav { position:fixed; left:0; bottom:0; z-index:100; width:100%; font-size:15px; background:#f5f5f5; box-shadow:0 -15px 15px rgba(100,100,100,0.1); display: flex; justify-content: space-between; } .gurt20_nav:after {content:''; display:block; clear:both;} .gurt20_nav li {flex: 1; position:relative; padding:0; height:60px; box-sizing:border-box;} .gurt20_nav li:after {content:''; position:absolute; display:block; left:0; top:50%; margin-top:-18px; width:1px; height:35px; background:#c7c7c7;} .gurt20_nav li.on:after, .gurt20_nav li.on + li:after {display:none;} .gurt20_nav li a {display:block; box-sizing:border-box; padding:0; line-height:60px; text-align:center; color:#333; font-weight:700;} .gurt20_nav li:first-child:after {display:none;} .gurt20_nav li.on {background:#ee3722;} .gurt20_nav li.on a {color:#fff;} .gurt20_nav .push_product span {position:relative;} .gurt20_nav .push_product span:before {content:''; display:block; position:absolute; right:-8px; top:-5px; width:5px; height:5px; background:#ee3722; border-radius:50%;} .gurt20_nav .push_product.on span:before {background:#fff;} /* 제목 색조정 */ .gurt20_tab01 .gurt20_content h4 > span {display:inline-block; height:32px; line-height:32px; border-bottom:solid 10px #ffc8c8; box-sizing:border-box;} .gurt20_tab03 .gurt20_content h4 > span {display:inline-block; height:32px; line-height:32px; border-bottom:solid 10px #b9f4ff; box-sizing:border-box;} .gurt20_tab04 .gurt20_content h4 > span span {display:inline-block; height:32px; line-height:32px; border-bottom:solid 10px #ffc8c8; box-sizing:border-box;} /* 보험진단 */ .insur_dia h4 {padding-left:5%;} .insur_dia_con {padding:0 5%;} .insur_dia .result_score {position:relative; margin:10px 0 20px;} .insur_dia .warranty_class {width:65%; margin:15px auto 10px; text-align:left;} .insur_dia .warranty_class li {padding-left:30px; background-position:0 center; background-size:19px 19px; background-repeat:no-repeat; margin:5px 0; font-size:15px; letter-spacing:-0.05em;} .insur_dia .warranty_class li:nth-of-type(1) {margin:0 0 5px;background-image:url("/subscribe/images/dlb/gurtanly/ico_enough_guarantee.png");} .insur_dia .warranty_class li:nth-of-type(2) {background-image:url("/subscribe/images/dlb/gurtanly/ico_dont_guarantee.png");} .insur_dia .warranty_class li:nth-of-type(3) {background-image:url("/subscribe/images/dlb/gurtanly/ico_overlap_guarantee.png");} .insur_dia .warranty_class li span {float:right;} .insur_dia .warranty_class li em {font-size:16px;} .insur_dia .warranty_class li:nth-of-type(2) em, .insur_dia .warranty_class li:nth-of-type(3) em {color:#ec4245;} .insur_dia .warranty_class+p {width:65%; margin:10px auto 0; font-size:13px; color:#888; text-align:right;} /* 6가지 위험 보장 현황 */ .insur_dia .risks_status {} .insur_dia .risks_status strong {display:block; line-height:40px; background:#49545f; font-size:16px; color:#fff; text-align:center; border-radius:9px 9px 0 0; font-weight:400;} .insur_dia .risks_status strong em {color:#fefdb8;} .insur_dia .risks_status ul {padding:25px 8%; margin:0 auto; border-radius:0 0 9px 9px; border-width:1px; border-style:solid; border-color:#49545f;} .insur_dia .risks_status ul > li {margin:15px 0; font-size:15px; color:#666;} .insur_dia .risks_status ul > li:first-child {margin:0 0 15px;} .insur_dia .risks_status ul > li:last-child {margin:15px 0 0} .insur_dia .risks_status ul > .lack {color:#ec4245;} .insur_dia .risks_status ul > li > dl {} .insur_dia .risks_status ul > li > dl:after {content:''; display:block; clear:both;} .insur_dia .risks_status ul > li dt {position:relative; float:left; width:50%;} .insur_dia .risks_status ul > .lack dt:after {content:'부족'; display:inline-block; clear:both; position:absolute; top:50%; width:26px; height:16px; font-size:11px; margin:-8px 0 3px 5px; background-color:#ec4245; color:#fff; text-align:center; text-indent:-2px; border-radius:2px 2px 2px 2px; line-height:16px;} .insur_dia .risks_status ul > li dd {float:right; width:50%; position:relative; line-height:21px;} .insur_dia .risks_status ul > li dd > span {text-align: right; display: inline-block; width: 24%; margin-right:10%;} .insur_dia .risks_status ul > li dd .graph_wrap {position:absolute; left:30%; top:0; width:70%; height:21px;} .insur_dia .risks_help {margin:15px 0 40px;} .insur_dia .risks_help:after {content:''; display:block; clear:both;} .insur_dia .risks_help p {font-size:12px; color:#666; line-height:22px;} .insur_dia .risks_help p:first-child {float:left; width:50%;} .insur_dia .risks_help p+p {float:right; width:50%; position:relative; text-align:right;} .insur_dia .risks_help p+p a {position:relative; display:block; line-height:22px; padding-right:20px;} .insur_dia .risks_help p+p a:after {content:''; position:absolute; display:block; right:0; top:50%; margin-top:-9px; width:17px; height:17px; background:url("/subscribe/images/dlb/gurtanly/ico_risks_help_pop.png") 0 0 no-repeat; background-size:17px 17px;} .insur_dia .risks_help p+p span {position:absolute; left:0; top:0; width:1px; height:1px; text-indent:-9999px; overflow:hidden;} /* 6가지 위험 보장 현황 */ .insur_dia .grap_hori {position:relative; width:100%; height:21px; border-radius:30px; box-sizing:border-box; background:#eee;} .insur_dia .grap_hori .inner_grap {position:absolute; width:0; height:21px; border-radius:30px; box-sizing:border-box; transition:all 1s ease;} .insur_dia .grap_hori .inner_grap span {position:absolute; right:0; top:0; transform:translateY(-100%) translateX(50%); transition:all 1s; transition-delay:1s; font-size:14px;} .insur_dia .lack .inner_grap {color:#ec4245;background:#ec4245;} .insur_dia .inner_grap {color:#02a7c5;background:#02a7c5;} /* 진단상세 */ .ios_scroll_auto {overflow:scroll; -webkit-overflow-scrolling:auto !important;} .scrT_chk {position:fixed; right:0; top:0; width:1px; top:1px; z-index:-1;} .diag_detail {} .diag_detail h4 {padding:0 5%;} .diag_cont > li {margin:50px 0;} .diag_cont > li:first-child {margin:37px 0;} .diag_cont > li:last-child {margin:50px 0 0;} .diag_cont .diag_banner {padding:0; margin:50px 0;} .diag_cont > li .detail_txt { margin:0 5% 0;} .diag_cont > li .detail_txt .detail_tit {margin:35px 0 0; display:flex; align-items:center; justify-content:space-between;} .diag_cont > li .detail_txt .detail_tit:after {content:''; display:block; clear:both;} .diag_cont > li .detail_txt .detail_tit dt {display:flex; align-items:center; width:70%; font-size:20px; line-height:1.5em; color:#385087; font-weight:700; box-sizing:border-box;} .diag_cont .detail_txt .detail_tit dt .ico_lack {font-style:normal; margin-left:5px; width:30px; height:18px; font-size:12px; line-height:18px; background-color:#ec4245; color:#fff; text-indent:-2px; text-align:center; border-radius:2px 2px 2px 2px;} .diag_cont > li .detail_txt .detail_tit dd {font-size:15px; color:#395086;line-height: 1;margin-left: auto;} .diag_cont > li .detail_txt .detail_tit dd em {font-size:33px; font-weight:700; padding-right:5px;} .diag_cont > li .detail_txt p {font-size:15px; color:#666;} .diag_cont > li .detail_txt .detail_aver {position:relative; margin-top:5px; padding-left:12px; font-size:13px; color:#888; } .diag_cont > li .detail_txt .detail_aver:before {content:'＊'; display:block; position:absolute; left:0;} .diag_cont > li .cost_analy {padding:0 5%; margin:0 0 50px;} .diag_cont > li .cost_analy .cost_grap li {margin:30px 0;} .diag_cont > li .cost_analy .cost_grap dl dt:after , .diag_cont > li .cost_analy .cost_grap dl dd:after {content:''; display:block; clear:both;} .diag_cont > li .cost_analy .cost_grap dl dt strong {display:block; float:left; width:55%; font-size:15px; font-weight:700; color:#333;} .diag_cont > li .cost_analy .cost_grap dl dt span {display:block; float:right; width:45%; font-size:14px; text-align:right;} .diag_cont > li .cost_analy .cost_grap .lack dt span {color:#ec4245;} .diag_cont > li .cost_analy .cost_grap .enough dt span {color:#02a7c5;} .diag_cont > li .cost_analy .cost_grap .cost_grap_insuran {display:block; float:left; width:50%; font-size:11px; color:#333;} .diag_cont > li .cost_analy .cost_grap .cost_grap_recomm {display:block; float:right; width:50%; font-size:11px; color:#888; text-align:right;} .diag_cont > li .cost_analy .cost_list {} .diag_cont > li .cost_analy .cost_list li {margin:50px 0;} .diag_cont > li .cost_analy .cost_list li:first-child {margin:0 0 50px;} .diag_cont > li .cost_analy .cost_list dl:after {content:''; display:block; clear:both;} .diag_cont > li .cost_analy .cost_list dl dt {float:left; width:50%;} .diag_cont > li .cost_analy .cost_list dl dt strong {font-size:15px; font-weight:700; color:#333; line-height:22px;} .diag_cont > li .cost_analy .cost_list dl dd {float:left; width:50%; text-align:right; font-size:14px; font-weight:700; color:#333; line-height:22px;} .diag_cont > li .cost_analy .cost_list dl dd .enough {color:#02a7c5;} .diag_cont > li .cost_analy .cost_list dl dd .lack {color:#ec4245;} .diag_cont > li .cost_analy .cost_list dl dd em {font-weight:700;} .diag_cont > li .cost_analy .cost_list dl .cost_sublist {font-size:14px; font-weight:700; color:#333;} .diag_cont > li .cost_analy .cost_list dl .cost_sublist:before {content:'-'; display:inline; clear:both;} /* 진단상세 - 성인병 */ .diag_cont > .adult_dis .detail_txt .detail_tit {margin:30px 0 15px;} .diag_cont .detail_txt .detail_tit dt em {display:block; width:34px; height:34px; background-position:0 50%; background-size:34px 34px; background-repeat:no-repeat;margin-right:5px; } .diag_cont .detail_txt .detail_tit dt em.ico_insur_01 {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_01.png");} .diag_cont .detail_txt .detail_tit dt em.ico_insur_02 {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_02.png");} .diag_cont .detail_txt .detail_tit dt em.ico_insur_03 {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_03.png");} .diag_cont .detail_txt .detail_tit dt em.ico_insur_04 {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_04.png");} .diag_cont .detail_txt .detail_tit dt em.ico_insur_05 {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_05.png");} .diag_cont .detail_txt .detail_tit dt em.ico_insur_06 {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_06.png");} .diag_cont .detail_txt .detail_tit dt em.ico_insur_07 {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_07.png");} .diag_cont .detail_txt .detail_tit dt em.ico_insur_08 {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_08.png");} .diag_cont .detail_txt .detail_tit dt em.ico_insur_09 {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_09.png");} .diag_cont .detail_txt .detail_tit dt em.ico_insur_10 {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_10.png");} .diag_detail .grap_hori {position:relative; width:100%; height:20px; margin:25px 0 10px; border-radius:10px; box-sizing:border-box; background:#eee;} .diag_detail .grap_hori .inner_grap {position:absolute; width:0; height:20px; border-radius:12px; box-sizing:border-box; transition:all 1s ease;} .diag_detail .grap_hori .inner_grap span {position:absolute; right:0; top:0; transform:translateY(-100%) translateX(0%); font-size:14px; opacity:0; transition:all 1s;} .diag_detail .on .grap_hori .inner_grap span {opacity:1;} .diag_detail .lack .inner_grap {color:#ec4245;background:#ec4245;} .diag_detail .enough .inner_grap {color:#02a7c5;background:#02a7c5;} /* 가입내역 */ .gurt20_tab03 .gurt20_content h4 {padding:0 5%;} .gurt20_tab03 .gurt20_content {} .gurt20_tab03 .subscription_top {margin:30px 4% 0; padding:0 0 40px; border-bottom:solid 1px #e5e5e5;} .gurt20_tab03 .subscription_top:after {content:''; display:block; clear:both;} .gurt20_tab03 .subscription_top dt {display:block; vertical-align:top; width:50%; line-height:40px; box-sizing:border-box; padding-left:38px; font-size:18px; font-weight:800; color:#385087; background-position:0 50%; background-size:34px 34px; background-repeat:no-repeat; letter-spacing:-0.07em; float:left;} .gurt20_tab03 .subscription_top dt:nth-of-type(1) {background-image:url("/subscribe/images/dlb/gurtanly/ico_subscription_top_01.png");} .gurt20_tab03 .subscription_top dt:nth-of-type(2) {background-image:url("/subscribe/images/dlb/gurtanly/ico_subscription_top_02.png");} .gurt20_tab03 .subscription_top dt {} .gurt20_tab03 .subscription_top dd {display:block; vertical-align:top; width:48%; text-align:right; float:left;} .gurt20_tab03 .subscription_top dd p:first-child {font-size:15px; font-weight:400; color:#395086; line-height:40px;} .gurt20_tab03 .subscription_top dd p:first-child em {font-size:28px; padding-right:3px; font-weight:700; color:#395086; vertical-align:middle;} .gurt20_tab03 .subscription_top dd p+p {position:relative; top:-7px; font-size:13px; font-weight:400; color:#666;} /* 가입내역 리스트 */ .gurt20_tab03 .subscription_list {padding:0 5% 50px;} .gurt20_tab03 .subscription_list li {display:block; margin:50px 0 0;} .gurt20_tab03 .subscription_list li:first-child {margin:40px 0 0;} .gurt20_tab03 .subscription_list li > a {position:relative; display:block;} .gurt20_tab03 .subscription_list li > a:after {content:''; display:block; position:absolute; width:30px; height:29px; right:0; top:50%; margin-top:-15px; background:url("/subscribe/images/dlb/gurtanly/ico_subscription_con_btn.png") 0 0 no-repeat; background-size:30px 29px;} .gurt20_tab03 .subscription_list li strong {display:block; width:calc(100% - 50px); margin-top:5px; margin-bottom:10px; font-size:15px; font-weight:700; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .gurt20_tab03 .subscription_list li p em {display:block; width:100%; font-size:13px; font-weight:700; margin-bottom:5px; color:#333;} .gurt20_tab03 .subscription_list li p {display:block; font-size:12px; font-weight:400; color:#888;} .gurt20_tab03 .subscription_list li p span {position:relative;} .gurt20_tab03 .subscription_list li p > span.ico_effect:before {content:'실효'; display:inline-block; position: relative; top: 0; margin-right:2px; width:30px; height:18px; font-size:12px; line-height:18px; background-color:#ec4245; color:#fff; text-indent:-2px; text-align:center; border-radius:2px 2px 2px 2px;} .gurt20_tab03 .subscription_list li p > span:before {content:'정상'; display:inline-block; position: relative; top: 0; margin-right:2px; width:30px; height:18px; font-size:12px; line-height:18px; background-color:#74b944; color:#fff; text-indent:-2px; text-align:center; border-radius:2px 2px 2px 2px;} .gurt20_tab03 .subscription_list li div {display:inline-block; width:auto;} .gurt20_tab03 .subscription_list li div > img {max-width:50%;} /* 가입내역 팝업 */ .subscriptlist_pop {padding:30px 15px 50px;} #pop_wrap #pop_content .subscriptlist_pop h2 {font-size:17px; color:#333; font-weight:700;} #pop_wrap #pop_content .subscriptlist_pop h3 {font-size:15px; color:#000; font-weight:700; margin:0 0 5px;} .subscriptlist_pop .subscriptlist_logo {display:block; transform: scale(0.5) translateX(-50%);} .subscriptlist_pop .subscript_tbl {margin:20px 0 30px;} .subscriptlist_pop .subscript_tbl:last-of-type {margin:20px 0 0;} .subscriptlist_pop .subscript_tbl table {width:100%; border-top:solid 2px #000;} /* 가입내역 팝업 - 가로형 */ .subscriptlist_pop .subscript_tbl.horizon table th, .subscriptlist_pop .subscript_tbl.horizon table td {padding:10px;} .subscriptlist_pop .subscript_tbl.horizon table th {font-size:15px; color:#000; font-weight:700; text-align:center; border-right:solid 1px #ddd; border-bottom:solid 1px #ddd;} .subscriptlist_pop .subscript_tbl.horizon table td {border-bottom:solid 1px #ddd; font-size:14px; color:#000;} /* 가입내역 팝업 - 세로형 */ .subscriptlist_pop .subscript_tbl.vertical table th, .subscriptlist_pop .subscript_tbl.vertical table td {padding:10px; letter-spacing:-0.05em;} .subscriptlist_pop .subscript_tbl.vertical table thead th {font-size:15px; color:#000; font-weight:700; text-align:center; border-bottom:solid 1px #ddd;} .subscriptlist_pop .subscript_tbl.vertical table thead th:nth-of-type(1) {text-align:left;} .subscriptlist_pop .subscript_tbl.vertical table thead th:nth-of-type(2) {text-align:right;} .subscriptlist_pop .subscript_tbl.vertical table thead th:nth-of-type(3) {text-align:center;} .subscriptlist_pop .subscript_tbl.vertical table tr > td {border-bottom:solid 1px #ddd; font-size:14px; color:#000;} .subscriptlist_pop .subscript_tbl.vertical table tr > td:nth-of-type(1) {text-align:left;} .subscriptlist_pop .subscript_tbl.vertical table tr > td:nth-of-type(2) {text-align:right;} .subscriptlist_pop .subscript_tbl.vertical table tr > td:nth-of-type(3) {text-align:center;} .subscriptlist_pop .subscript_tbl.vertical table td:last-child {border-right:solid 1px #fff;} /* 추천상품 */ .gurt20_tab04 .gurt20_content {padding-bottom:50px;} .gurt20_tab04 .gurt20_content h4 {position:relative; padding-left:100px; width:50%; max-width:200px; margin:0 auto;} .gurt20_tab04 .gurt20_content h4:before {content:''; display:block; position:absolute; left:15px; top:50%; margin-top:-48px; width:80px; height:96px; background:url("/subscribe/images/dlb/gurtanly/bg_recommend_product_tit.png") 0 0 no-repeat; background-size:80px 96px;} .gurt20_tab04 .gurt20_content h4:before {content:''; display:block; position:absolute; left:15px; top:50%; margin-top:-48px; width:80px; height:96px; background:url("/subscribe/images/dlb/gurtanly/bg_recommend_product_tit.png") 0 0 no-repeat; background-size:80px 96px;} .solution_wrap {padding-bottom:50px; border-bottom:solid 1px #e5e5e5;} .gurt20_tab04 .solution_wrap {margin:0 5% 50px; border-bottom:solid 1px #e5e5e5;} .solution_wrap.lately {padding-bottom:50px; border-bottom:solid 1px #e5e5e5;} .solution_wrap > li .solut_tit {margin:50px 0 15px;} .solution_wrap > li .solut_tit:after {content:''; display:block; clear:both;} .solution_wrap > li .solut_tit dt {float:left; width:70%; padding-left:40px; font-size:20px; line-height:50px; color:#385087; font-weight:700; background-position:0 50%; background-size:34px 34px; background-repeat:no-repeat; box-sizing:border-box;} .solution_wrap > .lack .solut_tit dt:after {content:'부족'; display:inline-block; position: relative; top: -4px; margin-left:5px; width:30px; height:18px; font-size:12px; line-height:18px; background-color:#ec4245; color:#fff; text-indent:-2px; text-align:center; border-radius:2px 2px 2px 2px;} .solution_wrap > li .solut_tit dd {float:right; width:30%; height:50px; line-height:50px; font-size:15px; text-align:right;} .solution_wrap > li .solut_tit dd em {font-size:33px; font-weight:700; padding-right:5px; color:#395086;} .solution_wrap > li .solut_con {position:relative; padding:7% 5%; margin:15px 0 20px; border:solid 2px #ec4245; border-radius:10px; font-size:14px; color:#444; letter-spacing:-0.1em;} .solution_wrap > li .solut_con p+p {margin-top:10px;} .solution_wrap > li .solut_con:after {content:''; display:block; clear:both; position:absolute; right:19px; top:17px;} .solution_wrap > li .solut_push {margin:15px 0 25px; font-size:15px; letter-spacing:-0.05em; color:#666;} .solution_wrap > li .solut_push:after {content:''; display:block; clear:both;} .solution_wrap > li .solut_push p:first-child {margin-bottom:15px;} .solution_wrap > li .solut_push p:first-child strong {display:block; float:left; width:60%; font-size:17px; font-weight:700; color:#333;} .solution_wrap > li .solut_push p:first-child em {display:block; float:right; width:40%; text-align:right; font-size:17px; font-weight:700; color:#333;} .solution_wrap > li .solut_push p:first-child:after {content:''; display:block; clear:both;} .solution_wrap > li .solut_push p+p {font-size:15px; color:#666; letter-spacing:-0.1em;} .solution_wrap > li .solut_btn {margin:25px 0 0 0;} .solution_wrap > li .solut_btn:after {content:''; display:block; clear:both;} .solution_wrap > li .solut_btn a {position:relative; display:block; float:left; width:48%; padding:10px 20px; font-size:14px; font-weight:700; box-sizing:border-box; border-radius:20px; color:#fff; text-align:center; text-indent:-10px;} .solution_wrap > li .solut_btn a:after {content:''; display:inline-block; position:absolute; width:15px; height:19px; background:url("/subscribe/images/dlb/gurtanly/ico_gurtbtn_arrow.png") 8px 50% no-repeat; background-size:7px 11px;} .solution_wrap > li .solut_btn a:first-child {background:#828282; margin-right:3%;} .solution_wrap > li .solut_btn a+a {background:#ec4245;} .solution_wrap > li .solut_con .solut_con_sub {position:relative; margin-top:5px; padding-left:12px; font-size:12px; color:#666;} .solution_wrap > li .solut_con .solut_con_sub:after {content:'＊'; display:block; position:absolute; left:0; top:1px;} .solution_wrap > li .solut_con p + p {margin-top:10px;} .solution_wrap.lately > li > .solut_btn a {background:#ec4245;margin:0 auto;float:none;} /* 추천상품 - 뇌혈관질환 */ .solution_wrap > .g3040 .solut_tit {margin:25px 0 15px;} .solution_wrap > .g3040 .solut_con {border-color:#ec4245; background:#fdeee7;} .solution_wrap > .g3040 .solut_con:after {background:url("/subscribe/images/dlb/gurtanly/win/ico_best_01.png") 0 0 no-repeat; width:48px; height:58px; background-size:48px 58px;} .solution_wrap > .g3040 .solut_con p > em {font-weight:bold;color:#ec4245;} .solution_wrap > .g3040 .solut_con p > span {color:#666;font-weight:400; font-size:12px;} /* 추천상품 - 심장질환 */ .solution_wrap > .g3090 .solut_con {border-color:#f761ab; background:#fff1f8;} .solution_wrap > .g3090 .solut_con:after {background:url("/subscribe/images/dlb/gurtanly/win/ico_best_02.png") 0 0 no-repeat; width:57px; height:46px; background-size:57px 46px;} .solution_wrap > .g3090 .solut_con p em {font-weight:bold;color:#f4449b;} .solution_wrap > .g3090 .solut_con p span {font-size:12px;} /* 추천상품 - 암 치료비 */ .solution_wrap > .g3050 .solut_con {border-color:#fa6c1e; background:#fff3e6;} .solution_wrap > .g3050 .solut_con:after {background:url("/subscribe/images/dlb/gurtanly/win/ico_best_03.png") 0 0 no-repeat; width:49px; height:48px; background-size:49px 48px;} .solution_wrap > .g3050 .solut_con p > em {font-weight:bold; color:#fa6c1e;} .solution_wrap > .g3050 .solut_con p span {font-weight:400; color:#666; font-size:12px;} /* 추천상품 - 실손의료비 */ .solution_wrap > .g3010 .solut_con {border-color:#019c6e; background:#ebffee;} .solution_wrap > .g3010 .solut_con:after {top:24px; right:10px; background:url("/subscribe/images/dlb/gurtanly/win/ico_best_04.png") 0 0 no-repeat; width:48px; height:50px; background-size:48px 50px;} .solution_wrap > .g3010 .solut_con p > em {font-weight:700; color:#019c6e;} /* 추천상품 - 수술비 */ .solution_wrap > .g3060 .solut_con {border-color:#4d7dec; background:#e0efff;} .solution_wrap > .g3060 .solut_con:after {background:url("/subscribe/images/dlb/gurtanly/win/ico_best_05.png") 0 0 no-repeat; width:48px; height:55px; background-size:48px 55px;} .solution_wrap > .g3060 .solut_con p > em {font-weight:700; color:#4d7dec;} .solution_wrap > .g3060 .solut_con p span {color:#666;font-size:12px;font-weight:normal;} /* 추천상품 - 입원일당 */ .solution_wrap > .g3100 .solut_con {border-color:#019c6e !important; background:#ebffee;} .solution_wrap > .g3100 .solut_con:after {background:url("/subscribe/images/dlb/gurtanly/win/ico_best_06.png") 0 0 no-repeat; width:61px; height:50px; background-size:61px 50px;} .solution_wrap > .g3100 .solut_con p > em {font-weight:700; color:#019c6e;} /* 추천상품 - 사망 */ .solution_wrap > .g3080 .solut_con {border-color:#23b3c0; background:#ebfdff;} .solution_wrap > .g3080 .solut_con:after {background:url("/subscribe/images/dlb/gurtanly/win/ico_best_07.png") 0 0 no-repeat; width:56px; height:51px; background-size:56px 51px;} .solution_wrap > .g3080 .solut_con p > em {font-weight:700; color:#23b3c0;} .solution_wrap > .g3080 .solut_con p span {display:block; font-size:12px; color:#666;} /* 추천상품 - 후유장애 */ .solution_wrap > .g3110 .solut_con {border-color:#7e8edf !important; background:#f9faff;} .solution_wrap > .g3110 .solut_con:after {background:url("/subscribe/images/dlb/gurtanly/win/ico_best_08.png") 0 0 no-repeat; width:56px; height:51px; background-size:56px 51px;} .solution_wrap > .g3110 .solut_con p > em {font-weight:700; color:#23b3c0;} .solution_wrap > .g3110 .solut_con p span {display:block; font-size:12px; color:#666;} /* 추천상품 - 치아 */ .solution_wrap > .g3070 .solut_con {border-color:#c34ad9; background:#fee6ff;} .solution_wrap > .g3070 .solut_con p > span {font-size:11px; color:#666;} .solution_wrap > .g3070 .solut_con:after {background:url("/subscribe/images/dlb/gurtanly/win/ico_best_09.png") 0 0 no-repeat; width:56px; height:56px; background-size:56px 56px;} .solution_wrap > .g3070 .solut_con p > em {font-weight:700; color:#c34ad9;} /* 추천상품 - 운전·주택 */ .solution_wrap > .g3020 .solut_con {border-color:#704ece; background:#f8f7ff; padding-right:60px;} .solution_wrap > .g3020 .solut_con:after {right:10px; background:url("/subscribe/images/dlb/gurtanly/win/ico_best_10.png") 0 0 no-repeat; width:55px; height:51px; background-size:55px 51px;} .solution_wrap > .g3020 .solut_con p > em {font-weight:700; color:#704ece;} .g3020 .insu_diag_info {margin:40px 5%; letter-spacing: -0.05em;} .g3020 .insu_diag_info strong {display:block; padding-left:23px; font-size:16px; line-height:19px; background:url("/subscribe/images/dlb/gurtanly/ico_insu_diag_info.png") 0 50% no-repeat; background-size:17px 17px;} .g3020 .insu_diag_info p:first-of-type {margin:10px 0;} .g3020 .insu_diag_info p {font-size:14px;} .solution_wrap > .g3040 .solut_tit dt {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_01.png");} .solution_wrap > .g3090 .solut_tit dt {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_02.png");} .solution_wrap > .g3050 .solut_tit dt {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_03.png");} .solution_wrap > .g3010 .solut_tit dt {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_04.png");} .solution_wrap > .g3060 .solut_tit dt {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_05.png");} .solution_wrap > .g3100 .solut_tit dt {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_06.png");} .solution_wrap > .g3080 .solut_tit dt {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_07.png");} .solution_wrap > .g3110 .solut_tit dt {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_08.png");} .solution_wrap > .g3070 .solut_tit dt {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_09.png");} .solution_wrap > .g3020 .solut_tit dt {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_10.png");} /* 추천상품 - 궁금하신 사항 문의 */ .tel_consult {margin:50px 5% 0; border:solid 2px #395086; border-radius:10px; font-size:15px; letter-spacing:-0.1em; color:#333;} .tel_consult > dl {padding:15px 5% 20px 35%; background:#e1eaff url(/subscribe/images/dlb/gurtanly/bg_recommend_call.png) 7% 50% no-repeat; color:#444; border-radius:10px 10px 0 0; box-sizing:border-box; background-size:78px 103px;} .tel_consult > dl dt {color:#395086; font-weight:700;} .tel_consult .chkbox_con {color:#395086; padding:25px 0 35px 15px;} .tel_consult .chkbox_con .chk_wrap {margin:20px 0 0;} .tel_consult .chkbox_con .chk_wrap:first-child {margin:0 0 20px;} .tel_consult .input_radio input[type=radio]+label {font-size:15px; letter-spacing:-0.1em; color:#333;} .tel_consult .input_radio input[type=radio]+label span {font-weight:700;} .tel_consult .tel_consult_btn {text-align:center;} .tel_consult .tel_consult_btn a {position:relative; display:inline-block; width:50%; padding:12px 30px; font-size:14px; font-weight:700; border-radius:30px; background:#ec4245; color:#fff; text-align:center; text-indent:-10px; margin-bottom:35px; box-sizing:border-box;} .tel_consult .tel_consult_btn a:after {content:''; display:inline-block; position:absolute; width:15px; height:19px; background:url("/subscribe/images/dlb/gurtanly/ico_gurtbtn_arrow.png") 8px 50% no-repeat; background-size:7px 11px;} /* 꼭 알아두실사항 */ .gurt20_result_con .date_notice{background:#fff; padding:30px 5%; font-family:"RixSGo M"; font-size:13px; line-height:20px; color:#666;} .gurt20_result_con .gurt20_tab03 .date_notice{padding:0 5% 30px;} .gurt20_result_con .gurt20_tab04 .date_notice{padding:0 5%;} .gurt20_result_con .date_notice h5{font-size:17px; color:#000; font-family:"RixSGo B"; margin-bottom:15px;} .gurt20_result_con .date_notice h5 img{width:18px; margin-right:5px; vertical-align:top;} .gurt20_result_con .date_notice ul li{list-style-type:disc; list-style-position:outside; margin-left:15px;} .gurt20_result_con .date_notice ul li+li{margin-top:8px;} /* 종합점수 그래프 */ .score_grap_wrap {position:relative; width:60vw; height:27.5vw; padding-bottom:6vw; padding-top:3vw; margin:0 auto;} .score_grap_wrap:before {content:'0'; display:block; position:absolute; right:100%; bottom:-10px; color:#f68588; font-size:15px; z-index:10; font-weight:700;} .score_grap_wrap:after {content:'100'; display:block; position:absolute; left:100%; bottom:-10px; color:#ec4245; font-size:15px; z-index:10; font-weight:700;} .score_grap_wrap .score_grap_inner {position:relative; width:60vw; height:27.5vw; padding-bottom:6vw; padding-top:3vw; overflow:hidden;} .score_grap_wrap .grap100 {position:absolute; width:55vw; height:27.5vw; left:50%; top:3vw; transform:translate(-50%);} .score_grap_wrap .grap100_inner {position:relative; width:55vw; height:27.5vw; border-radius:50% 50% 0 0 / 100% 100% 0 0; margin-bottom:30px; background:#e8e9eb;} .score_grap_wrap .grap100_inner .left_edge {position:absolute; left:0; bottom:-4vw; width:6vw; height:6vw; background:#e8e9eb; border-radius: 0 0 50% 50%;} .score_grap_wrap .grap100_inner .right_edge {position:absolute; right:0; bottom:-4vw; width:6vw; height:6vw; background:#e8e9eb; border-radius: 0 0 50% 50%;} .score_grap_wrap .score_grap_inner > .left_edge {position:absolute;left: 2.5vw;bottom:-2.5vw;width: 11vw;height:8vw;background:url("/subscribe/images/dlb/gurtanly/img_gurtgrap_left_edge.png") 0 0 no-repeat;background-size:100% 100%;z-index:10;transform:translate3d(0, 0, 1px);} .score_grap_wrap .grapaver {position:absolute; width:55vw; height:27.5vw; left:50%; top:3vw; transform:translate(-50%);} .score_grap_wrap .grapaver_inner {position:relative; width:55vw; height:27.5vw; border-radius:50% 50% 0 0 / 100% 100% 0 0; margin-bottom:30px; background-image:linear-gradient(90deg, #c6c6c6, #c6c6c6); background-size:100% 100%; transform-origin:50% 100%; transform:rotateZ(-180deg); opacity:0; background-position:100% 0;} .score_grap_wrap .grapaver_inner.half {background-size:50% 100%; background-repeat:no-repeat;} .score_grap_wrap .grapaver_inner .left_edge {position:absolute; left:0; bottom:-4vw; width:6vw; height:6vw; border-radius: 0 0 50% 50%; background:#c6c6c6;} .score_grap_wrap .grapaver_inner.half .left_edge {display:none;} .score_grap_wrap .grapaver_inner .right_edge {position:absolute; right:0; bottom:-4vw; width:6vw; height:6vw; border-radius: 0 0 50% 50%; background:#c6c6c6;} .score_grap_wrap .grapaver_inner .right_edge:after {content:''; display:block; position:relative; right:-5.5vw; bottom:-4vw; width:12px; height:10px; transform:rotateZ(90deg); background:url("/subscribe/images/dlb/gurtanly/img_gurtgrap_aver_edge.png") 0 0 no-repeat; background-size:100% 100%;} .score_grap_wrap .grap_result {position:absolute; width:55vw; height:27.5vw; left:50%; top:3vw; transform:translate(-50%);} .score_grap_wrap .grap_result_inner {position:relative; width:55vw; height:27.5vw; border-radius:50% 50% 0 0 / 100% 100% 0 0; margin-bottom:30px; background-image:linear-gradient(90deg, #f99596, #ed4649); background-size:100% 100%; transform-origin:50% 100%; transform:rotateZ(-180deg) translate3d(0, 0, 1px); opacity:0; background-repeat:no-repeat; background-position:100% 0;} .score_grap_wrap .grap_result_inner.half {background-size:50% 100%;} .score_grap_wrap .grap_result_inner .left_edge {position:absolute; left:0; bottom:-6vw; width:6vw; height:6vw; border-radius: 0 0 50% 50%; background:#f89496;} .score_grap_wrap .grap_result_inner.half .left_edge {display:none;} .score_grap_wrap .hide_circle {position:absolute; width:55vw; height:55vw; left:50%; top:3vw; transform:translate(-50%) scale(0.8); border-radius:50%; background:#fff; transform-origin:50% 50%; z-index:20;} .score_grap_wrap .hide_circle_inner {position:relative; width:100%; height:100%; transform:rotateZ(-180deg); border-radius:50%; transform-origin:50% 50%; border-radius:50%;} .score_grap_wrap .hide_circle_inner:after {content:''; position:absolute; display:block; width:6vw; height:6vw; right:-9vw; top:50%; margin-top:-5vw; background:#fff; border-radius:50% 50% 50% 50%; border:solid 2vw #ec4245; opacity:0;} .result_score .result_aver {position:absolute; width:55vw; height:27.5vw; left:50%; top:3vw; transform:translate(-50%);} .result_score .result_aver .aver_degwrap {display:block; position:relative; width:55vw; height:27.5vw; border-radius:50% 50% 0 0 / 100% 100% 0 0; transform-origin:50% 100%; transform:rotateZ(0deg); text-align:center; font-size:13px;} .result_score .result_aver .aver_degwrap .aver_degtxt {position:relative; display:inline-block; transform-origin:50% 50%; transform:rotateZ(0deg); top:-7vw;} .score_grap_wrap .grap100_inner, .score_grap_wrap .grap_result_inner, .score_grap_wrap .hide_circle_inner, .score_grap_wrap .hide_circle_inner:after { -webkit-transition:all 1s; transition:all 1s; visibility:visible;} /* 종합점수 그래프 - on시 모션 */ .score_grap_wrap .hide_circle_inner.on:after {opacity:1;} .score_grap_wrap .result_score_txt {position:absolute; width:40vw; height:27.5vw; left:50%; bottom: 0; transform:translate(-50%); border-radius:50%; z-index:30;} .score_grap_wrap .result_score_txt p {position:absolute; width:100%; left:0; bottom:-6px; text-align:center; font-size:20px; color:#ec4245;} .score_grap_wrap .result_score_txt p em {font-size:65px; font-weight:700;} /* 보장분석 - 명함 */ .gurt20_calling {position:relative; margin:0 auto 50px; width:90%; min-width:300px; height:60vw; min-height:200px; background:url("/subscribe/images/dlb/gurtanly/bg_gurt20_calling.png") 0 0 no-repeat; background-size:100% 100%;} .gurt20_calling .calling_header {position:absolute; top:35px; right:15px; text-align:right; font-weight:700; font-size:16px; color:#fff; letter-spacing:-0.05em;} .gurt20_calling .calling_content {padding-top:30%;} .gurt20_calling .calling_manager {text-align:center; font-weight:700; font-size:19px; color:#4466b6; letter-spacing:-0.05em;} .gurt20_calling .calling_call {text-align:center; font-size:18px; color:#333; letter-spacing:0;} .gurt20_calling .calling_btn1 {margin-top:13px; text-align:center;} .gurt20_calling .calling_btn1 a {display:inline-block; width:166px; height:38px;} .gurt20_calling .calling_btn2 {margin-top:13px; text-align:center;} .gurt20_calling .calling_btn2 a {display:inline-block; width:126px; height:38px; margin-left:10px;} .gurt20_calling .calling_btn2 a:first-child {margin-left:0; margin-right:10px;} /* 보장분석 인트로 */ #wrap_mobile_product #container #gurt20_intro .content {position:relative;padding:0; background:#f7f7f7; overflow:hidden;} /* 20220503 : djm 웹인리부트 2년경과 */ #wrap_mobile_product #container #gurt20_intro .content02 {position:relative;padding:0; overflow:hidden; text-align: center;} /* 20210927 : LSW : 보장분석 Intro class 추가 css 변경 */ /* #wrap_mobile_product #container #gurt20_intro.bg_grey {min-height:100vh;} */ #wrap_mobile_product #container #gurt20_intro.bg_grey .content {background-color:#eaeaea; } #wrap_mobile_product #container #gurt20_intro.bg_grey .content .dlpo_202109_gurt {padding-bottom:60px;} #wrap_mobile_product #container #gurt20_intro.bg_grey .content .dlpo_2021_new { /* background:skyblue; */ max-height: none !important; min-height:calc(100vh - 57px) !important; height: auto !important; overflow: visible; display:flex; align-items: flex-end; box-sizing:border-box; } #wrap_mobile_product #container #gurt20_intro .swiper-pagination-bullet-active {background:#333;} #wrap_mobile_product #container #gurt20_intro .swiper-container-horizontal>.swiper-pagination {bottom:10px;} #gurt20_intro .gurt20_tit {display:block; width:100%; margin:55px auto 30px;} #gurt20_intro .gurt20_con {display:block; width:100%; margin-top:30px} /* #gurt20_intro .product_layer_tab {position:unset;} */ /* 인트로 - 그래프 */ .score_grap_intro {position:relative; width:70vw; height:35vw; padding-bottom:6vw; padding-top:3vw; margin:35px auto;} .score_grap_intro:before {content:'0'; display:block; position:absolute; right:100%; bottom:-10px; margin-right:5px; color:#f68588; font-size:19px; z-index:10; font-weight:700;} .score_grap_intro:after {content:'100'; display:block; position:absolute; left:100%; bottom:-10px; margin-left:5px; color:#ec4245; font-size:19px; z-index:10; font-weight:700;} .score_grap_intro .score_grap_inner {position:relative; width:70vw; height:35vw; padding-bottom:6vw; padding-top:3vw; overflow:hidden;} .score_grap_intro .grap100 {position:absolute; width:70vw; height:35vw; left:50%; top:3vw; transform:translate(-50%);} .score_grap_intro .grap100_inner {position:relative; width:70vw; height:35vw; border-radius:50% 50% 0 0 / 100% 100% 0 0; margin-bottom:30px; background:#e8e9eb;} .score_grap_intro .grap100_inner .left_edge {position:absolute; left:0; bottom:-4vw; width:7vw; height:7vw; background:#e8e9eb; border-radius: 0 0 50% 50%;} .score_grap_intro .grap100_inner .right_edge {position:absolute; right:0; bottom:-4vw; width:7vw; height:7vw; background:#e8e9eb; border-radius: 0 0 50% 50%;} .score_grap_intro .score_grap_inner > .left_edge {position:absolute;left: 0;bottom:-3.5vw; width:14vw; height:9vw; background:url("/subscribe/images/dlb/gurtanly/img_gurtintro_left_edge.png") 0 0 no-repeat;background-size:100% 100%;z-index:10;transform:translate3d(0, 0, 1px);} /* .score_grap_intro .grapaver {position:absolute; width:55vw; height:27.5vw; left:50%; top:3vw; transform:translate(-50%);} .score_grap_intro .grapaver_inner {position:relative; width:55vw; height:27.5vw; border-radius:50% 50% 0 0 / 100% 100% 0 0; margin-bottom:30px; background-image:linear-gradient(90deg, #c6c6c6, #c6c6c6); background-size:100% 100%; transform-origin:50% 100%; transform:rotateZ(-180deg); opacity:0; background-position:100% 0;} .score_grap_intro .grapaver_inner.half {background-size:50% 100%; background-repeat:no-repeat;} .score_grap_intro .grapaver_inner .left_edge {position:absolute; left:0; bottom:-4vw; width:6vw; height:6vw; border-radius: 0 0 50% 50%; background:#c6c6c6;} .score_grap_intro .grapaver_inner.half .left_edge {display:none;} .score_grap_intro .grapaver_inner .right_edge {position:absolute; right:0; bottom:-4vw; width:6vw; height:6vw; border-radius: 0 0 50% 50%; background:#c6c6c6;} .score_grap_intro .grapaver_inner .right_edge:after {content:''; display:block; position:relative; right:-5.5vw; bottom:-4vw; width:12px; height:10px; transform:rotateZ(90deg); background:url("/subscribe/images/dlb/gurtanly/img_gurtgrap_aver_edge.png") 0 0 no-repeat; background-size:100% 100%;}*/ .score_grap_intro .grap_result {position:absolute; width:70vw; height:35vw; left:50%; top:3vw; transform:translate(-50%);} .score_grap_intro .grap_result_inner {position:relative; width:70vw; height:35vw; border-radius:50% 50% 0 0 / 100% 100% 0 0; margin-bottom:30px; background-image:linear-gradient(90deg, #f99596, #ed4649); background-size:100% 100%; transform-origin:50% 100%; transform:rotateZ(-63deg) translate3d(0, 0, 1px); background-repeat:no-repeat; background-position:0 0; animation:introani1 1s;} .score_grap_intro .grap_result_inner.half {background-size:50% 100%;} .score_grap_intro .grap_result_inner .left_edge {position:absolute; left:0; bottom:-6vw; width:6vw; height:6vw; border-radius: 0 0 50% 50%; background:#f89496;} .score_grap_intro .grap_result_inner.half .left_edge {display:none;} .score_grap_intro .hide_circle {position:absolute; width:70vw; height:70vw; left:50%; top:3vw; transform:translate(-50%) scale(0.8) translate3d(0, 0, 1px); border-radius:50%; background:#f7f7f7; transform-origin:50% 50%;} .score_grap_intro .hide_circle_inner {position:relative; width:100%; height:100%; transform:rotateZ(-63deg) translate3d(0, 0, 1px); border-radius:50%; transform-origin:50% 50%; animation:introani1 1s;} .score_grap_intro .hide_circle_inner:after {content:''; position:absolute; display:block; width:10vw; height:10vw; right:-12vw; top:50%; margin-top:-5vw; background:#f7f7f7; border-radius:50% 50% 50% 50%; border:solid 3vw #ec4245; transform:translate3d(0, 0, 1px); animation:introani2 1s;} .score_grap_intro .result_score .result_aver {position:absolute; width:55vw; height:35vw; left:50%; top:3vw; transform:translate(-50%) translate3d(0, 0, 1px);} .score_grap_intro .result_score .result_aver .aver_degwrap {display:block; position:relative; width:55vw; height:35vw; border-radius:50% 50% 0 0 / 100% 100% 0 0; transform-origin:50% 100%; transform:rotateZ(0deg); text-align:center; font-size:13px;} .score_grap_intro .result_score .result_aver .aver_degwrap .aver_degtxt {position:relative; display:inline-block; transform-origin:50% 50%; transform:rotateZ(0deg) translate3d(0, 0, 1px); top:0;} /* 종합점수 그래프 - on시 모션 */ .score_grap_intro .result_score_txt {position:absolute; width:40vw; height:35vw; left:50%; bottom:-15px; transform:translate(-50%) translate3d(0, 0, 1px); border-radius:50%; z-index:30;} .score_grap_intro .result_score_txt p {position:absolute; width:100%; left:0; bottom:-6px; text-align:center; font-size:29px; color:#ec4245;} .score_grap_intro .result_score_txt p em {font-size:84px; font-weight:700;} @keyframes introani1{ 0% {transform:rotateZ(-180deg) translate3d(0, 0, 1px); opacity:0;} 100% {transform:rotateZ(-63deg) translate3d(0, 0, 1px); opacity:1;} } @keyframes introani2{ 0% {opacity:0;} 100% {opacity:1;} } .result_score_intro > p {font-size:17px; color:#888; text-align:center; letter-spacing:-0.05em;} .gurt20_hidden .intro_tit_h3 {font-size:17px !important; color:#000; line-height:21px; letter-spacing: -0.05em;} .gurt20_hidden .txt_bround {font-size:13px; color:#666; line-height:17px;} .gurt20_wraphidden .intro_tit_h3 {margin: 25px 0 !important;font-size:14px !important; color:#000; line-height:21px; letter-spacing: -0.05em;} .gurt_first_come .intro_tit_h3 {font-size:17px !important; color:#000; line-height:21px; letter-spacing: -0.05em;} .gurtAnly #pop_wrap.pstn_stc #pop_content h2.sub_tit {font-size:17px !important;} .gurtAnly #pop_wrap.pstn_stc #pop_content h2.sub_tit + .font_11 {font-size:13px !important;} .gurtAnly #pop_wrap.pstn_stc #pop_content h2.pop_h2_tit {font-size:13px !important;} #gurt20_intro .content .product_wrap {max-height:calc(100vh - 117px);} /* 200227 : WYJ : 멜다방 네이버 이벤트 */ .mel_naver {position:relative;width:100%;} .mel_naver img {position:relative;z-index:1;} .mel_naver .link {display:inline-block;position:absolute;z-index:10;top:76.4%;left:7.4%;width:85.8%;height:13%;} .mel_exp_con dd ul li .s_font {position:relative;display:block;padding-left:10px;text-indent:0;} .mel_exp_con dd ul li .s_font:before {position:absolute;display:block;content:'';left:0;top:9px;width:5px;height:1px;background:#666;} /* 200324 : KSH : 멜다방 20년 4월 룰렛 이벤트 */ .roulette2004_evt {margin:0 auto; max-width:720px;width:100%; overflow:hidden; position:relative;} .roulette2004_evt .melda_img_con {position:relative; font-size:0; line-height:0;} .roulette2004_evt img[class*="roulette_con"] {position:absolute; left:50%; transform:translate(-50%);} .roulette2004_evt .roulette_board {position:absolute; left:50%; top:39%; width:86.7%; transform:translate(-50%);} .roulette2004_evt .roulette_con01 {position:absolute; left:50%; transform:translate(-50%); top:39.9%; width:74.7%;} .roulette2004_evt .roulette_con01 img {transform-origin:center center;z-index:1;} .roulette2004_evt .roulette_con01.on img {transition:all 5s ease-out;} .roulette2004_evt img.roulette_con02 {width:7.2%; top:33.5%; -webkit-transform:translate(-50%) translate3d(0,0,0);} .roulette2004_evt img.roulette_con03 {left:4.4%; width:13.2%; top:80%; transform:translate(0);} .roulette2004_evt .btn_01 {position:absolute; width:23.2%; left:50%; top:57%; transform:translate(-50%);} .roulette2004_evt .mel_exp_con dd ul li {text-indent:-16px;} .roulette2004_evt .roulette_rotate_object_01{position: absolute;bottom: 4%;left: 7%;animation: rouletteObjectRotate 2s 1s infinite alternate;width: 57px} .roulette2004_evt .roulette_rotate_object_02{position: absolute;bottom: 5%;right: 15%;animation: rouletteObjectRotate 2s 1s infinite alternate;width: 35px;} /* 200424 : KSH : 멜다방 20년 5월 룰렛 이벤트 */ .roulette2005_evt {margin:0 auto; max-width:720px;width:100%; overflow:hidden; position:relative;} .roulette2005_evt .melda_img_con {position:relative; font-size:0; line-height:0;} .roulette2005_evt img[class*="roulette_con"] {position:absolute; left:50%; transform:translate(-50%);} .roulette2005_evt .roulette_con01 {position:absolute; left:50%; transform:translate(-50%); top:37.9%; width:74.7%;} .roulette2005_evt .roulette_con01 img {transform-origin:center center;z-index:1;} .roulette2005_evt .roulette_con01.on img {transition:all 5s ease-out;} .roulette2005_evt img.roulette_con02 {width:7.2%; top:31.5%; -webkit-transform:translate(-50%) translate3d(0,0,0);} .roulette2005_evt img.roulette_con03 {left:4.4%; width:13.2%; top:80%; transform:translate(0);} .roulette2005_evt .btn_01 {position:absolute; width:23.2%; left:50%; top:55%; transform:translate(-50%);} .roulette2005_evt .mel_exp_con dd ul li {text-indent:-16px;} @keyframes rouletteBox_fire20{ 0%{transform:scale(0)} 24%{transform:scale(0)} 100%{transform:scale(1)} } @keyframes rouletteObjectRotate{ from{transform: rotate(0)} to{ transform: rotate(-25deg); animation-timing-function(1, 0, 0.8, 1); } } @keyframes fall { 0% { opacity: 0.9; top: 0 } 100% { opacity: 0.2; top: 100% } } @keyframes blow-soft-left { 0% { margin-left: 0 } 100% { margin-left: -50% } } @keyframes blow-medium-left { 0% { margin-left: 0 } 100% { margin-left: -100% } } @keyframes blow-soft-right { 0% { margin-left: 0 } 100% { margin-left: 50% } } @keyframes blow-medium-right { 0% { margin-left: 0 } 100% { margin-left: 100% } } @keyframes sway-0 { 0% { transform: rotate(-5deg) } 40% { transform: rotate(28deg) } 100% { transform: rotate(3deg) } } @keyframes sway-1 { 0% { transform: rotate(10deg) } 40% { transform: rotate(43deg) } 100% { transform: rotate(15deg) } } @keyframes sway-2 { 0% { transform: rotate(15deg) } 40% { transform: rotate(56deg) } 100% { transform: rotate(22deg) } } @keyframes sway-3 { 0% { transform: rotate(25deg) } 40% { transform: rotate(74deg) } 100% { transform: rotate(37deg) } } @keyframes sway-4 { 0% { transform: rotate(40deg) } 40% { transform: rotate(68deg) } 100% { transform: rotate(25deg) } } @-webkit-keyframes sway-5 { 0% { -webkit-transform: rotate(50deg) } 40% { -webkit-transform: rotate(78deg) } 100% { -webkit-transform: rotate(40deg) } } @keyframes sway-6 { 0% { transform: rotate(65deg) } 40% { transform: rotate(92deg) } 100% { transform: rotate(58deg) } } @keyframes sway-7 { 0% { transform: rotate(72deg) } 40% { transform: rotate(118deg) } 100% { transform: rotate(68deg) } } @keyframes sway-8 { 0% { transform: rotate(94deg) } 40% { transform: rotate(136deg) } 100% { transform: rotate(82deg) } } .sakura { background: linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9)); border-radius: 12px 1px; pointer-events: none; position: absolute; } /* 200324 : KSH : 멜다방 20년 4월 룰렛 이벤트 팝업 */ .rouletteBox_wrap20 .rouletteBox_info{width:100%; background:#fff;} .rouletteBox_wrap20 .rouletteBox_info ul li{padding:30px 0 30px; text-align:center;} .rouletteBox_wrap20 .rouletteBox_info ul li img{} .rouletteBox_wrap20 .rouletteBox_info ul li strong{display:block; text-align:center; font-size:18px; letter-spacing:-0.05em; font-weight:700; margin-bottom:10px;} .rouletteBox_wrap20 .rouletteBox_info ul li p{font-size:14px; letter-spacing:-0.025em;} .rouletteBox_wrap20 .rouletteBox_info+.btn_confirm{display:block; background:#ff6665; color:#fff; padding:15px 0; font-size:14px; font-weight:700; text-align:center;} .rouletteBox_wrap20 .fireWorks{animation:rouletteBox_fire20 1.2s ease; transform:scale(1);} /* 200609 : KSH : 멜다방 20년 6월 퀴즈 이벤트 팝업 */ .june_quiz {position:relative;min-height:400px;padding:40px 0 35px;background:#1895ff url("/subscribe/images/dlb/melbang/event/juneQuiz/bg_juneQuiz_01.png") no-repeat 0 0;background-size:100%;} .june_quiz .cont {margin:91% 25px 0;border-radius:12px;background:#fff;} .june_quiz .cont .result {display:block;margin-top:20px;} .june_quiz .cont .type03 .result {display:block;margin-top:0;} .june_quiz .type01 .info {margin:0 22px;padding-top:31px;} .june_quiz .type02 .info {margin:0 22px 70px;padding-top:60px;position: relative;} .june_quiz .cont .type02 .info .large_txt{color: #000;font-size: 30px;font-weight: bold;text-align: center;margin-bottom: 20px;} .june_quiz .cont .type02 .info .info_txt{color:#7c7e7c;font-size: 15px;text-align: center;} .june_quiz .cont .type02 .info .info_txt .customer_num{color: #20b784;} .june_quiz .cont .type02 .info .info_txt .co_num{color: #ee3722;} .june_quiz .cont .type02 .info img{position: absolute;width: 30%;top: 25px;} .june_quiz .cont .type02 .info img+img{right: 0;} .june_quiz .cont .type02 .info img{animation:rouletteBox_fire 1.2s ease; transform:scale(1);} @keyframes june_evt_fire{ 0%{transform:scale(0)} 50%{transform:scale(0)} 100%{transform:scale(1)} } .june_quiz .type03 .info {padding-top:37px;} .june_quiz .cont .info ul{margin-top: 20px;} .june_quiz .cont .info ul li{border: 2px solid #bfbfbf;padding: 12px 0px;text-align: center;font-size: 18px;font-weight: 700;border-radius: 5px;margin-bottom: 15px;} .june_quiz .cont .info ul li.on{border: 2px solid #000;background-color: #20b784;color: #fff;} /* 200724 : WYJ : 멜다방 20년 8월 룰렛 이벤트 */ .roulette2007_evt {margin:0 auto; max-width:720px;width:100%; overflow:hidden; position:relative;} .roulette2007_evt .melda_img_con {position:relative; font-size:0; line-height:0;} .roulette2007_evt img[class*="roulette_con"] {position:absolute; left:50%; transform:translate(-50%);} .roulette2007_evt .roulette_con01 {position:absolute; left:50%; transform:translate(-50%); top:38.8%; width:74.7%;} .roulette2007_evt .roulette_con01 img {transform-origin:center center;z-index:1;} .roulette2007_evt .roulette_con01.on img {transition:all 5s ease-out;} .roulette2007_evt img.roulette_con02 {width:7.5%; top:31.5%; -webkit-transform:translate(-50%) translate3d(0,0,0);} .roulette2007_evt img.roulette_con03 {left:4.4%; width:13.2%; top:80%; transform:translate(0);} .roulette2007_evt .btn_01 {position:absolute; width:23.2%; left:50%; top:56.2%; transform:translate(-50%);} .roulette2007_evt .mel_exp_con dd ul li {text-indent:-16px;} /* 200819 : KJW : 멜다방 20년 9월 스탬프 이벤트 */ .stamp2009_event {margin:0 auto; max-width:720px; width:100%;} .stamp2009_event .stamp_wrap {margin:0 auto; max-width:720px; width:100%; overflow:hidden; position:relative;} .stamp2009_event .stamp_sprinkling {position:absolute; left:75%; top:20%; width:20%; height:10%} .stamp2009_event .stamp_sprinkling img {position:absolute; max-width:40%; transition:all .5s ease-in; opacity:0; left:0; top:0; } .stamp2009_event .stamp_sprinkling.on img {opacity:1;} .stamp2009_event .stamp_sprinkling.on img:nth-child(1) {left:-80%; top:-110%; max-width:40%;} .stamp2009_event .stamp_sprinkling.on img:nth-child(2) {left:-30%; top:-150%; max-width:35%;} .stamp2009_event .stamp_sprinkling.on img:nth-child(3) {left:40%; top:-150%; max-width:30%;} .stamp2009_event .stamp_sprinkling.on img:nth-child(4) {left:80%; top:-100%; max-width:37%;} .stamp2009_event .stamp_sprinkling.on img:nth-child(5) {left:0%; top:-100%; max-width:28%;} .stamp2009_event .stamp_sprinkling.on img:nth-child(6) {left:-80%; top:70%; max-width:33%;} .stamp2009_event .stamp_sprinkling.on img:nth-child(7) {left:80%; top:70%; max-width:30%;} .stamp2009_event .stamp_touch {} .stamp2009_event .stamp_touch img {position:absolute; max-width:50%;} .stamp2009_event .stamp_touch img:nth-child(1) {width:14.16%; left:11.5%; top:81.2%; z-index:1; animation: stamp_doll_ani infinite 1s linear; transform-origin:right bottom;} .stamp2009_event .stamp_touch img:nth-child(2) {width:42.8%; left:16.4%; top:68%; animation: stamp_scale_ani infinite 1s linear; transition:all 1s; } .stamp2009_event .stamp_touch.on img:nth-child(2) {width:100%; max-width:80%; left:10%; top:50%; transform:translateY(-30%); animation:none; z-index:1;} .stamp2009_event .stamp_touch img:nth-child(3) {width:37%; left:52.4%; top:82.1%; animation: stamp_opa_ani infinite 1s linear;} .stamp2009_event .stamp_touch.on img:nth-child(1) {display:none;} .stamp2009_event .stamp_touch.on img:nth-child(3) {display:none;} @keyframes stamp_doll_ani { 0% {transform:rotateZ(0);} 25% {transform:rotateZ(-2deg) translateX(-3%);} 50% {transform:rotateZ(0);} 75% {transform:rotateZ(2deg) translateX(3%)} 100% {transform:rotateZ(0);} } @keyframes stamp_scale_ani { 0% {transform: scale(1.0);} 25% {transform: scale(1.05);} 50% {transform: scale(1.0);} 75% {transform: scale(0.95);} 100% {transform: scale(1.0);} } @keyframes stamp_opa_ani { 0% {margin-left:0;} 25% {margin-left:0;} 50% {margin-left:0;} 75% {margin-left:-5px;} 100% {margin-left:0;} } /* 2000909 : KSH : 멜다방 로또 이벤트 */ .lotto2009_evt{margin:0 auto; max-width:720px;width:100%; overflow:hidden; position:relative;} .lotto2009_evt .melda_img_con{position:relative; font-size:0; line-height:0;} .lotto2009_evt img[class*="lotto_con"]{position:absolute; left:50%; transform:translate(-50%);} .lotto2009_evt img.lotto_con01{width:7.5%; top:54.5%;left: 63.5%;-webkit-transform:translate(-50%) translate3d(0,0,0);opacity: 0;} .lotto2009_evt .lotto_con02{width: 77%;top: 75.7%;transition: opacity 1s;z-index: 2;} .lotto2009_evt .lotto_con03{width: 50%;top: 74.5%;z-index: 2;} .lotto2009_evt .lotto_con04{width: 50%;top: 92.7%;z-index: 2;} .lotto2009_evt img.lotto_con05{width: 3.6%;top: 54%;left: 64%;} .lotto2009_evt img.lotto_con06{width: 1.3%;top: 55.5%;left: 70.5%;} .lotto2009_evt img.lotto_con07{width: 4.7%;top: 57%;left: 73.5%;} .lotto2009_evt img.lotto_con08{width: 23%;top: 59.5%;left: 84.5%;} .lotto2009_evt img.lotto_con09{width: 1.6%;top: 55%;left: 68.6%;} .lotto2009_evt img.lotto_con10{width: 85%;top: 73.6%;z-index: 1;} .lotto2009_evt div.lotto_con11{width: 23.3%;top: 76.7%;left: 28%;z-index: 1;position: relative;opacity: 0;transition: opacity 1s;transition-delay: 3.7s;} .lotto2009_evt div.lotto_con12{width: 23.3%;top: 76.7%;left: 50%;z-index: 1;position: relative;opacity: 0;transition: opacity 1s;transition-delay: 6.1s;} .lotto2009_evt div.lotto_con13{width: 23.3%;top: 76.7%;left: 72%;z-index: 1;position: relative;opacity: 0;transition: opacity 1s;transition-delay: 8.5s;} .lotto2009_evt img.lotto_ball_mark{width: 73%;left: 50%;transform: translate(-50%);top: 13%;position: absolute;transition: opacity 1s;transition-delay: 10s;z-index: 5;} .lotto2009_evt img.lotto_ball_res_stamp{width: 53%;left: 50%;transform: translate(-50%);top: 23%;position: absolute;} .lotto2009_evt img.lotto_ball_res_vita{width: 18%;left: 50%;transform: translate(-50%);top: 19%;position: absolute;} .lotto2009_evt img.lotto_ball_res_coffe{width: 38%;left: 50%;transform: translate(-50%);top: 24%;position: absolute;} .lotto2009_evt .btn_01{position:absolute; width:44.4%; left:50%; top:33%; transform:translate(-50%);animation: lotto_btn_ani infinite 1s linear;transform-origin: left; } .lotto2009_evt .mel_exp_con dd ul li{text-indent:-16px;} .lotto2009_evt div[class*="lotto_con"] {position: absolute;transform: translate(-50%);} @keyframes lotto_btn_ani{ 0% {transform: scale(1.0) translate(-50%);} 25% {transform: scale(1.02) translate(-50%);} 50% {transform: scale(1.0) translate(-50%);} 75% {transform: scale(0.98) translate(-50%);} 100% {transform: scale(1.0) translate(-50%);} } @keyframes lotto_light_ani{ 0%{opacity: 1;} 50%{opacity: 0;} 100%{opacity: 1;} } @keyframes lotto_ball_rotating{ 0%{transform: rotate(0deg);} 25%{transform: rotate(360deg);} 50%{transform: rotate(720deg);} 75%{transform: rotate(1080deg);} 100%{transform: rotate(1440deg);opacity: 0;} } @keyframes lotto_ball_move{ 0%{opacity: 1;left: 64.5%;} 25%{left: 69.4%;top: 54.5%;} 100%{opacity: 1;left: 69.4%;top: 74%;} } /* 2000921 : WYJ : 내 보험 바로미터 */ .baro_wrap {position:relative;padding-bottom:100px;} .baro_wrap.type02 {padding-bottom:0;} .baro_wrap .header {padding:18px 20px 20px;background:#fff;} .baro_wrap h1 {display:block;width:156px;height:18px;text-indent:-9999px;background:url("/subscribe/images/dlb/baro_meter/logo.png") no-repeat 0 0;background-size:contain;} .baro_wrap .evt_guide_btn{position: absolute;width: 86px;padding: 4px 8px;background-color: #fff;border: 1px solid #ddd;box-shadow: none;font-size: 12px;color: #999;overflow: visible;cursor: pointer;border-radius: 15px;top: 14px;right: 14px;} .baro_wrap .cont {margin:5px 0 0;padding:20px 20px 0;} .baro_wrap .cont .num_ins {margin-top:-26px;} .baro_wrap .cont .num_ins.bx_valid {margin-bottom:0} .baro_wrap .cont.info_fix {margin-top:40px;} .baro_wrap .dlp_txt {margin-bottom:10px;color:#999;font-size:14px;font-weight:bold;line-height:1.6;} .baro_wrap .ques {color:#000;font-size:27px;font-weight:bold;line-height:1.4;} .baro_wrap .mbti_q_tit {padding-top:30px;} .baro_wrap .mbti_q_tit .ques {position:relative;padding-top:33px;} .baro_wrap .mbti_q_tit .ques:before {position:absolute;content:"Q.";top:0;left:0;display:inline-block;font-size:27px;font-weight:normal;} .baro_wrap .cont .ques02 {color:#000;font-size:27px;font-weight:normal;line-height:1.6;} .baro_wrap .cont .answer {margin-top:15px;} .baro_wrap .cont .answer + .answer {margin-top:10px;} .baro_wrap .cont .answer.tel {display:flex;justify-content:space-between;} /* .baro_wrap .cont .group .input_box.phone input {padding-bottom:0;} */ .baro_wrap .cont input {width:100%;color:#000;font-size:16px;font-weight:bold;line-height:25px;border-bottom:2px solid #000;} .baro_wrap .cont .group .bar:after, .baro_wrap .cont .group .bar:before {bottom:-1px} .baro_wrap .cont input::placeholder {color:#aaa;} .baro_wrap .cont .phone input:focus {border-bottom:2px solid #005baf;} .baro_wrap .cont .selectbx {border-bottom:2px solid #000;} .baro_wrap .selectbx .select_list.more {width:300% !important;} /* .baro_wrap .grouping .group {margin-top:0 !important;} .baro_wrap .bx_valid .grouping .dash {height:25px;} */ .baro_wrap .answer.tel .phone_sel {position:relative;width:35%;} .baro_wrap .phone_sel .selectbx .select_list {left:0 !important;} .baro_wrap .selectbx .select_list li a, .baro_wrap .selectbx .select_list li span {font-size:14px;} .baro_wrap .answer.tel .phone {margin-left:auto;width:60%;} .baro_wrap .answer.tel .phone .txt_error {margin-top:0 !important} .baro_wrap .tel_comm .target {position:relative;display:inline-block;width:100%;color:#000;font-size:16px;font-weight:bold;line-height:2.4;} .baro_wrap .tel_comm .target:after {position:absolute;content:"";right:0;top:13px;width:11px;height:8px;background:url("/subscribe/images/dlb/baro_meter/icon_sel_arrow.png") no-repeat 0 0;background-size:100%;} .baro_wrap .tel_comm .tel_list {display:none;position:absolute;top:38px;width:130%;height:auto;border:1px solid #aaa;z-index:10;background:#fff;} .baro_wrap .tel_comm .tel_list.on {display:block;} .baro_wrap .tel_comm .tel_list li {padding:2px;border-top:1px solid #aaa;} .baro_wrap .agree_box {margin:20px 20px 0;padding:3px 20px 20px;border-radius:8px;background:#f4f4f4} .baro_wrap .agree_box ul {margin-top:15px;} .baro_wrap .agree_box li {display:flex;margin-top:3px;line-height:1.6;} .baro_wrap .agree_box li:first-child {margin-top:0;} .baro_wrap .agree_box li span {flex:3;} .baro_wrap .agree_box .input_check {position:relative;} .baro_wrap .agree_box .input_check input[type="checkbox"] {position:absolute;top:0;left:0;opacity:0;} .baro_wrap .agree_box .input_check input[type="checkbox"] + label:before {display:block;top:5px;left:0;position:absolute;content:"";width:18px;height:18px;background:url("/subscribe/images/dlb/baro_meter/img_checkbox.png") no-repeat 0 -18px;background-size:100%;} .baro_wrap .agree_box .input_check input[type="checkbox"]:checked + label:before {background-position:0 top;} .baro_wrap .agree_box li label {display:inline-block;padding-left:28px;} .baro_wrap .agree_box li .txt_view {width:7px;height:12px;margin:7px 0 0 auto;text-indent:-9999px;background:url("/subscribe/images/dlb/baro_meter/icon_arrow.png") no-repeat 0 0;background-size:contain;} .baro_wrap .btn_agree a {display:block;margin-top:17px;width:100%;height:48px;text-align:center;color:#02a7c5;font-size:16px;line-height:48px;border-radius:8px;border:1px solid #02a7c5;background:#fff;} .baro_wrap .btn_agree.on a {color:#999;border-color:#aaa;} .baro_wrap .agree_info {padding-top:4px;} .baro_wrap .agree_info li {position:relative;color:#999;margin-top:8px;padding-left:10px;font-size:14px;line-height:1.8;} .baro_wrap .agree_info li:before {position:absolute;display:inline-block;width:3px;height:3px;content:"";left:0;top:10px;border-radius:50%;background:#aaa;} .baro_wrap .sub_tit:before {display:none;} .baro_wrap .container_body {margin:20px 0 0;} .baro_wrap #pop_wrap #pop_content .pop_content_inner {padding-bottom:0;} .baro_wrap .input_checkbox.on input[type=checkbox]+label:before{background: url(/subscribe/images/dlb/baro_meter/agree_pop_check.png) left top no-repeat;background-size: 18px 18px;} .mbti_subcont .header{height: 58px;padding: 16px 0 20px 20px;border-bottom: 1px solid #eee;box-sizing: border-box;background-color: #fff;} .mbti_subcont .header img{width: 142px;height: 18px;} /* .mbti_subcont .product_layer_tab{position: static;} */ .mbti_subcont .product_layer_tab.basic li a {background: #aaa;color: #fff;font-size:18px;font-weight:bold;height: 60px;display:flex;align-items:center;justify-content: center;line-height: 1;} .mbti_subcont .product_layer_tab.basic li a.on{background: #02a7c5;} .mbti_subcont .product_layer_tab.basic li span {display: inline-block;position: relative;padding-right: 20px;} .mbti_subcont .product_layer_tab.basic li span:after { display: inline-block;content: ''; width:9px;height: 18px; position: absolute;right:0;top:48%; background:url("/subscribe/images/dlb/baro_meter/ico_arr_01.png") no-repeat 0 center;background-size:contain; transform: translateY(-50%); } .mbti_subcont .conts{padding: 0;} .mbti_subcont .conts .product_wrap{padding: 0;} .mbti_slide_con .mbti_intro_img{width: 30%;padding-left: 10%;margin-top: 30px;} .mbti_slide_con .mbti_intro_cont{padding-left: 10%;margin-top: 25px;} .mbti_slide_con h2{font-size: 27px;font-weight: bold;color: #000;} .mbti_slide_con .mbti_intro_cont p{margin-top: 25px;font-size: 14px;color: #999;} .mbti_subcont .product_layer_tab.basic li a span{line-height: 60px;} .mbti_q_tit{padding:0 10% 25px;background-color: #fff;} .mbti_q_cont{background-color: #f4f4f4;padding: 30px 5% 75px 5%;min-height:500px;} .mbti_q_cont ul li{text-align: center;color: #555;background-color: #fff;border: 1px solid #ddd;font-size: 18px;padding: 20px 0;border-radius: 30px;margin-bottom: 15px;} .mbti_q_cont ul li.on{color: #fff;background-color: #3c454e;border: 1px solid #3c454e;box-sizing: border-box;} .mbti_q_cont .spec {color:#ef3924;font-size:12px;} .mbti_page{font-size: 18px;position:absolute;background-color: #fff;right:10%;top:36px;z-index:10;} .mbti_page span{color: #02a7c5;} .baro_wrap footer {position:fixed;width:100%;bottom:0;z-index:100;} .baro_wrap footer .btn a {width:100%;height:60px;color:#fff;font-weight:bold;font-size:18px;background:#aaa;display:flex;align-items:center;justify-content: center;line-height: 1;} .baro_wrap footer .btn a.on {background:#02a7c5;} .baro_wrap footer .btn span {display: inline-block;position: relative;padding-right: 20px;} .baro_wrap footer .btn span:after { display: inline-block;content: ''; width:9px;height: 18px; position: absolute;right:0;top:50%; background:url("/subscribe/images/dlb/baro_meter/ico_arr_01.png") no-repeat 0 center;background-size:contain; transform: translateY(-50%); } .dimm.light {opacity: .4 !important;} .baro_wrap .intro_img {width:100%;height:100%;background:url("/subscribe/images/dlb/baro_meter/bg_intro.png") no-repeat 0 0;background-size:100%;} .baro_wrap .intro_img .swiper-container {height:100%;padding:78px 20px 0;} .baro_wrap .intro_img .swiper-container .swiper-wrapper .swiper-slide p:last-child {height:100%;text-align: center;font-size: 14px;color:#999;padding-top: 20px;} .baro_wrap .group .transkey_div {position:absolute;right:-14% !important} /* 설문결과 */ /* font */ @font-face { font-family: 'DOhyeon'; font-style: normal; font-weight: normal; src: url('/subscribe/font/BMDoHyeon.eot'); src: url('/subscribe/font/BMDoHyeon.eot?#iefix') format('embedded-opentype'), url('/subscribe/font/BMDoHyeon.woff') format('woff'), url('/subscribe/font/BMDOHYEON_ttf_0.ttf') format('truetype'); } .cont.meter_result {margin:0;padding:0;} .baro_wrap .cont.meter_result img {vertical-align:top;} /* .meter_result .meter_box {width:100%;background:url("/subscribe/images/dlb/baro_meter/bg_type_mid.png") repeat-y 0 50%;background-size:contain;} */ .meter_result .meter_box_mid {background:url("/subscribe/images/dlb/baro_meter/bg_type_top.png") no-repeat 0 bottom;background-size:cover;} .meter_result .meter_box .meter_box_inner {padding:30px 40px 45px;} .meter_box_inner .tits {display:flex;} .meter_box_inner li {flex:none;margin-right:10px;height:25px;color:#02a7c5;font-size:12px;line-height:25px;letter-spacing:0;} .meter_box_inner .tits .type01 {padding:0 6px;border:1px solid #02a7c5;border-radius:5px;height:23px;line-height:23px;} .meter_box_inner .txt {margin-top:12px;color:#fff;font-family:"DOhyeon";font-size:23px;line-height:1.6;} .meter_box_inner .txt span {position:relative;padding:4px 0 0;display:inline;color:#062a3a;z-index:10;background:#ff3e41;} .meter_box_inner .img_box {margin-top:30px;} .meter_box_inner .txt_result {margin-top:30px;color:#fff;font-size:16px;line-height:1.6;} .meter_result .port_box {width:100%;background:url("/subscribe/images/dlb/baro_meter/bg_result_mid.png") repeat-y 0 50%;background-size:contain;} .meter_result .port_box_mid {background:url("/subscribe/images/dlb/baro_meter/bg_result_btm_02.png") no-repeat 0 bottom;background-size:contain;} .meter_result .port_box .port_box_inner {padding:35px 0px 4px;background:url("/subscribe/images/dlb/baro_meter/bg_result_top.png") no-repeat 0 top;background-size:contain;margin-top: -1px;} .port_box_inner .tits {margin:0;font-family:"DOhyeon";font-size:25px;line-height:1.4;padding: 0 40px;} .port_box_inner .txt {position:relative;display:inline-block;margin: 25px 0 0 40px;color:#000;font-size:20px;font-weight:bold;z-index:10;} .port_box_inner .txt:after {position:absolute;width:100%;height:12px;content:"";left:0px;bottom:0;background:#ffdae5;z-index:-1;} .port_box_inner .insur_box {margin-top:21px;padding: 0 40px;} .port_box_inner .insur_box .insur {position:relative;padding-left:24px;color:#02a7c5;font-weight:bold;} .port_box_inner .insur_box .insur:after {position:absolute;display:block;content:"";left:0;top:3px;background:url("/subscribe/images/dlb/baro_meter/icon_insure_sprite.png");background-size: 20px 160px;width:20px;height:18px;} .port_box_inner .insur_box .insur.ty01:after {background-position:0px 0px;} .port_box_inner .insur_box .insur.ty02:after {background-position:0px -20px;} .port_box_inner .insur_box .insur.ty03:after {background-position:0px -40px;} .port_box_inner .insur_box .insur.ty04:after {background-position:0px -60px;} .port_box_inner .insur_box .insur.ty05:after {background-position:0px -80px;} .port_box_inner .insur_box .insur.ty06:after {background-position:0px -100px;} .port_box_inner .insur_box .insur.ty07:after {background-position:0px -120px;} .port_box_inner .insur_box .insur.ty08:after {background-position:0px -140px;} .port_box_inner .insur_box .insur span {position:absolute;right:18px;top:4px;color:#555;font-size:12px;font-weight:normal;} .port_box_inner .insur_box .price {margin-top:10px;border:1px solid #49545f;border-radius:10px;} .port_box_inner .insur_box .price table {width:100%;} .port_box_inner .insur_box .price tr:first-child td:nth-child(2) {padding:10px 15px 0 0;text-align:right;background:#f5f5f5;border-radius:0 10px 0 0;} .port_box_inner .insur_box .price tr:first-child td:nth-child(1) {padding:10px 0 0 17px;} .port_box_inner .insur_box .price td {padding:5px 0 12px 17px;color:#555;font-size:13px;font-weight:bold;text-align:left;} .port_box_inner .insur_box .price td:nth-child(2) {padding:5px 15px 12px 0;text-align:right;background:#f5f5f5;border-radius:0 0 10px 0;} .baro_insur_caution{font-size: 12px!important;color: #333;line-height: 19px;margin-top: 10px;padding: 0 40px;} .baro_sns_share_box{background-color: #eee;padding: 30px 30px;margin: 0 5.6% 0 5.5%;} .baro_sns_share_box p{font-weight: bold;font-size: 16px;text-align: center;color: #333;padding-bottom: 20px;} .baro_sns_share_box ul li{float: left;width: 33%;text-align: center;} .baro_sns_share_box ul li img{width: 44%;} .baro_insur_diag_box{width: 100%;padding-bottom: 40px;background-color: #000;} .baro_insur_diag_box.modifyStyle .flex_inline { display: flex;} .baro_insur_diag_box.modifyStyle .flex_inline .baro_bx_name { float: initial; flex: 1; width: auto;} .baro_insur_diag_box.modifyStyle .flex_inline .baro_bx_birth { width: 120px;} .baro_insur_diag_box.modifyStyle .flex_inline .baro_bx_birth .chk_wrap { display: flex;} .baro_insur_diag_box.modifyStyle .baro_insur_diag_btn { position: initial; width: initial; padding: 0 40px;} .baro_insur_tab{padding: 0 5.5%;background: url(/subscribe/images/dlb/baro_meter/bg_result_mid_02.png) no-repeat 0 top;background-size: cover;} .baro_insur_tab li{float: left;font-family: "DOhyeon";font-size: 18px;text-align: center;width: 50%;padding: 20px 0;color: #fff;background-color: #aaa;} .baro_insur_tab li.on{color: #333;background-color: #fff;} .baro_insur_diag_box_inner{background: url(/subscribe/images/dlb/baro_meter/bg_result_btm.png) no-repeat 0 bottom;background-size: contain;padding-bottom: 5px;} .baro_insur_diag_box_inner .baro_diag_cont{background: url(/subscribe/images/dlb/baro_meter/bg_result_mid.png) repeat-y 0 50%;background-size: contain;padding: 30px 0;position: relative;} .baro_insur_diag_box_inner .baro_diag_cont{display: none;} .baro_insur_diag_box_inner .baro_diag_cont.on{display: block;} .baro_diag_cont .baro_diag_bg{text-align: center;padding-top: 100px;} .baro_diag_cont .baro_diag_bg img{width: 78%;} .baro_diag_cont .baro_diag_main_img{position: absolute;top: 0;left: 0;width: 100%;opacity:1;} .baro_diag_cont .baro_diag_main_img.on{animation: baro_diag_main_ani 2s forwards;} .baro_diag_cont .baro_diag_effect{position: absolute;top: 0;left: 0;width: 90%;margin-left: 5.5%;opacity:1;} .baro_diag_cont .baro_diag_effect.on{animation: baro_diag_effect_ani 0.2s forwards 2s;} .baro_diag_cont_inner{padding: 0 11%;margin-bottom: 60px;position: relative;} .baro_diag_cont_inner .baro_diag_txt{position: absolute;z-index: 1;} .baro_diag_cont_inner .baro_diag_txt h4{position: relative;font-weight: bold;font-size: 18px;letter-spacing: -2px;margin-bottom: 15px;z-index: 1;} .baro_diag_cont_inner .baro_diag_txt h4:after{content: '';position: absolute;width: 100%;height: 13px;background-color: #ffdae5;z-index: -1;bottom: 0;left: 0;} .baro_diag_cont_inner .baro_diag_txt p{color: #555;line-height: 1.6;} .baro_diag_cont_inner .baro_diag_txt p span{font-weight: bold;} .barometer_insur_diag_agree_cont{position: relative;} .barometer_insur_diag_agree_cont .input_checkbox {display: flex;align-items: center;} .barometer_insur_diag_agree_cont .input_checkbox > a {transform: rotate(-90deg);margin-left: 15px;width: 20px;height: 20px;display: flex;justify-content: center;align-items: center;} .barometer_insur_diag_agree_cont .input_checkbox > a img {width: 12px;} .barometer_insur_diag_agree_cont .input_checkbox input[type=checkbox]+label:before {top: 0;} .barometer_insur_diag_agree_cont .input_checkbox input[type=checkbox]+label em{top: 0;} .barometer_insur_diag_agree_cont em{font-size: 14px;color: #555;} .baro_insur_diag_btn{position: absolute;bottom: -1px;width: 89%;padding: 0 5.5%;} @-webkit-keyframes rippleDrop{100%{width:100%;border-radius:0;background:#de4738;opacity:1} } @keyframes rippleDrop{100%{width:100%;border-radius:0;background:#de4738;opacity:1} } .baro_insur_diag_btn ul li{text-align: center;} .baro_insur_diag_btn ul li .f_btn{display: block;background: #0096af;height: 60px;color: #fff;font-weight: 700;} .baro_insur_diag_btn.baro_insur_ani ul li .f_btn{background: #aaa;} .baro_insur_diag_btn.baro_insur_ani ul li.on .f_btn{ background: #0096af; -webkit-animation:rippleDrop .4s cubic-bezier(1,.03,.46,.98); animation:rippleDrop .4s cubic-bezier(1,.03,.46,.98); -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards} .baro_insur_diag_btn ul li .f_btn span{line-height: 60px;padding: 0 35px 0 20px;display: inline;position: relative;font-size: 18px;} .baro_insur_diag_btn ul li .f_btn span:after{position: absolute;top: 2px;right: 15px;z-index: 10;width: 9px;height: 15px;background: url(/subscribe/images/dlb/baro_meter/baro_ico_arrow.png) no-repeat;background-size: 9px 15px;content: "";} /* 결과확인 개인정보동의 팝업 */ .barometer_agree_pop{position: fixed;bottom: 0;width:100%;min-height: 320px;padding-top: 40px;border-radius: 15px;z-index: 105;background-color: #fff;} #wrap_mobile_product #container .barometer_agree_pop .contents{padding: 0 20px;} .barometer_agree_pop .contents .barometer_tit{padding:0 20px;font-size: 25px;letter-spacing: -2px;} .barometer_agree_pop .contents .barometer_sub_tit{font-size: 16px;color: #999;padding: 20px 20px 0;letter-spacing: -1.5px;} .barometer_agree_pop .barometer_agree_btn_area{width: 100%;position: absolute;bottom: 0;} .barometer_agree_pop .barometer_agree_btn_area ul{display: flex;height: 60px;} .barometer_agree_pop .barometer_agree_btn_area ul li{ flex:3; background-color: #02a7c5;color: #fff; font-size: 18px;font-weight: bold; display: flex; justify-content: center; align-items: center; } .barometer_agree_pop .barometer_agree_btn_area ul li:first-child{flex:2;background-color: #aaa;color: #fff;} .barometer_agree_pop .barometer_agree_btn_area ul li:last-child{background-color: #ccc;pointer-events: none;} .barometer_agree_pop .barometer_agree_btn_area ul li:last-child.on{background-color: #02a7c5;pointer-events: all;} .barometer_agree_pop .barometer_agree_btn_area ul li span {display: inline-block;position: relative;padding-right: 20px;} .barometer_agree_pop .barometer_agree_btn_area ul li span:after { display: inline-block;content: ''; width:9px;height: 18px; position: absolute;right:0;top:50%; background:url("/subscribe/images/dlb/baro_meter/ico_arr_01.png") no-repeat 0 center;background-size:contain; transform: translateY(-50%); } .barometer_agree_pop .barometer_pop_close{position: absolute;top: 20px;right: 0;padding-right: 20px;} .barometer_agree_pop .barometer_pop_close span{width: 20px;height: 20px;background: url(/subscribe/images/dlb/baro_meter/agree_pop_close.png) no-repeat;display: block;text-indent: -999em;background-size: 20px 20px;} .barometer_agree_pop .contents .barometer_agree_cont{position: relative;background-color: #f4f4f4;padding: 20px 10px 12px 20px;margin-top: 30px;border-radius: 8px;transition: all 0.2s} .barometer_agree_pop .contents .barometer_agree_cont .input_checkbox{display: block;position: relative;} .barometer_agree_pop .contents .barometer_agree_cont .input_checkbox label em strong{position:absolute;top:-5px;color: #555;white-space:nowrap;} .barometer_agree_pop .contents .barometer_agree_cont .input_checkbox:before {content: "";position:absolute;background: url(/subscribe/images/dlb/baro_meter/agree_pop_arrow.png) no-repeat;background-size: 12px 7px;width: 12px;height: 7px;right: 0;top: 3px;} .barometer_agree_pop .contents .barometer_agree_cont .input_checkbox.on:before {transform: rotate(180deg)} .barometer_agree_pop .contents .barometer_agree_cont .barometer_agree_detail{display: none;font-size: 12px;color: #999;margin-top: 20px;overflow-y: scroll;height: 100px;} .barometer_agree_pop .contents .barometer_agree_cont .barometer_agree_detail dl{line-height: 1.6;padding-right: 10px;} .barometer_agree_pop .contents .barometer_agree_cont .barometer_agree_detail dl dd{position: relative;margin-left: 7px;} .barometer_agree_pop .contents .barometer_agree_cont .barometer_agree_detail dl dd:before{content: "*";position: absolute;left: -7px;top: 3px;} .barometer_agree_pop .contents .barometer_agree_cont .barometer_agree_detail dl dd:last-child{margin-left: 0;margin-left: 10px;} .barometer_agree_pop .contents .barometer_agree_cont .barometer_agree_detail dl dd:last-child:before{content: "※";left: -10px;top: 1px;} .barometer_agree_pop .contents .input_checkbox input[type=checkbox]+label:before{display:block;position:absolute;top:-4px;left:0;width:18px;height:18px;background:url(/subscribe/images/dlb/baro_meter/img_checkbox.png) no-repeat 0 -18px;background-size:100%;content:"";} .barometer_agree_pop .contents .input_checkbox.on input[type=checkbox]+label:before{display:block;position:absolute;top:-4px;left:0;width:18px;height:18px;background:url(/subscribe/images/dlb/baro_meter/agree_pop_check.png) left top no-repeat;background-size:18px 18px;content:"";} .barometer_agree_pop.etcStyle { min-height: 340px;} .barometer_agree_pop.etcStyle .barometer_agree_cont { height: auto !important;} /* 2000922 : KSH : 바로미터 결과 페이지 */ /* 공통 */ #barometer_result .header{padding:18px 20px 20px;background:#fff;} #barometer_result h1{display:block;width:156px;height:18px;text-indent:-9999px;background:url("/subscribe/images/dlb/baro_meter/logo.png") no-repeat 0 0;background-size:contain;} #barometer_result #footer {margin: 40px 0 0;padding: 15px 0 20px 15px;background-color: #f4f4f4;} .barometer_result_con {padding:100px 0 0;} div[class^="barometer_tab"] {position:relative; min-width:330px; margin:0 auto; background:#fff;} /* div.on[class^="barometer_tab"]{display: block;} */ .barometer_result_con h3 {font-size:17px; color:#fff; font-weight:700; line-height:60px; text-align:center;} .barometer_result_con h3 span {position:relative;} .barometer_result_con h3 span:after {content:''; display:block; clear:both; position:absolute; left:50%; bottom:-4px; margin -left:-50%; width:100%; height:1px; background:#fff;} .barometer_content {position:relative;box-sizing:border-box; background:#fff;} .barometer_content h4 {font-size:27px;letter-spacing:-0.1em;padding:0 5px;} .barometer_content .diag_detail h4{padding: 0 5%;} .barometer_content .diag_detail h4 span.sm_txt_gray{font-size: 16px;color: #999;} .barometer_content .baro_recomm_box{margin-top: 60px;position: relative;} .barometer_content .baro_recomm_box a .baro_recomm_ani{position: absolute;width: 25%;top: 4%;left: 5%;animation: baroRecommBalloon_01 1s infinite linear alternate;} .barometer_content .baro_recomm_box a img{vertical-align: top;margin-top: -1px;} @keyframes baroRecommBalloon_01{ 0%{ opacity: 0.25; } 100%{opacity: 1;} } /* 탭메뉴 */ .barometer_result_cont .barometer_nav { position:fixed; left:0; top:57px; z-index:100; width:100%;font-size:15px; background:#f4f4f4;transition: top 0.1s ease-in; display: flex; justify-content: space-between; } .barometer_result_cont .barometer_nav:after {content:''; display:block; clear:both;} .barometer_result_cont .barometer_nav li {flex:1;position:relative;height:60px;} .barometer_result_cont .barometer_nav li a {display:block; box-sizing:border-box; padding:0; line-height:60px; text-align:center; color:#aaa;} .barometer_result_cont .barometer_nav li.on a {color:#000;font-weight: 700;} .barometer_result_cont .barometer_nav li.on:after{content: '';position: absolute;width: 60%;height: 2px;bottom: 0;background-color: #000;margin-left: 50%;transform: translate(-50%);} .barometer_result_cont .barometer_nav .push_product span {position:relative;} .barometer_result_cont .barometer_nav .push_product.on span:before {background:#fff;} /* 제목 색조정 */ #barometer_result .barometer_tab01 .barometer_content h4 > span.tit_badge {display:block;width: 97px;height:25px;line-height: 25px;box-sizing:border-box;border: 1px solid #02a7c5;font-size: 12px;letter-spacing: -2px;color: #02a7c5;text-align: center;border-radius: 4px;margin-bottom: 10px;} #barometer_result .barometer_tab03 .barometer_content h4 > span {display:inline-block; height:32px; line-height:32px; border-bottom:solid 10px #b9f4ff; box-sizing:border-box;} #barometer_result .barometer_tab04 .barometer_content h4 > span span {display:inline-block; height:32px; line-height:32px; border-bottom:solid 10px #ffc8c8; box-sizing:border-box;} /* 보험진단 */ .barometer_result_con .insur_dia h4 {padding-left:10%;} .barometer_result_con .insur_dia_con {padding:0 10%;} .barometer_result_con .insur_dia .result_score {position:relative; margin:10px 0 20px;} .barometer_result_con .insur_dia .warranty_class {width:65%; margin:15px auto 10px; text-align:left;} .barometer_result_con .insur_dia .warranty_class li {padding-left:30px; background-position:0 center; background-size:19px 19px; background-repeat:no-repeat; margin:5px 0; font-size:15px; letter-spacing:-0.05em;} .barometer_result_con .insur_dia .warranty_class li:nth-of-type(1) {margin:0 0 5px;background-image:url("/subscribe/images/dlb/gurtanly/ico_enough_guarantee.png");} .barometer_result_con .insur_dia .warranty_class li:nth-of-type(2) {background-image:url("/subscribe/images/dlb/gurtanly/ico_dont_guarantee.png");} .barometer_result_con .insur_dia .warranty_class li:nth-of-type(3) {background-image:url("/subscribe/images/dlb/gurtanly/ico_overlap_guarantee.png");} .barometer_result_con .insur_dia .warranty_class li span {float:right;} .barometer_result_con .insur_dia .warranty_class li em {font-size:16px;} .barometer_result_con .insur_dia .warranty_class li:nth-of-type(2) em, .barometer_result_con .insur_dia .warranty_class li:nth-of-type(3) em {color:#ec4245;} .barometer_result_con .insur_dia .warranty_class+p {width:65%; margin:10px auto 0; font-size:13px; color:#888; text-align:right;} /* 6가지 위험 보장 현황 */ .barometer_result_con .insur_dia .risks_status {} .barometer_result_con .insur_dia .risks_status strong {display:block; line-height:40px; background:#49545f; font-size:16px; color:#fff; text-align:center; border-radius:9px 9px 0 0; font-weight:400;} .barometer_result_con .insur_dia .risks_status strong em {color:#fefdb8;} .barometer_result_con .insur_dia .risks_status ul {padding:25px 8%; margin:0 auto; border-radius:0 0 9px 9px; border-width:1px; border-style:solid; border-color:#49545f;} .barometer_result_con .insur_dia .risks_status ul > li {margin:15px 0; font-size:15px; color:#666;} .barometer_result_con .insur_dia .risks_status ul > li:first-child {margin:0 0 15px;} .barometer_result_con .insur_dia .risks_status ul > li:last-child {margin:15px 0 0} .barometer_result_con .insur_dia .risks_status ul > .lack {color:#ec4245;} .barometer_result_con .insur_dia .risks_status ul > li > dl {} .barometer_result_con .insur_dia .risks_status ul > li > dl:after {content:''; display:block; clear:both;} .barometer_result_con .insur_dia .risks_status ul > li dt {position:relative; float:left; width:50%;} .barometer_result_con .insur_dia .risks_status ul > .lack dt:after {content:'부족'; display:inline-block; clear:both; position:absolute; top:50%; width:26px; height:16px; font-size:11px; margin:-8px 0 3px 5px; background-color:#ec4245; color:#fff; text-align:center; text-indent:-2px; border-radius:2px 2px 2px 2px; line-height:16px;} .barometer_result_con .insur_dia .risks_status ul > li dd {float:right; width:50%; position:relative; line-height:21px;} .barometer_result_con .insur_dia .risks_status ul > li dd > span {text-align: right; display: inline-block; width: 24%; margin-right:10%;} .barometer_result_con .insur_dia .risks_status ul > li dd .graph_wrap {position:absolute; left:30%; top:0; width:70%; height:21px;} .barometer_result_con .insur_dia .risks_help {margin:12px 2% 40px;} .barometer_result_con .insur_dia .risks_help:after {content:''; display:block; clear:both;} .barometer_result_con .insur_dia .risks_help p {font-size:12px; color:#666; line-height:22px;} .barometer_result_con .insur_dia .risks_help p:first-child {float:left; width:50%;} .barometer_result_con .insur_dia .risks_help p+p {float:right; width:50%; position:relative; text-align:right;} .barometer_result_con .insur_dia .risks_help p+p a {position:relative; display:block; line-height:22px; padding-right:20px;} .barometer_result_con .insur_dia .risks_help p+p a:after {content:''; position:absolute; display:block; right:0; top:50%; margin-top:-9px; width:17px; height:17px; background:url("/subscribe/images/dlb/gurtanly/ico_risks_help_pop.png") 0 0 no-repeat; background-size:17px 17px;} .barometer_result_con .insur_dia .risks_help p+p span {position:absolute; left:0; top:0; width:1px; height:1px; text-indent:-9999px; overflow:hidden;} /* 6가지 위험 보장 현황 */ .barometer_result_con .insur_dia .grap_hori {position:relative; width:100%; height:21px; border-radius:30px; box-sizing:border-box; background:#eee;} .barometer_result_con .insur_dia .grap_hori .inner_grap {position:absolute; width:0; height:21px; border-radius:30px; box-sizing:border-box; transition:all 1s ease;} .barometer_result_con .insur_dia .grap_hori .inner_grap span {position:absolute; right:0; top:0; transform:translateY(-100%) translateX(50%); transition:all 1s; transition-delay:1s; font-size:14px;} .barometer_result_con .insur_dia .lack .inner_grap {color:#ec4245;background:#ec4245;} .barometer_result_con .insur_dia .inner_grap {color:#02a7c5;background:#02a7c5;} /* 진단상세 */ .barometer_result_cont .ios_scroll_auto {overflow:scroll; -webkit-overflow-scrolling:auto !important;} .barometer_result_cont .scrT_chk {position:fixed; right:0; top:0; width:1px; top:1px; z-index:-1;} .barometer_result_cont .diag_detail {} .barometer_result_cont .diag_detail h4 {padding:0 10%;} .barometer_result_cont .diag_detail h4 .sm_txt_gray{color: #999;font-size: 16px;} .barometer_result_cont .diag_cont{padding: 0 6%;} .barometer_result_cont .diag_cont > li {margin:50px 0;} .barometer_result_cont .diag_cont > li:first-child {margin:37px 0;} .barometer_result_cont .diag_cont > li:last-child {margin:50px 0 0;} .barometer_result_cont .diag_cont .diag_banner {padding:0; margin:50px 0;} .barometer_result_cont .diag_cont > li .detail_txt {padding:0; margin:0 5%;} .barometer_result_cont .diag_cont > li .detail_txt .detail_tit {margin:45px 0 15px; display:flex; align-items:center; justify-content:space-between;} .barometer_result_cont .diag_cont > li .detail_txt .detail_tit:after {content:''; display:block; clear:both;} .barometer_result_cont .diag_cont > li .detail_txt .detail_tit dt {display:flex; align-items:center; width:70%; font-size:20px; line-height:1.5em; color:#385087; font-weight:700; box-sizing:border-box;} .barometer_result_cont .diag_cont .detail_txt .detail_tit dt .ico_lack {font-style:normal; margin-left:5px; width:30px; height:18px; font-size:12px; line-height:18px; background-color:#ec4245; color:#fff; text-indent:-2px; text-align:center; border-radius:2px 2px 2px 2px;} .barometer_result_cont .diag_cont > li .detail_txt .detail_tit dd {float:right; width:85px; min-width:85px; font-size:15px; text-align:right; color:#395086;} .barometer_result_cont .diag_cont > li .detail_txt .detail_tit dd em {font-size:33px; font-weight:700; padding-right:5px;} .barometer_result_cont .diag_cont > li .detail_txt p {font-size:15px; color:#666;} .barometer_result_cont .diag_cont > li .detail_txt .detail_aver {position:relative; margin-top:5px; padding-left:12px; font-size:13px; color:#888; } .barometer_result_cont .diag_cont > li .detail_txt .detail_aver:before {content:'＊'; display:block; position:absolute; left:0;} .barometer_result_cont .diag_cont > li .cost_analy {padding:0 5%; margin:40px 0 50px;} .barometer_result_cont .diag_cont > li .cost_analy .cost_grap li {margin-top:30px;} .barometer_result_cont .diag_cont > li .cost_analy .cost_grap li:first-child {margin:0} .barometer_result_cont .diag_cont > li .cost_analy .cost_grap dl dt:after , .barometer_result_cont .diag_cont > li .cost_analy .cost_grap dl dd:after {content:''; display:block; clear:both;} .barometer_result_cont .diag_cont > li .cost_analy .cost_grap dl dt strong {display:block; float:left; width:55%; font-size:15px; font-weight:700; color:#333;} .barometer_result_cont .diag_cont > li .cost_analy .cost_grap dl dt span {display:block; float:right; width:45%; font-size:14px; text-align:right;} .barometer_result_cont .diag_cont > li .cost_analy .cost_grap .lack dt span {color:#ec4245;} .barometer_result_cont .diag_cont > li .cost_analy .cost_grap .enough dt span {color:#02a7c5;} .barometer_result_cont .diag_cont > li .cost_analy .cost_grap .cost_grap_insuran {display:block; float:left; width:50%; font-size:11px; color:#333;} .barometer_result_cont .diag_cont > li .cost_analy .cost_grap .cost_grap_recomm {display:block; float:right; width:50%; font-size:11px; color:#888; text-align:right;} .barometer_result_cont .diag_cont > li .cost_analy .cost_list {} .barometer_result_cont .diag_cont > li .cost_analy .cost_list li {margin:50px 0;} .barometer_result_cont .diag_cont > li .cost_analy .cost_list li:first-child {margin:0 0 50px;} .barometer_result_cont .diag_cont > li .cost_analy .cost_list dl:after {content:''; display:block; clear:both;} .barometer_result_cont .diag_cont > li .cost_analy .cost_list dl dt {float:left; width:50%;} .barometer_result_cont .diag_cont > li .cost_analy .cost_list dl dt strong {font-size:15px; font-weight:700; color:#333; line-height:22px;} .barometer_result_cont .diag_cont > li .cost_analy .cost_list dl dd {float:left; width:50%; text-align:right; font-size:14px; font-weight:700; color:#333; line-height:22px;} .barometer_result_cont .diag_cont > li .cost_analy .cost_list dl dd .enough {color:#02a7c5;} .barometer_result_cont .diag_cont > li .cost_analy .cost_list dl dd .lack {color:#ec4245;} .barometer_result_cont .diag_cont > li .cost_analy .cost_list dl dd em {font-weight:700;} .barometer_result_cont .diag_cont > li .cost_analy .cost_list dl .cost_sublist {font-size:14px; font-weight:700; color:#333;} .barometer_result_cont .diag_cont > li .cost_analy .cost_list dl .cost_sublist:before {content:'-'; display:inline; clear:both;} .barometer_result_cont .diag_cont > li div a img{border-radius: 8px;} /* 진단상세 - 뇌혈관질환 */ .barometer_result_cont .diag_cont > .adult_dis .detail_txt .detail_tit {margin:30px 0 15px;} .barometer_result_cont .diag_cont .detail_txt .detail_tit dt i:first-child {margin-right:5px; min-width:34px;} .barometer_result_cont .diag_cont .detail_txt .detail_tit dt .ico_adult_dis {display:block; width:34px; height:34px; background-position:0 50%; background-size:34px 34px; background-repeat:no-repeat; background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_01.png");} /* 심장질환 */ .barometer_result_cont .diag_cont .detail_txt .detail_tit dt .ico_adult_dis.ty02 {display:block; width:34px; height:34px; background-position:0 50%; background-size:34px 34px; background-repeat:no-repeat; background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_02.png");} /* 진단상세 - 수술비 */ .barometer_result_cont .diag_cont .detail_txt .detail_tit dt .ico_surg_cost {display:block; width:34px; height:34px; background-position:0 50%; background-size:34px 34px; background-repeat:no-repeat; background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_05.png");} /* 입원비 */ .barometer_result_cont .diag_cont .detail_txt .detail_tit dt .ico_surg_cost.ty02 {display:block; width:34px; height:34px; background-position:0 50%; background-size:34px 34px; background-repeat:no-repeat; background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_06.png");} /* 진단상세 - 암 치료비 */ .barometer_result_cont .diag_cont .detail_txt .detail_tit dt .ico_cancer_cure {display:block; width:34px; height:34px; background-position:0 50%; background-size:34px 34px; background-repeat:no-repeat; background-image:url("/subscribe/images/dlb/gurtanly/ico_cancer_cure_tit.png");} /* 진단상세 - 사망 */ .barometer_result_cont .diag_cont .detail_txt .detail_tit dt .ico_after_death {display:block; width:34px; height:34px; background-position:0 50%; background-size:34px 34px; background-repeat:no-repeat; background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_07.png");} /* 후유장해 */ .barometer_result_cont .diag_cont .detail_txt .detail_tit dt .ico_after_death.ty02 {display:block; width:34px; height:34px; background-position:0 50%; background-size:34px 34px; background-repeat:no-repeat; background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_08.png");} /* 진단상세 - 치아 */ .barometer_result_cont .diag_cont .detail_txt .detail_tit dt .ico_teeth {display:block; width:34px; height:34px; background-position:0 50%; background-size:34px 34px; background-repeat:no-repeat; background-image:url("/subscribe/images/dlb/gurtanly/ico_teeth_tit.png");} /* 진단상세 - 운전·주택 */ .barometer_result_cont .diag_cont .detail_txt .detail_tit dt .ico_drive_house {display:block; width:34px; min-width:34px; height:34px; background-position:0 50%; background-size:34px 34px; background-repeat:no-repeat; background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_10.png");} /* 진단상세 - 실손의료비 */ .barometer_result_cont .diag_cont .detail_txt .detail_tit dt .ico_medical_so {display:block; width:34px; min-width:34px; height:34px; background-position:0 50%; background-size:34px 34px; background-repeat:no-repeat; background-image:url("/subscribe/images/dlb/gurtanly/ico_medical_so_tit.png");} /* 진단상세 - 그래프 */ .barometer_result_cont .diag_detail .grap_hori {position:relative; width:100%; height:20px; margin:25px 0 10px; border-radius:10px; box-sizing:border-box; background:#eee;} .barometer_result_cont .diag_detail .grap_hori .inner_grap {position:absolute; width:0; height:20px; border-radius:12px; box-sizing:border-box; transition:all 1s ease;} .barometer_result_cont .diag_detail .grap_hori .inner_grap span {position:absolute; right:0; top:0; transform:translateY(-100%) translateX(0%); font-size:14px; opacity:0; transition:all 1s;} .barometer_result_cont .diag_detail .on .grap_hori .inner_grap span {opacity:1;} .barometer_result_cont .diag_detail .lack .inner_grap {color:#ec4245;background:#ec4245;} .barometer_result_cont .diag_detail .enough .inner_grap {color:#02a7c5;background:#02a7c5;} /* 가입내역 */ .barometer_tab03 .barometer_content h4 {padding:0 10%;} .barometer_tab03 .barometer_content {} .barometer_tab03 .subscription_top {margin:30px 0 0; padding:0 10% 40px; border-bottom:solid 1px #e5e5e5;} .barometer_tab03 .subscription_top:after {content:''; display:block; clear:both;} .barometer_tab03 .subscription_top dt {display:block; vertical-align:top; width:50%; line-height:40px; box-sizing:border-box; padding-left:38px; font-size:18px; font-weight:800; color:#385087; background-position:0 50%; background-size:34px 34px; background-repeat:no-repeat; letter-spacing:-0.07em; float:left;} .barometer_tab03 .subscription_top dt:nth-of-type(1) {background-image:url("/subscribe/images/dlb/gurtanly/ico_subscription_top_01.png");} .barometer_tab03 .subscription_top dt:nth-of-type(2) {background-image:url("/subscribe/images/dlb/gurtanly/ico_subscription_top_02.png");} .barometer_tab03 .subscription_top dt {} .barometer_tab03 .subscription_top dd {display:block; vertical-align:top; width:48%; text-align:right; float:left;} .barometer_tab03 .subscription_top dd p:first-child {font-size:15px; font-weight:400; color:#395086; line-height:40px;} .barometer_tab03 .subscription_top dd p:first-child em {font-size:28px; padding-right:3px; font-weight:700; color:#395086; vertical-align:middle;} .barometer_tab03 .subscription_top dd p+p {position:relative; top:-7px; font-size:13px; font-weight:400; color:#666;} /* 가입내역 리스트 */ .barometer_tab03 .subscription_list {padding:0 10% 50px;} .barometer_tab03 .subscription_list li {display:block; margin:50px 0 0;} .barometer_tab03 .subscription_list li:first-child {margin:40px 0 0;} .barometer_tab03 .subscription_list li > a {position:relative; display:block;} .barometer_tab03 .subscription_list li > a:after {content:''; display:block; position:absolute; width:30px; height:29px; right:0; top:50%; margin-top:-15px; background:url("/subscribe/images/dlb/gurtanly/ico_subscription_con_btn.png") 0 0 no-repeat; background-size:30px 29px;} .barometer_tab03 .subscription_list li strong {display:block; width:calc(100% - 50px); margin-top:5px; margin-bottom:10px; font-size:15px; font-weight:700; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .barometer_tab03 .subscription_list li p em {display:block; width:100%; font-size:13px; font-weight:700; margin-bottom:5px; color:#333;} .barometer_tab03 .subscription_list li p {display:block; font-size:12px; font-weight:400; color:#888;} .barometer_tab03 .subscription_list li p span {position:relative;} .barometer_tab03 .subscription_list li p > span.ico_effect:before {content:'실효'; display:inline-block; position: relative; top: 0; margin-right:2px; width:30px; height:18px; font-size:12px; line-height:18px; background-color:#999; color:#fff; text-indent:-2px; text-align:center; border-radius:2px 2px 2px 2px;} .barometer_tab03 .subscription_list li p > span:before {content:'정상'; display:inline-block; position: relative; top: 0; margin-right:2px; width:30px; height:18px; font-size:12px; line-height:18px; background-color:#74b944; color:#fff; text-indent:-2px; text-align:center; border-radius:2px 2px 2px 2px;} .barometer_tab03 .subscription_list li p > span.ico_result:before {content:'철회'; display:inline-block; position: relative; top: 0; margin-right:2px; width:30px; height:18px; font-size:12px; line-height:18px; background-color:#999; color:#fff; text-indent:-2px; text-align:center; border-radius:2px 2px 2px 2px;} .barometer_tab03 .subscription_list li p > span.ico_close:before {content:'해지'; display:inline-block; position: relative; top: 0; margin-right:2px; width:30px; height:18px; font-size:12px; line-height:18px; background-color:#999; color:#fff; text-indent:-2px; text-align:center; border-radius:2px 2px 2px 2px;} .barometer_tab03 .subscription_list li p > span.ico_cancel:before {content:'취소'; display:inline-block; position: relative; top: 0; margin-right:2px; width:30px; height:18px; font-size:12px; line-height:18px; background-color:#999; color:#fff; text-indent:-2px; text-align:center; border-radius:2px 2px 2px 2px;} .barometer_tab03 .subscription_list li div {display:inline-block; width:auto;} .barometer_tab03 .subscription_list li div > img {max-width:50%;} /* 가입내역 팝업 */ .barometer_result_cont .subscriptlist_pop {padding:30px 15px 50px;} .barometer_result_cont #pop_wrap #pop_content .subscriptlist_pop h2 {font-size:17px; color:#333; font-weight:700;} .barometer_result_cont #pop_wrap #pop_content .subscriptlist_pop h3 {font-size:15px; color:#000; font-weight:700; margin:0 0 5px;} .barometer_result_cont .subscriptlist_pop .subscriptlist_logo {display:block; transform: scale(0.5) translateX(-50%);} .barometer_result_cont .subscriptlist_pop .subscript_tbl {margin:20px 0 30px;} .barometer_result_cont .subscriptlist_pop .subscript_tbl:last-of-type {margin:20px 0 0;} .barometer_result_cont .subscriptlist_pop .subscript_tbl table {width:100%; border-top:solid 2px #000;} /* 가입내역 팝업 - 가로형 */ .barometer_result_cont .subscriptlist_pop .subscript_tbl.horizon table th, .barometer_result_cont .subscriptlist_pop .subscript_tbl.horizon table td {padding:10px;} .barometer_result_cont .subscriptlist_pop .subscript_tbl.horizon table th {font-size:15px; color:#000; font-weight:700; text-align:center; border-right:solid 1px #ddd; border-bottom:solid 1px #ddd;} .barometer_result_cont .subscriptlist_pop .subscript_tbl.horizon table td {border-bottom:solid 1px #ddd; font-size:14px; color:#000;} /* 가입내역 팝업 - 세로형 */ .barometer_result_cont .subscriptlist_pop .subscript_tbl.vertical table th, .barometer_result_cont .subscriptlist_pop .subscript_tbl.vertical table td {padding:10px; letter-spacing:-0.05em;} .barometer_result_cont .subscriptlist_pop .subscript_tbl.vertical table thead th {font-size:15px; color:#000; font-weight:700; text-align:center; border-bottom:solid 1px #ddd;} .barometer_result_cont .subscriptlist_pop .subscript_tbl.vertical table thead th:nth-of-type(1) {text-align:left;} .barometer_result_cont .subscriptlist_pop .subscript_tbl.vertical table thead th:nth-of-type(2) {text-align:right;} .barometer_result_cont .subscriptlist_pop .subscript_tbl.vertical table thead th:nth-of-type(3) {text-align:center;} .barometer_result_cont .subscriptlist_pop .subscript_tbl.vertical table tr > td {border-bottom:solid 1px #ddd; font-size:14px; color:#000;} .barometer_result_cont .subscriptlist_pop .subscript_tbl.vertical table tr > td:nth-of-type(1) {text-align:left;} .barometer_result_cont .subscriptlist_pop .subscript_tbl.vertical table tr > td:nth-of-type(2) {text-align:right;} .barometer_result_cont .subscriptlist_pop .subscript_tbl.vertical table tr > td:nth-of-type(3) {text-align:center;} .barometer_result_cont .subscriptlist_pop .subscript_tbl.vertical table td:last-child {border-right:solid 1px #fff;} /* 추천상품 */ .barometer_result_cont .barometer_tab04 .barometer_content {padding-bottom:50px;} .barometer_result_cont .barometer_tab04 .barometer_content h4 {position:relative; padding-left:100px; width:50%; max-width:200px; margin:0 auto;} .barometer_result_cont .barometer_tab04 .barometer_content h4.detail_tit{font-size: 21px;font-weight: 700;letter-spacing: -0.1em;} .barometer_result_cont .barometer_tab04 .barometer_content h4.detail_tit span.under_line{display:inline-block; height:22px; line-height:12px; border-bottom:solid 10px #ffc8c8; box-sizing:border-box;} .barometer_result_cont .barometer_tab04 .barometer_content h4:before {content:''; display:block; position:absolute; left:15px; top:50%; margin-top:-48px; width:80px; height:96px; background:url("/subscribe/images/dlb/gurtanly/bg_recommend_product_tit.png") 0 0 no-repeat; background-size:80px 96px;} .barometer_result_cont .barometer_tab04 .barometer_content h4:before {content:''; display:block; position:absolute; left:15px; top:50%; margin-top:-48px; width:80px; height:96px; background:url("/subscribe/images/dlb/gurtanly/bg_recommend_product_tit.png") 0 0 no-repeat; background-size:80px 96px;} .barometer_result_cont .barometer_tab04 .solution_wrap {margin:0 0 50px;padding: 0 10% 50px;border-bottom:solid 1px #e5e5e5;} .barometer_result_cont .barometer_tab04.modifyStyle .barometer_content h4.detail_tit { max-width: 270px; width: initial;} .barometer_result_cont .solution_wrap {padding-bottom:50px; border-bottom:solid 1px #e5e5e5;} .barometer_result_cont .solution_wrap.lately {padding-bottom:50px; border-bottom:solid 1px #e5e5e5;} .barometer_result_cont .solution_wrap > li .solut_tit {margin:50px 0 15px;} .barometer_result_cont .solution_wrap > li .solut_tit:after {content:''; display:block; clear:both;} .barometer_result_cont .solution_wrap > li .solut_tit dt {float:left; width:70%; padding-left:40px; font-size:20px; line-height:50px; color:#385087; font-weight:700; background-position:0 50%; background-size:34px 34px; background-repeat:no-repeat; box-sizing:border-box;} .barometer_result_cont .solution_wrap > .lack .solut_tit dt:after {content:'부족'; display:inline-block; position: relative; top: -4px; margin-left:5px; width:30px; height:18px; font-size:12px; line-height:18px; background-color:#ec4245; color:#fff; text-indent:-2px; text-align:center; border-radius:2px 2px 2px 2px;} .barometer_result_cont .solution_wrap > li .solut_tit dd {float:right; width:30%; height:50px; line-height:50px; font-size:15px; text-align:right;} .barometer_result_cont .solution_wrap > li .solut_tit dd em {font-size:33px; font-weight:700; padding-right:5px; color:#395086;} .barometer_result_cont .solution_wrap > li .solut_con {position:relative; padding:7% 6%; margin:0 -5.5%; border:solid 2px #ec4245; border-radius:10px; font-size:14px; color:#444; letter-spacing:-0.1em;} .barometer_result_cont .solution_wrap > li .solut_con p+p {margin-top:10px;} .barometer_result_cont .solution_wrap > li .solut_con:after {content:''; display:block; clear:both; position:absolute; right:19px; top:17px;} .barometer_result_cont .solution_wrap > li .solut_push {margin:15px 0 25px; font-size:15px; letter-spacing:-0.05em; color:#666;} .barometer_result_cont .solution_wrap > li .solut_push:after {content:''; display:block; clear:both;} .barometer_result_cont .solution_wrap > li .solut_push p:first-child {margin-bottom:15px;} .barometer_result_cont .solution_wrap > li .solut_push p:first-child strong {display:block; float:left; width:65%; font-size:17px; font-weight:700; color:#333;} .barometer_result_cont .solution_wrap > li .solut_push p:first-child em {display:block; float:right; width:35%; text-align:right; font-size:17px; font-weight:700; color:#333;} .barometer_result_cont .solution_wrap > li .solut_push p:first-child:after {content:''; display:block; clear:both;} .barometer_result_cont .solution_wrap > li .solut_push p+p {font-size:15px; color:#666; letter-spacing:-0.1em;} .barometer_result_cont .solution_wrap > li .solut_btn {margin:25px 0 0 0;} .barometer_result_cont .solution_wrap > li .solut_btn:after {content:''; display:block; clear:both;} .barometer_result_cont .solution_wrap > li .solut_btn a {position:relative; display:block; float:left; width:48%; padding:10px 20px; font-size:14px; font-weight:700; box-sizing:border-box; border-radius:20px; color:#fff; text-align:center; text-indent:-10px;} .barometer_result_cont .solution_wrap > li .solut_btn a:after {content:''; display:inline-block; position:absolute; width:15px; height:19px; background:url("/subscribe/images/dlb/gurtanly/ico_gurtbtn_arrow.png") 8px 50% no-repeat; background-size:7px 11px;} .barometer_result_cont .solution_wrap > li .solut_btn a:first-child {background:#828282; margin-right:3%;} .barometer_result_cont .solution_wrap > li .solut_btn a+a {background:#ec4245;} .barometer_result_cont .solution_wrap > li .solut_con .solut_con_sub {position:relative; margin-top:5px; padding-left:12px; font-size:12px; color:#666;} .barometer_result_cont .solution_wrap > li .solut_con .solut_con_sub:after {content:'＊'; display:block; position:absolute; left:0; top:1px;} .barometer_result_cont .solution_wrap > li .solut_con p + p {margin-top:10px;} .barometer_result_cont .solution_wrap.lately > li > .solut_btn a {background:#ec4245;margin:0 auto;float:none;} /* 추천상품 - 성인병 */ .barometer_tab04 .solution_wrap > .g3040 .solut_tit {margin:25px 0 15px;} .barometer_tab04 .solution_wrap > .g3040 .solut_tit dt {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_01.png");} .barometer_tab04 .solution_wrap > .g3040 .solut_con {border-color:#ec4245; background:#fdeee7;margin: 0 -5.5%;} .barometer_tab04 .solution_wrap > .g3040 .solut_con:after {background:url("/subscribe/images/dlb/gurtanly/win/ico_best_01.png") 0 0 no-repeat; width:48px; height:58px; background-size:48px 58px;} .barometer_tab04 .solution_wrap > .adult_sol .solut_con p > em {font-weight:700; color:#ec4245;} .barometer_tab04 .solution_wrap > .adult_sol .solut_con p span {font-weight:400; font-size:12px;} /* 추천상품 - 수술·입원비 */ .barometer_tab04 .g3060 .solut_tit dt {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_05.png");} .barometer_tab04 .solution_wrap > .g3060 .solut_con {border-color:#4d7dec; background:#e0efff;margin: 0 -5.5%;} .barometer_tab04 .solution_wrap > .g3060 .solut_con:after {background:url("/subscribe/images/dlb/gurtanly/ico_surg_sol_con.png") 0 0 no-repeat; width:48px; height:55px; background-size:48px 55px;} .barometer_tab04 .solution_wrap > .g3060 .solut_con p > em {font-weight:700; color:#4d7dec;} /* 추천상품 - 암 치료비 */ .barometer_tab04 .g3050 .solut_tit dt {background-image:url("/subscribe/images/dlb/gurtanly/ico_cancer_cure_tit.png");} .barometer_tab04 .solution_wrap > .g3050 .solut_con {border-color:#fa6c1e; background:#fff3e6;margin: 0 -5.5%;} .barometer_tab04 .solution_wrap > .g3050 .solut_con:after {background:url("/subscribe/images/dlb/gurtanly/ico_cancer_sol_con.png") 0 0 no-repeat; width:49px; height:48px; background-size:49px 48px;} .barometer_tab04 .solution_wrap > .g3050 .solut_con p > em {font-weight:700; color:#fa6c1e;} .barometer_tab04 .solution_wrap > .g3050 .solut_con p span {font-weight:400; color:#666; font-size:12px;} /* 추천상품 - 사망·후유장해 */ .barometer_tab04 .g3080 .solut_tit dt {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_07.png");} .barometer_tab04 .solution_wrap > .g3080 .solut_con {border-color:#23b3c0; background:#ebfdff;margin: 0 -5.5%;} .barometer_tab04 .solution_wrap > .g3080 .solut_con:after {background:url("/subscribe/images/dlb/gurtanly/ico_after_death_sol_con.png") 0 0 no-repeat; width:56px; height:51px; background-size:56px 51px;} .barometer_tab04 .solution_wrap > .g3080 .solut_con p > em {font-weight:700; color:#23b3c0;} .barometer_tab04 .solution_wrap > .g3080 .solut_con p span {display:block; font-size:12px; color:#666;} /* 추천상품 - 치아 */ .barometer_tab04 .g3070 .solut_tit dt {background-image:url("/subscribe/images/dlb/gurtanly/ico_teeth_tit.png");} .barometer_tab04 .solution_wrap > .g3070 .solut_con {border-color:#c34ad9; background:#fee6ff;margin: 0 -5.5%;} .barometer_tab04 .solution_wrap > .g3070 .solut_con p > span {font-size:11px; color:#666;} .barometer_tab04 .solution_wrap > .g3070 .solut_con:after {background:url("/subscribe/images/dlb/gurtanly/ico_teeth_sol_con.png") 0 0 no-repeat; width:56px; height:57px; background-size:56px 57px;} .barometer_tab04 .solution_wrap > .g3070 .solut_con p > em {font-weight:700; color:#c34ad9;} /* 추천상품 - 운전·주택 */ .barometer_tab04 .g3020 .solut_tit dt {background-image:url("/subscribe/images/dlb/gurtanly/win/ico_insur_10.png");} .barometer_tab04 .solution_wrap > .g3020 .solut_con {border-color:#764dec; background:#e9e6ff; padding-right:60px;margin: 0 -5.5%;} .barometer_tab04 .solution_wrap > .g3020 .solut_con:after {right:10px; background:url("/subscribe/images/dlb/gurtanly/ico_drive_house_sol_con.png") 0 0 no-repeat; width:55px; height:51px; background-size:55px 51px;} .barometer_tab04 .solution_wrap > .g3020 .solut_con p > em {font-weight:700; color:#764dec;} .barometer_tab04 .g3020 .insu_diag_info {margin:40px 5%; letter-spacing: -0.05em;} .barometer_tab04 .g3020 .insu_diag_info strong {display:block; padding-left:23px; font-size:16px; line-height:19px; background:url("/subscribe/images/dlb/gurtanly/ico_insu_diag_info.png") 0 50% no-repeat; background-size:17px 17px;} .barometer_tab04 .g3020 .insu_diag_info p:first-of-type {margin:10px 0;} .barometer_tab04 .g3020 .insu_diag_info p {font-size:14px;} /* 추천상품 - 실손의료비 */ .barometer_tab04 .g3010 .solut_tit dt {background-image:url("/subscribe/images/dlb/gurtanly/ico_medical_so_tit.png");} .barometer_tab04 .solution_wrap > .g3010 .solut_con {border-color:#019c6e; background:#ebffee;margin: 0 -5.5%;} .barometer_tab04 .solution_wrap > .g3010 .solut_con:after {background:url("/subscribe/images/dlb/gurtanly/win/ico_best_04.png") 0 0 no-repeat; width:48px; height:50px; background-size:48px 50px;} .barometer_tab04 .solution_wrap > .g3010 .solut_con p > em {font-weight:700; color:#019c6e;} /* 추천상품 - 궁금하신 사항 문의 */ .barometer_tab04 .tel_consult {margin:50px 5% 0; border:solid 2px #395086; border-radius:10px; font-size:15px; letter-spacing:-0.1em; color:#333;} .barometer_tab04 .tel_consult > dl {padding:15px 5% 20px 35%; background:#e1eaff url(/subscribe/images/dlb/gurtanly/bg_recommend_call.png) 7% 50% no-repeat; color:#444; border-radius:10px 10px 0 0; box-sizing:border-box; background-size:78px 103px;} .barometer_tab04 .tel_consult > dl dt {color:#395086; font-weight:700;} .barometer_tab04 .tel_consult .chkbox_con {color:#395086; padding:25px 0 35px 15px;} .barometer_tab04 .tel_consult .chkbox_con .chk_wrap {margin:20px 0 0;} .barometer_tab04 .tel_consult .chkbox_con .chk_wrap:first-child {margin:0 0 20px;} .barometer_tab04 .tel_consult .input_radio input[type=radio]+label {font-size:15px; letter-spacing:-0.1em; color:#333;} .barometer_tab04 .tel_consult .input_radio input[type=radio]+label span {font-weight:700;} .barometer_tab04 .tel_consult .tel_consult_btn {text-align:center;} .barometer_tab04 .tel_consult .tel_consult_btn a {position:relative; display:inline-block; width:50%; padding:12px 30px; font-size:14px; font-weight:700; border-radius:30px; background:#ec4245; color:#fff; text-align:center; text-indent:-10px; margin-bottom:35px; box-sizing:border-box;} .barometer_tab04 .tel_consult .tel_consult_btn a:after {content:''; display:inline-block; position:absolute; width:15px; height:19px; background:url("/subscribe/images/dlb/gurtanly/ico_gurtbtn_arrow.png") 8px 50% no-repeat; background-size:7px 11px;} /* 꼭 알아두실사항 */ .barometer_result_con .date_notice{background:#fff; padding:30px 5%; font-family:"RixSGo M"; font-size:13px; line-height:20px; color:#666;} .barometer_result_con .barometer_tab03 .date_notice{padding:0 5% 30px;} .barometer_result_con .barometer_tab04 .date_notice{padding:0 5%;} .barometer_result_con .date_notice h5{font-size:17px; color:#000; font-family:"RixSGo B"; margin-bottom:15px;} .barometer_result_con .date_notice h5 img{width:18px; margin-right:5px; vertical-align:top;} .barometer_result_con .date_notice ul li{list-style-type:disc; list-style-position:outside; margin-left:15px;} .barometer_result_con .date_notice ul li+li{margin-top:8px;} /* 종합점수 그래프 */ .barometer_result_cont .score_grap_wrap {position:relative; width:60vw; height:27.5vw; padding-bottom:6vw; padding-top:3vw; margin:0 auto;} .barometer_result_cont .score_grap_wrap:before {content:'0'; display:block; position:absolute; right:100%; bottom:-10px; color:#f68588; font-size:15px; z-index:10; font-weight:700;} .barometer_result_cont .score_grap_wrap:after {content:'100'; display:block; position:absolute; left:100%; bottom:-10px; color:#ec4245; font-size:15px; z-index:10; font-weight:700;} .barometer_result_cont .score_grap_wrap .score_grap_inner {position:relative; width:60vw; height:27.5vw; padding-bottom:6vw; padding-top:3vw; overflow:hidden;} .barometer_result_cont .score_grap_wrap .grap100 {position:absolute; width:55vw; height:27.5vw; left:50%; top:3vw; transform:translate(-50%);} .barometer_result_cont .score_grap_wrap .grap100_inner {position:relative; width:55vw; height:27.5vw; border-radius:50% 50% 0 0 / 100% 100% 0 0; margin-bottom:30px; background:#e8e9eb;} .barometer_result_cont .score_grap_wrap .grap100_inner .left_edge {position:absolute; left:0; bottom:-3vw; width:6vw; height:6vw; background:#ec4245; border-radius: 0 0 50% 50%;} .barometer_result_cont .score_grap_wrap .grap100_inner .right_edge {position:absolute; right:0; bottom:-3vw; width:6vw; height:6vw; background:#e8e9eb; border-radius: 0 0 50% 50%;} .barometer_result_cont .score_grap_wrap .score_grap_inner > .left_edge {position:absolute;left: 2.5vw;bottom:-2.5vw;width: 11vw;height:8vw;background:url("/subscribe/images/dlb/gurtanly/img_gurtgrap_left_edge.png") 0 0 no-repeat;background-size:100% 100%;z-index:10;transform:translate3d(0, 0, 1px);} .barometer_result_cont .score_grap_wrap .grapaver {position:absolute; width:55vw; height:27.5vw; left:50%; top:3vw; transform:translate(-50%);} .barometer_result_cont .score_grap_wrap .grapaver_inner {position:relative; width:55vw; height:27.5vw; border-radius:50% 50% 0 0 / 100% 100% 0 0; margin-bottom:30px; background-image:linear-gradient(90deg, #c6c6c6, #c6c6c6); background-size:100% 100%; transform-origin:50% 100%; transform:rotateZ(-180deg); opacity:0; background-position:100% 0;} .barometer_result_cont .score_grap_wrap .grapaver_inner.half {background-size:50% 100%; background-repeat:no-repeat;} .barometer_result_cont .score_grap_wrap .grapaver_inner .left_edge {position:absolute; left:0; bottom:-4vw; width:6vw; height:6vw; border-radius: 0 0 50% 50%; background:#c6c6c6;} .barometer_result_cont .score_grap_wrap .grapaver_inner.half .left_edge {display:none;} .barometer_result_cont .score_grap_wrap .grapaver_inner .right_edge {position:absolute; right:0; bottom:-4vw; width:6vw; height:6vw; border-radius: 0 0 50% 50%; background:#c6c6c6;} .barometer_result_cont .score_grap_wrap .grapaver_inner .right_edge:after {content:''; display:block; position:relative; right:-5.5vw; bottom:-4vw; width:12px; height:10px; transform:rotateZ(90deg); background:url("/subscribe/images/dlb/gurtanly/img_gurtgrap_aver_edge.png") 0 0 no-repeat; background-size:100% 100%;} .barometer_result_cont .score_grap_wrap .grap_result {position:absolute; width:55vw; height:27.5vw; left:50%; top:3vw; transform:translate(-50%);} .barometer_result_cont .score_grap_wrap .grap_result_inner {position:relative; width:55vw; height:27.5vw; border-radius:50% 50% 0 0 / 100% 100% 0 0; margin-bottom:30px; background-image:linear-gradient(90deg, #f99596, #ed4649); background-size:100% 100%; transform-origin:50% 100%; transform:rotateZ(-165deg) translate3d(0, 0, 1px); opacity:0; background-repeat:no-repeat; background-position:100% 0;} .barometer_result_cont .score_grap_wrap .grap_result_inner.half {background-size:50% 100%;} .barometer_result_cont .score_grap_wrap .grap_result_inner .left_edge {position:absolute; left:0; bottom:-6vw; width:6vw; height:6vw; border-radius: 0 0 50% 50%; background:#f89496;} .barometer_result_cont .score_grap_wrap .grap_result_inner.half .left_edge {display:none;} .barometer_result_cont .score_grap_wrap .hide_circle {position:absolute; width:55vw; height:55vw; left:50%; top:3vw; transform:translate(-50%) scale(0.8); border-radius:50%; background:#fff; transform-origin:50% 50%; z-index:20;} .barometer_result_cont .score_grap_wrap .hide_circle_inner {position:relative; width:100%; height:100%; transform:rotateZ(-180deg); border-radius:50%; transform-origin:50% 50%; border-radius:50%;} .barometer_result_cont .score_grap_wrap .hide_circle_inner:after {content:''; position:absolute; display:block; width:6vw; height:6vw; right:-9vw; top:50%; margin-top:-5vw; background:#fff; border-radius:50% 50% 50% 50%; border:solid 2vw #ec4245; opacity:0;} .barometer_result_cont .result_score .result_aver {position:absolute; width:55vw; height:27.5vw; left:50%; top:3vw; transform:translate(-50%);} .barometer_result_cont .result_score .result_aver .aver_degwrap {display:block; position:relative; width:55vw; height:27.5vw; border-radius:50% 50% 0 0 / 100% 100% 0 0; transform-origin:50% 100%; transform:rotateZ(0deg); text-align:center; font-size:13px;} .barometer_result_cont .result_score .result_aver .aver_degwrap .aver_degtxt {position:relative; display:inline-block; transform-origin:50% 50%; transform:rotateZ(0deg); top:-7vw;} .barometer_result_cont .score_grap_wrap .grap100_inner, .barometer_result_cont .score_grap_wrap .grap_result_inner, .barometer_result_cont .score_grap_wrap .hide_circle_inner, .barometer_result_cont .score_grap_wrap .hide_circle_inner:after { -webkit-transition:all 0.5s; transition:all 0.5s; visibility:visible;} /* 종합점수 그래프 - on시 모션 */ .barometer_result_cont .score_grap_wrap .hide_circle_inner.on:after {opacity:1;} .barometer_result_cont .score_grap_wrap .result_score_txt {position:absolute; width:40vw; height:27.5vw; left:50%; bottom: 0; transform:translate(-50%); border-radius:50%; z-index:30;} .barometer_result_cont .score_grap_wrap .result_score_txt p {position:absolute; width:100%; left:0; bottom:-6px; text-align:center; font-size:20px; color:#ec4245;} .barometer_result_cont .score_grap_wrap .result_score_txt p em {font-size:65px; font-weight:700;} /* 보장분석 - 명함 */ .barometer_calling {position:relative; margin:0 auto 50px; width:90%; min-width:300px; height:62.5vw; min-height:221px; background:url("/subscribe/images/dlb/gurtanly/bg_barometer_calling.png") 0 0 no-repeat; background-size:100% 100%;} .barometer_calling .calling_header {position:absolute; top:35px; right:15px; text-align:right; font-weight:700; font-size:16px; color:#fff; letter-spacing:-0.05em;} .barometer_calling .calling_content {padding-top:30%;} .barometer_calling .calling_manager {text-align:center; font-weight:700; font-size:19px; color:#4466b6; letter-spacing:-0.05em;} .barometer_calling .calling_call {text-align:center; font-size:18px; color:#333; letter-spacing:0;} .barometer_calling .calling_btn1 {margin-top:13px; text-align:center;} .barometer_calling .calling_btn1 a {display:inline-block; width:166px; height:38px;} .barometer_calling .calling_btn2 {margin-top:13px; text-align:center;} .barometer_calling .calling_btn2 a {display:inline-block; width:126px; height:38px; margin-left:10px;} .barometer_calling .calling_btn2 a:first-child {margin-left:0; margin-right:10px;} /* 바로미터 배너 디자인 */ .barometer_result_cont .diag_cont .banner_box{margin: 0 20px;} .barometer_result_cont .diag_cont .banner_box .diag_banner img{border-radius: 8px;} .barometer_result_cont .mgl20{margin-left: 20px !important;} .barometer_result_cont .mgr20{margin-right: 20px !important;} /* 바로미터 헤더 SNS 공유하기 관련 */ .dimm{min-height: 100vh !important;} .barometer_sns_pop .layer_share .input_wrap button{cursor: pointer;border: 0;border-left: solid 1px #b7b7b7;padding: 0;margin: 0;outline: none;font-weight: 700;} .barometer_sns_pop .layer_share .input_wrap input{border: 0;padding: 0;margin: 0;outline: none;} .barometer_sns_pop .layer_share{position:relative; min-width:300px; width:83%; border:solid 1px #333; box-sizing:border-box; overflow:hidden; border-radius:10px; background:#fff; margin:0 auto; padding:25px 0 30px;} .barometer_sns_pop .layer_share h3{font-size:20px; text-align:center; font-weight:700;} .barometer_sns_pop .layer_share ul{margin:29px auto 20px;} .barometer_sns_pop .layer_share ul:after{content:''; display:block; clear:both;} .barometer_sns_pop .layer_share ul li{float:left; width:33.33%;} .barometer_sns_pop .layer_share ul li a{display:block; padding-top:65px; background-size:54px 54px; background-position:50% 0; background-repeat:no-repeat;} .barometer_sns_pop .layer_share ul li:nth-of-type(1)>a{background-image:url(/subscribe/images/dlb/baro_meter/btn_share_kakao.png);} .barometer_sns_pop .layer_share ul li:nth-of-type(2)>a{background-image:url(/subscribe/images/dlb/baro_meter/btn_share_facebook.png);} .barometer_sns_pop .layer_share ul li:nth-of-type(3)>a{background-image:url(/subscribe/images/dlb/baro_meter/btn_share_twitter.png);} .barometer_sns_pop .layer_share ul li p{text-align:center; font-size:14px; letter-spacing:normal;color: #333;} .barometer_sns_pop .layer_share .input_wrap{display:block; position:relative; margin:0 auto; min-width:245px; padding:7px 2.5%; line-height:unset; border:solid 1px #b7b7b7; overflow:hidden; border-radius:3px; box-sizing:border-box; width:81.5%; box-sizing:border-box;} .barometer_sns_pop .layer_share .input_wrap label{position:absolute; left:-1px; top:-1px; width:1px; height:1px; text-indent:-999em; overflow:hidden;} .barometer_sns_pop .layer_share .input_wrap input{display:block;min-width:176px; width:75%; height:unset; background:none; font-size:13px; color:#b7b7b7; box-sizing:border-box;} .barometer_sns_pop .layer_share .input_wrap button{position:absolute; display:block;right:0; top:0; min-width:60px; width:25%; height:100%; border-left:solid 1px #b7b7b7; background:#e9e9e9; font-size:13px; color:#333; text-align: center; box-sizing:border-box; letter-spacing:0; line-height:34px;} .barometer_sns_pop .layer_share .btn_close{display:block; position:absolute; right:4%; top:4%; width:12px; height:12px;} .barometer_sns_pop .layer_share .btn_close span{display:block; width:12px; height:12px; background:url(/subscribe/images/dlb/baro_meter/btn_share_close.png) 0 0 no-repeat; background-size:12px 12px; text-indent:-999em;} .barometer_sns_pop .layer_share .btn_wrap{position:relative; margin:36px auto 0; text-align:center;} .barometer_sns_pop .layer_share .btn_wrap .confirm_btn{display:inline-block; width:80px; height:35px; line-height:35px;font-weight: 700;font-size:15px; color:#fff; text-align:center; background:#3c454e; border-radius:2px;} /* 바로미터 이벤트 배너 관련 */ .baro_intro_evt_banner{position: fixed;bottom: 85px;z-index: 1;padding: 0 5%;} .layer_wrap.baro_evt_pop{position:relative; min-width:300px; width:83%; border:solid 1px #333; box-sizing:border-box; overflow:hidden; border-radius:10px; background:#fff; margin:0 auto; padding:25px 0 10px;} .baro_evt_pop h3{font-weight: 700;font-size: 20px;text-align: center;padding-top: 6px;margin-bottom: 20px;} .baro_evt_pop .layer_evt .baro_evt_cont{padding-bottom: 10px;margin: 0 25px 15px;border-bottom: 1px solid #ddd;} .baro_evt_pop .layer_evt .baro_evt_cont li{margin-bottom: 5px;} .baro_evt_pop .layer_evt .baro_evt_cont span{font-size: 14px;color: #555;} .baro_evt_pop .layer_evt .baro_evt_cont .baro_evt_sub_tit{font-size: 14px;font-weight: 700;color: #000;} .baro_evt_pop .txt_blue{color: #02a7c5 !important;margin-left: 5px;} .baro_evt_pop .layer_evt .baro_evt_precautions{margin: 0 25px 15px;} .baro_evt_pop .layer_evt .baro_evt_precautions li{color: #999;font-size: 12px;margin-left: 7px;position: relative;line-height: 20px;margin-bottom: 5px;} .baro_evt_pop .layer_evt .baro_evt_precautions li:before{content: "*";position: absolute;top: 3px;left: -8px;} .layer_wrap.baro_evt_pop .pop_close{display: block;position: absolute;padding: 10px;right: 0;width: 12px;height: 12px;} .layer_wrap.baro_evt_pop .pop_close span{display:block; width:12px; height:12px; background:url(/subscribe/images/dlb/baro_meter/btn_share_close.png) 0 0 no-repeat; background-size:12px 12px; text-indent:-999em;} .layer_wrap.baro_evt_res_pop { position:relative; min-width:300px; width:83%; margin:0 auto; padding:25px 0 0; text-align:center; background:#fff; border:solid 1px #333; border-radius:10px; box-sizing:border-box; overflow:hidden; } .layer_wrap.baro_evt_res_pop { top:unset !important; left:unset; transform:none; } .layer_wrap.baro_evt_res_pop h3 { font-weight: 700;font-size: 20px;position: relative;margin-bottom: 15px;padding-top: 88px; } .layer_wrap.baro_evt_res_pop .part_success:before{display:block;position:absolute;top: 43px;right: 50%;transform: translate(35px, 0);width:67px;height:62px;background:url(/subscribe/images/dlb/baro_meter/img_baro_smile_chk.png) 0 0 no-repeat;background-size:67px 62px;content:"";} .layer_wrap.baro_evt_res_pop .evt_quit:before{display:block;position:absolute;top: 43px;right: 50%;transform: translate(35px, 0);width:67px;height:62px;background:url(/subscribe/images/dlb/baro_meter/img_baro_qu_chk.png) 0 0 no-repeat;background-size:67px 62px;content:"";} .layer_wrap.baro_evt_res_pop .evt_redu:before{display:block;position:absolute;top: 43px;right: 50%;transform: translate(35px, 0);width:67px;height:62px;background:url(/subscribe/images/dlb/baro_meter/img_baro_qu_chk.png) 0 0 no-repeat;background-size:67px 62px;content:"";} .layer_wrap.baro_evt_res_pop span.txt_blue{color: #02a7c5 !important;} .layer_wrap.baro_evt_res_pop .evt_err:before{display:block;position:absolute;top: 43px;right: 50%;transform: translate(35px, 0);width:67px;height:62px;background:url(/subscribe/images/dlb/baro_meter/img_baro_err_chk.png) 0 0 no-repeat;background-size:67px 62px;content:"";} .layer_wrap.baro_evt_res_pop .evt_null:before{display:block;position:absolute;top: 43px;right: 50%;transform: translate(35px, 0);width:67px;height:62px;background:url(/subscribe/images/dlb/baro_meter/img_baro_qu_chk.png) 0 0 no-repeat;background-size:67px 62px;content:"";} .baro_evt_close_btn {color: #fff;background: inherit;background-color: #02a7c5;width: 100%;border: none;box-shadow: none;padding: 20px 0;overflow: visible;cursor: pointer;border-radius: 0 0 8px 8px;bottom: 0;font-family:"RixSGo B";font-size: 18px;margin-top: 25px;} .layer_wrap.baro_evt_res_pop p{font-size: 14px;color: #555;line-height: 1.7;padding: 0 20px;} .layer_wrap.baro_evt_res_pop p span{color: #999;} .layer_wrap.baro_evt_res_pop .pop_close { position:absolute; display:block; right:10px; width:12px; height:12px; padding:10px; } .layer_wrap.baro_evt_res_pop .pop_close span { display:block; width:12px; height:12px; background:url(/subscribe/images/dlb/baro_meter/btn_share_close.png) 0 0 no-repeat; background-size:12px 12px; text-indent:-999em;} /* 201126 : KSH :12월 럭키박스 */ .cafe_luckybox_event .luckyBox_2012 {position: relative;} .cafe_luckybox_event .luckyBox_2012 .peo {position: absolute;top:61%;z-index:1;width:68.9%;height:28.7%;z-index:10;margin-left: 50%;transform: translate(-50%);} .cafe_luckybox_event .luckyBox_2012 .boxWrap {position: absolute;left:25%;top:48%;z-index:2;width: 50%;height:50%} .cafe_luckybox_event .luckyBox_2012 .box_top {position: absolute;left:0%;top:-19%;z-index:2;width: 100%;} .cafe_luckybox_event .luckyBox_2012 .box {position: absolute;top: -7%;z-index:1;width: 100%;} .cafe_luckybox_event .luckyBox_2012 .mark {position: absolute;left:47%;top:40%;z-index:1;width: 8%;height:8%} .cafe_luckybox_event .notice {margin:30px 0; padding:0 15px;} .cafe_luckybox_event .notice dt{font-family:"RixSGo B"; font-size:14px; line-height:22px; color:#333; margin-bottom:6px} .cafe_luckybox_event .notice dd{font-family:"RixSGo M"; font-size:8px; line-height:20px; color:#666} .cafe_luckybox_event .notice dd ul li{list-style-type:disc; list-style-position:inside; text-indent:-13px; padding-left:16px} .cafe_luckybox_event .notice dd ul li span {font-size:12px} .move { animation: boxMove 0.3s infinite; animation-direction : alternate; animation-delay : 0.5s } .moveTop { transform: rotate(-10deg) } @keyframes boxTopMove{ 0% {transform: rotate(0deg);} 100% {transform: rotate(45deg)} } @keyframes boxMove{ 0% {left:24%;} 25% {left:25%;} 50% {left:24%;} 75% {left:25%;} 100% {left:25%;} } /* 201214 : KSH : 멜다방 복주머니 이벤트 */ .cafe_luckybag_event.lucky_bag_2101 .luckyBag {position: relative;} .cafe_luckybag_event.lucky_bag_2101 .luckyBag .peo {position: absolute;left:5%;top:72%;z-index:1;width:90%;height:28.7%;z-index:10;} .cafe_luckybag_event.lucky_bag_2101 .luckyBag .boxWrap {position: absolute;left:12%;top:48%;z-index:2;width: 75%;height:50%} .cafe_luckybag_event.lucky_bag_2101 .luckyBag .boxWrap.move { animation: luckyBagMove 0.3s infinite; animation-direction : alternate; animation-delay : 0.5s } .boxWrap .lucky_bag_fire{position: absolute;top: -40px;transform:scale(0);} .boxWrap.luckyBagFireWorks .lucky_bag_fire{animation:luckyBagfire 1.2s ease; transform:scale(1);} .boxWrap.luckyBagRotate{animation:luckyBagRotate 3s linear;} /* 바로미터 전문가 진단 신청완료 팝업 */ #pop_wrap.baro_apply_res_pop{width: 83%;margin:50% 0 0 50%;padding-bottom: 30px;transform: translate(-50%, 0);height: 250px;border-radius: 10px;} #pop_wrap.baro_apply_res_pop #pop_content{margin-top: 0;height: initial !important;} #pop_wrap.baro_apply_res_pop h5{font-size: 20px;font-weight: bold;} #pop_wrap.baro_apply_res_pop .bx_complete .ico_comm.ico_apply{background-image: url(/subscribe/images/dlb/baro_meter/baro_ico_apply.png);background-size: 50px 62px;width: 50px;height: 62px;top: 33px;margin-left: -25px;} #pop_wrap.baro_apply_res_pop .bx_complete .thank{font-size: 14px;font-weight: normal;padding-top: 16px;color: #555;} #pop_wrap.baro_apply_res_pop #pop_content .pop_content_inner{padding-bottom: 0px;} #pop_wrap.baro_apply_res_pop a.pop_close{padding: 10px;} #pop_wrap.baro_apply_res_pop a.pop_close span{width: 13px;height: 13px;background-position: -28px -48px;} #lypop_gurtAnlyBaroConfirm { height: initial !important;} #pop_wrap.baro_apply_res_pop.modifyStyle { height: auto;} #pop_wrap.baro_apply_res_pop.modifyStyle .bx_complete .ico_comm.ico_apply { margin-left: 0;} #pop_wrap.baro_apply_res_pop.modifyStyle .baro_insur_diag_btn ul li .f_btn span { padding: 0;} #pop_wrap.baro_apply_res_pop.modifyStyle .baro_insur_diag_btn ul li .f_btn span:after { right: -17px;} #pop_wrap.baro_apply_res_pop.modifyStyle a.pop_close span { background-position: center !important;} #pop_wrap.modifyPaddingTop h1 { padding: 0 25px 0 0px; text-align: left;} #pop_wrap.modifyPaddingTop .noFiexdHeight { padding-top: 64px;} #pop_wrap.modifyPaddingTop .space { margin-bottom: 15px;} .gurtAnly.modifyPaddingBottom { padding-bottom: 0 !important;} /* 210113 : KSH : 바로미터 전문가진단 수정작업 */ .bx_valid.baro_bx_name{width: 60%;float: left;z-index: 2;} .bx_valid.baro_bx_birth{width: 40%;margin-top: 17px;width: 40%;float: left;z-index: 2;} .bx_valid.baro_bx_birth .input_radio input[type=radio]+label em{top: -4px;font-weight: bold;} .bx_valid.baro_bx_birth .input_radio input[type=radio]+label:before{background: url(/subscribe/images/dlb/baro_meter/baro_radio_img.png) 0px top no-repeat;background-size: 45px 22px;} .bx_valid.baro_bx_birth .input_radio input[type=radio]:checked+label:before{background-position: -23px top;} /* 210128 : WYJ : 멜다방 20년 8월 룰렛 이벤트 */ .roulette2102_evt {margin:0 auto; max-width:720px;width:100%; overflow:hidden; position:relative;} .roulette2102_evt .melda_img_con {position:relative; font-size:0; line-height:0;} .roulette2102_evt img[class*="roulette_con"] {position:absolute; left:50%; transform:translate(-50%);} .roulette2102_evt .roulette_con01 {position:absolute; left:50%; transform:translate(-50%); top:42.5%; width:74.7%;} .roulette2102_evt .roulette_con01 img {transform-origin:center center;z-index:1;} .roulette2102_evt .roulette_con01.on img {transition:all 5s ease-out;} .roulette2102_evt img.roulette_con02 {width:7.5%; top:36%; -webkit-transform:translate(-50%) translate3d(0,0,0);} .roulette2102_evt img.roulette_con03 {left:4.4%; width:13.2%; top:80%; transform:translate(0);} .roulette2102_evt .btn_01 {position:absolute; width:23.2%; left:50%; top:58.8%; transform:translate(-50%);} /* 210304 : WSN : 멜다방 21년 3월 룰렛 이벤트 */ .roulette2103_evt {margin:0 auto; max-width:720px;width:100%; overflow:hidden; position:relative;} .roulette2103_evt .melda_img_con {position:relative; font-size:0; line-height:0;} .roulette2103_evt img[class*="roulette_con"] {position:absolute; left:50%; transform:translate(-50%);} .roulette2103_evt .roulette_con01 {position:absolute; left:50%; transform:translate(-50%); top:40.9%; width:79.9%;} .roulette2103_evt .roulette_con01 img {transform-origin:center center;z-index:1;} .roulette2103_evt .roulette_con01.on img {transition:all 5s ease-out;} .roulette2103_evt img.roulette_con02 {width:7.5%; top:36%; -webkit-transform:translate(-50%) translate3d(0,0,0);} .roulette2103_evt img.roulette_con03 {left:4.4%; width:13.2%; top:80%; transform:translate(0);} .roulette2103_evt .btn_01 {position:absolute; width:23.2%; left:50%; top:58.8%; transform:translate(-50%);} .roulette2103_evt .ferris_01 {position:absolute; top:37.7%; left:45.5%; width:9.2%; height:5.9%;} .roulette2103_evt .ferris_02 {position:absolute; top:65.2%; left:86.3%; width:9.2%; height:5.9%;} .roulette2103_evt .ferris_03 {position:absolute; top:89.8%; left:46.1%; width:9.2%; height:5.9%;} .roulette2103_evt .ferris_04 {position:absolute; top:65.2%; left:4.9%; width:9.2%; height:5.9%;} .roulette2103_evt .merry {position: absolute; top:82.2%; left:73.3%; width:15%; height:13.3%;} /* 210309 : KSH : 바로미터 이벤트 팝업 */ .baro_indv_pop{background-color: #fff;border-radius: 8px;position: relative;min-width: 300px;width: 80%;margin: auto;z-index: 106;} .baro_indv_pop_cont{padding: 15px 5% 0;} .baro_indv_pop_cont>div.bx_valid>input{width: 100%;border: none;border-bottom: 2px solid #000; height:25px;} .baro_indv_pop_cont>div.bx_valid>input:focus{outline: 0;} /* .baro_indv_pop_cont>div.bx_valid.error>input{border-bottom: 1px solid #fff;} */ .baro_indv_pop_cont>div.bx_seperate>div.bx_valid>.group input{width: 100%;border: none;border-bottom: 2px solid #000;} .baro_indv_pop_cont>div.bx_seperate>div.bx_valid>.group input:focus{outline: 0;} .baro_indv_pop_cont>div.bx_seperate>div.bx_valid.error>.group input{border-bottom: 1px solid #fff;} .baro_indv_pop_cont>div.bx_seperate>div.bx_valid.error .bar:before{background: #000;} .baro_indv_pop_cont>div.bx_seperate>div.bx_valid>.group .bar:after{background: #000;} .baro_indv_pop_cont div.bx_valid .txt_error{border-top: none;padding-top: 0;} .baro_indv_pop_cont>div.bx_seperate>div.bx_valid.name_bx{width: 60%;} .baro_indv_pop_cont>div.bx_seperate>div.bx_valid.gender{float: right;width: 36%;top: 6px;} .baro_indv_pop_cont>div.bx_seperate .input_radio input[type=radio]+label em{font-weight: 700;color: #555;} .baro_indv_pop_cont>ul{margin-bottom: 10px;font-size: 12px;color: #999;} .baro_indv_pop_cont>ul li{position: relative;margin: 0 0 4px 8px;} .baro_indv_pop_cont>ul li:before{content: '*';position: absolute;left: -8px;top: 2px;} .baro_indv_pop .baro_indv_pop_cont .barometer_insur_diag_agree_cont{padding: 20px 0px 5px} .baro_indv_pop .baro_indv_pop_cont .barometer_insur_diag_agree_cont .input_checkbox{top: 4px;left: 10px;} .baro_indv_pop .baro_indv_pop_cont .barometer_insur_diag_agree_cont input[type=checkbox]+label{padding: 0 0 0 14px;} .baro_indv_pop .baro_indv_pop_cont .barometer_insur_diag_agree_cont a{position: absolute;left: 240px;top: 16px;} .baro_indv_pop .barometer_agree_cont{position: relative;background-color: #f4f4f4;padding: 20px 10px 12px 20px;margin-top: 30px;border-radius: 8px;} .baro_indv_pop .barometer_agree_cont .input_checkbox{display: block;position: relative;} .baro_indv_pop .barometer_agree_cont .input_checkbox label em strong{position:absolute;top:-5px;color: #555;white-space:nowrap;font-size: 14px;line-height: 1.6;left: -14px;} .baro_indv_pop .barometer_agree_cont .input_checkbox:before {content: "";position:absolute;background: url(/subscribe/images/dlb/baro_meter/agree_pop_arrow.png) no-repeat;background-size: 12px 7px;width: 12px;height: 7px;right: -2px;top: 3px;transform: rotate(-90deg);} .baro_indv_pop .barometer_agree_cont .barometer_agree_detail{display: none;font-size: 12px;color: #999;margin-top: 20px;overflow-y: scroll;height: 100px;} .baro_indv_pop .barometer_agree_cont .barometer_agree_detail dl{line-height: 1.6;padding-right: 10px;} .baro_indv_pop .barometer_agree_cont .barometer_agree_detail dl dd{position: relative;margin-left: 7px;} .baro_indv_pop .barometer_agree_cont .barometer_agree_detail dl dd:before{content: "*";position: absolute;left: -7px;top: 3px;} .baro_indv_pop .barometer_agree_cont .barometer_agree_detail dl dd:last-child{margin-left: 0;margin-left: 10px;} .baro_indv_pop .barometer_agree_cont .barometer_agree_detail dl dd:last-child:before{content: "※";left: -10px;top: 1px;} .baro_indv_pop .input_checkbox input[type=checkbox]+label{padding: 0 0 0 26px;} .baro_indv_pop .input_checkbox input[type=checkbox]+label:before{display:block;position:absolute;top:-2px;left:-10px;width:18px;height:18px;background:url(/subscribe/images/dlb/baro_meter/img_checkbox.png) no-repeat 0 -18px;background-size:100%;content:"";} .baro_indv_pop .input_checkbox.on input[type=checkbox]+label:before{display:block;position:absolute;top:-4px;left:-10px;width:18px;height:18px;background:url(/subscribe/images/dlb/baro_meter/agree_pop_check.png) left top no-repeat;background-size:18px 18px;content:"";} .baro_indv_pop a.pop_close{top: 0;right: 0;} .layer_wrap.topTransition{transition: top 0.05s linear;} .layer_wrap .baro_indv_pop a.pop_close{right: 0;} .layer_wrap .baro_indv_pop a.pop_close span{position: absolute;text-indent: -999em;background: url(/subscribe/images/dlb/baro_meter/baro_indv_close.png) no-repeat;background-size: 12px;width: 12px;top: 10px;right: 10px;} .baro_indv_submit_btn{color: #fff;background: inherit;background-color: #ccc;width: 100%;border: none;box-shadow: none;padding: 20px 0;overflow: visible;cursor: pointer;border-radius: 0 0 8px 8px;bottom: 0;font-family:"RixSGo B";font-size: 18px;} .baro_indv_submit_btn.on{background-color: #02a7c5;} .evt_quide_pop #pop_wrap{position: relative;width: 90%;margin: 0 auto;} .evt_quide_pop #pop_wrap #pop_content{z-index: 106;background-color: #fff;margin: 5% 0 0;border-radius: 7px;overflow: scroll;} .evt_quide_pop #pop_wrap #pop_content .pop_content_inner h2{text-align: center;font-size: 20px;} .evt_quide_pop #pop_wrap #pop_content .pop_content_inner h3{margin: 15px 0 5px;} .evt_quide_main{border-bottom: 2px solid #000;padding-bottom: 15px;margin-bottom: 20px;} .evt_quide_main p{color: #777;font-size: 14px;} .evt_quide_pop p.emph{position: relative;text-indent: 8px;margin-top: 10px;color: #02a7c5;font-size: 12px;} .evt_quide_pop p.emph:before{content: '*';position: absolute;top: 2px;left: -8px;} .evt_quide_pop #pop_wrap #pop_content a.pop_close span{position: absolute;text-indent: -999em;background: url(/subscribe/images/dlb/baro_meter/baro_indv_close.png) no-repeat;background-size: 12px;width: 12px;top: 10px;right: 10px;} .accord_list>dl{font-size: 14px;color: #999;border-bottom: 1px solid #ddd;} .accord_list>dl> dt{position: relative;margin-bottom: 14px;color: #000;} .accord_list>dl> dt:after{content: "";background: url(/subscribe/images/dlb/baro_meter/baro_indv_arrow.png) no-repeat;width: 14px;height: 6px;position: absolute;background-size: 14px;right: 0;top: 6px;transform: rotate(180deg);} .accord_list>dl> dt.open:after{transform: none;} .accord_list>dl> dd{display: none;padding-bottom: 15px;font-size: 12px;} .accord_list>dl:first-child> dt:first-child+dd{display: block;} .accord_list>dl> dd ul li{position: relative;margin: 0 0 5px 6px;line-height: 1.7;} .accord_list>dl> dd ul li span{color: #555;} .accord_list>dl> dd ul li:before{content:"";position: absolute;width: 2px;height: 2px;border-radius: 1px;background-color: #000;left: -6px;top: 8px;} .accord_list>dl> dd ul li .parti_classifi li{color: #555;margin: 0 0 0 10px;} .accord_list>dl> dd ul li .parti_classifi li:before{content: "";width: 6px;height: 1px;background-color: #555;top: 9px;left: -10px;} .accord_list>dl> dd ul li>dl dt{color: #000;margin-top: 5px;} #pop_wrap.baro_indiv_wrap #pop_content{overflow: auto;} #pop_wrap.baro_indiv_wrap .btn_area a:last-child{background-color: #ccc;padding: 0 28px;line-height: 35px;height: 35px;text-align: center;display: inline-block;color: #fff;} #pop_wrap.baro_indiv_wrap .btn_area.on a:last-child{background-color: #02a7c5} /* 210324 : KSH : 바로미터 이벤트 팝업 */ .phone_certi_btn{width: 37%;float: right;margin-top: 8px;font-size: 13px;border: none;padding: 10px 6px;color: #fff;background-color: #ccc;border-radius: 2px;letter-spacing: inherit;} .phone_certi_btn.on{background-color: #02a7c5;} .certi_num_box{display: none;} .certi_num_box.on{display: block;} .certi_compl_bx{display: none;background-color: #eaeff4;color: #00aac9;padding: 15px 0 15px 30px;font-size: 15px;position: relative;} .certi_compl_bx span{position: relative;opacity: 0;} .certi_compl_bx span:before{content: "";background: url(/subscribe/images/dlb/baro_meter/baro_blue_check.png) no-repeat;width: 11px;height: 8px;background-size: 11px;position: absolute;top: 5px;left: -14px;} .certi_compl_bx.on{display: block;} .certi_compl_bx.on span{opacity: 1;transition: opacity 1s linear;} /* 210407 : WYJ : 럭키박스 */ .cafe_luckybox_event .luckyBox_2104 {position: relative;} .cafe_luckybox_event .luckyBox_2104 .boxWrap {position: absolute;left:7%;top:62%;z-index:2;width:100%;} .luckyBox_2104 .boxWrap li {display:inline-block;width:25%;margin-left:3%;} .smbox_move01 { animation:smbox 1s infinite; } @keyframes smbox{ 0% {transform: rotate(0deg);} 50% {transform: rotate(7deg)} 100% {transform: rotate(0deg);} } .smbox_move02 { animation:smbox02 1s infinite; animation-delay:0.5s; } @keyframes smbox02{ 0% {transform: rotate(0deg);} 50% {transform: rotate(-7deg)} 100% {transform: rotate(0deg);} } .smbox_move03 { animation:smbox03 1s infinite; animation-delay:1s; } @keyframes smbox03{ 0% {transform: rotate(0deg);} 50% {transform: rotate(7deg)} 100% {transform: rotate(0deg);} } .luckyBox_2104 .boxWrap li.on {animation:jump 1.5s 2;} @keyframes jump { 0% {transform:translateY(0)} 25% {transform:translateY(-20px)} 50% {transform:translateY(0)} 75% {transform:translateY(-20px)} 100% {transform:translateY(0)} } /* 2204 : WSN : 스크래치이벤트 */ .cafe_scratch_event .scratchBox_2105 {position: relative;} .cafe_scratch_event .scratchBox_2105 .boxWrap {position: absolute; top:52.3%; z-index:2; width:310px; height:203px; left:0; right:0; margin:0 auto;} .cafe_scratch_event .scratchBox_2105 .boxWrap .scratch_evt_before {position: relative; top:0; z-index:2; width:310px; height:203px; left:0; right:0; margin:0 auto;} .cafe_scratch_event .scratchBox_2105 .boxWrap .scratch_evt_before .scratch_evt_btn{position: absolute; top:37.7%; width:29.1%; left:0; right:0; margin:0 auto;} .cafe_scratch_event .scratchBox_2105 .boxWrap .container {position: relative; width: 100%;height: 100%;margin: 0 auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; z-index: 98; } .cafe_scratch_event .scratchBox_2105 .boxWrap .canvas {position: absolute;top: 0; left:0; width:310px; height:203px; z-index: 998;} .cafe_scratch_event .scratchBox_2105 .boxWrap .canvas_header {position: absolute;top: 0;width:310px; z-index: 999;} .cafe_scratch_event .scratchBox_2105 .boxWrap .form .pop_result {width:310px; height:203px;} .cafe_scratch_event .scratchBox_2105 .scratch_deco {position: absolute; top:50%; left:9.7%; width:30.3%; height:15.2%; z-index:99; transform: translateY(190%);} .cafe_scratch_event .notice {margin:30px 0; padding:0 15px;} .cafe_scratch_event .notice dt{font-family:"RixSGo B"; font-size:14px; line-height:22px; color:#333; margin-bottom:6px} .cafe_scratch_event .notice dd{font-family:"RixSGo M"; font-size:8px; line-height:20px; color:#666} .cafe_scratch_event .notice dd ul li {padding-left: 9px; background: url(/subscribe/images/common/bu_dot_gray666.gif) left 8px no-repeat; background-size: 3px 3px; font-size: 12px;} /* 210506 : WSN : 건강나이계산기 */ .health_wrap {position:relative;padding-bottom:50px;} .health_wrap.type02 {padding-bottom:0;} .health_wrap .header {padding:18px 20px 20px;background:#fff;} /* .health_wrap h1 {display:block; width:156px;height:18px;text-indent:-9999px;background:url("/subscribe/images/dlb/baro_meter/logo.png") no-repeat 0 0;background-size:contain;} .health_wrap .evt_guide_btn{position: absolute;width: 86px;padding: 4px 8px;background-color: #fff;border: 1px solid #ddd;box-shadow: none;font-size: 12px;color: #999;overflow: visible;cursor: pointer;border-radius: 15px;top: 14px;right: 14px;} */ .health_wrap .health_intro {text-align: center; padding:30px 8% 60px; box-sizing: border-box;} .health_wrap .health_intro_title h2 {font-size:27px; color:#fa4e4e; line-height: 1.6; font-weight: bold; } .health_wrap .health_intro_title .intro_img { margin-top:20px;} .health_intro_box {position: relative; width:300px; height:200px; overflow: hidden; left:0; right:0; margin:0 auto;} .health_intro_box ul {position: absolute; left:0; width:600px; height:200px; } .health_intro_box li {float: left; width:100%; height:250px;} .health_intro_wrap_box{position: relative; width:300px; height:200px; left:0; right:0;} .health_intro_wrap_box .circle{position:absolute; top:10.9%; width:55%; left:0; right:0; margin: 0 auto ;} .health_intro_wrap_box .deco_1{position: absolute; top:46px; left: 40px; width:220px; opacity: 0; animation: healthleftTo 2s ease forwards;} .health_intro_wrap_box .deco_2{position: absolute; top:40px; left: 160px; width:55px; opacity: 0; animation: healthleftToshine 4s 2s ease-in forwards;} .health_intro_wrap_box .deco_3{position: absolute; top:0px; left: 0px; width:300px; opacity: 0; animation: healthBlink 4s 6s linear forwards; } .health_intro_wrap_box .deco_4{position: absolute; top:95px; left: 68px; width:200px; opacity: 0; animation: healthleftTo 1s ease forwards;} .health_intro_wrap_box .deco_5{position: absolute; top:41px; left: 77px; width:135px; opacity: 0; animation: healthBlink 4s 2s linear forwards;} .health_intro_wrap_box .deco_6{position: absolute; top:10px; left: 20px; width:280px; opacity: 0; animation: healthBlink 4s 6s linear forwards; } @keyframes healthleftTo{ 0%{margin-left:100px; opacity: 0;} 100%{margin-left:0; opacity: 1;} } @keyframes healthleftToshine{ 0%{opacity: 0;} 50%{opacity: 1;} 80%{opacity: 0;} 100%{opacity: 1;} } @keyframes healthBlink{ 0%{opacity: 0;} 50%{opacity: 0.5;} 100%{opacity: 1;} } .health_wrap .health_intro_txt {margin-top:20px;} .health_wrap .health_intro_txt h3 {font-size:24px; line-height: 1.2;} .health_wrap .health_intro_txt h3 span {font-size:32px; font-weight: bold;} .health_wrap .health_intro_txt .health_intro_year {font-size:25px; margin:20px auto;} .health_wrap .health_intro_txt .health_intro_year input {border: none; border-bottom:2px solid #4671d2; text-align: center; width:80px; font-weight: bold; font-size:26px;} .health_wrap .health_intro_txt button {display:block; width:95%; margin:0 auto; background:#4671d2; border-radius: 50px; border:none; color:#fff; font-weight:bold; font-size:20px; height:57px; line-height: 57px;} .health_wrap .health_intro_txt .health_intro_detail {margin:20px auto; font-size:12px; color:#999; line-height:1.5; letter-spacing: normal;} .health_wrap .health_intro_txt .health_intro_total_member p {position: relative; display: inline-block; font-size:13px; color:#4671d2; z-index:10; line-height:1.5; letter-spacing: normal;} .health_wrap .health_intro_txt .health_intro_total_member p:after {content: ''; position: absolute; left:0; bottom:3px; background:#ebf2ff; width:100%; height:5px; z-index: -1;} .health_wrap .health_intro_txt .health_intro_total_member span > em {font-size:15px; font-weight: bold;} .health_wrap .health_intro_txt .health_intro_total_member span.txt_b {font-weight:bold; font-size:13px; } .health_wrap .conts {padding:20px 20px 0; text-align: center;} .health_wrap .conts .num_ins {margin-top:-26px;} .health_wrap .conts .num_ins.bx_valid {margin-bottom:0} .health_wrap .conts.info_fix {margin-top:40px;} .health_wrap .dlp_txt {margin-bottom:10px;color:#999;font-size:14px;font-weight:bold;line-height:1.6;} .health_wrap .ques {color:#000;font-size:27px;font-weight:bold;line-height:1.4;} .posture_slide_con .posture_intro_img{width: 30%;padding-left: 10%;margin-top: 30px;} .posture_slide_con .posture_intro_cont{padding-left: 10%;margin-top: 25px;} .posture_slide_con p:nth-child(1){font-size: 24px; color: #000;} .posture_slide_con p:nth-child(1) span {font-weight: bold;color: #000;} .posture_slide_con p:nth-child(2){margin-top:20px; font-size: 15px; color: #000;} .posture_slide_con .posture_intro_cont p{margin-top: 25px;font-size: 14px;color: #999;} .posture_slide_con .posture_q_tit {padding:50px 0 25px; background-color: #fff;} .posture_slide_con .posture_q_tit span.purple {position:relative; font-size:17px; color:#4671d2; margin-left:-20px;} .posture_slide_con .posture_q_tit span.purple:after {content:''; display:inline-block; position: absolute; right:-20px; top:2px; width:16px; height:16px; background: url(/subscribe/images/dlb/health_check/health_purple_smile.png) no-repeat center;} .posture_slide_con .posture_q_tit .posture_q_all {font-size:16px;} .posture_slide_con .posture_q_tit .posture_q_all span.bold {font-weight:bold} .posture_slide_con .posture_q_box {width:320px; height:173px; left:0; right:0; margin:20px auto 0; background:#dce8ff; border-radius: 20px;} .posture_slide_con .posture_q_box .posture_q_img {width:320px; height:173px; animation:play 2s steps(4); animation-iteration-count: infinite;} .posture_slide_con .posture_q_box .posture_q_img.img01 {background: url(/subscribe/images/dlb/health_check/health_animation01.png) no-repeat 0 0; background-size:320px auto;} .posture_slide_con .posture_q_box .posture_q_img.img02 {background: url(/subscribe/images/dlb/health_check/health_animation02.png) no-repeat 0 0; background-size:320px auto;} .posture_slide_con .posture_q_box .posture_q_img.img03 {width:320px; height:173px; animation:play2 3s steps(6); animation-iteration-count: infinite;} .posture_slide_con .posture_q_box .posture_q_img.img03 {background: url(/subscribe/images/dlb/health_check/health_animation03.png) no-repeat 0 0; background-size:320px auto;} @keyframes play { from { background-position: 0px 0px; } to { background-position: 0px -692px; } } @keyframes play2 { from { background-position: 0px 0px; } to { background-position: 0px -1038px; } } .posture_slide_con .posture_q_cont ul {display: flex;} .posture_slide_con .posture_q_cont ul li{position:relative; display:flex; justify-content: space-around; width:25%; height:100%; margin-right:20px; text-align: center;color: #555;} .posture_slide_con .posture_q_cont ul li a {display: block; width:100%; height:100%;} .posture_slide_con .posture_q_cont ul li a > img {position: relative; width:69px; height:69px;} .posture_slide_con .posture_q_cont ul li p {font-size:13px; font-weight: bold; margin-top:10px;} .posture_slide_con .posture_q_cont ul li p.ls {letter-spacing: -2px;} .posture_slide_con .posture_q_cont ul li:last-child {margin-right:7px;} .posture_slide_con .posture_q_cont ul li.on:before{content:''; display: block; position: absolute; left:0; right:0; margin:0 auto; top:0; width:69px; height:69px; background:rgba(0,0,0,0.7); border-radius:16px; z-index: 20;} .posture_slide_con .posture_q_cont ul li.on:after {content:''; display: block; position: absolute; left:0px; right:-5%; top:-5%; bottom:0; background:url(/subscribe/images/dlb/health_check/checked_round.png) no-repeat right top; background-size:25px 25px; z-index: 21; width:69px; height:69px; margin:0 auto;}} /* slide_bullet */ .swiper-container {position: relative;} .swiper-container .swiper-button-prev.health_check {position: absolute; top:30px; left:0 !important; width:15px; height:17px; background:url(/subscribe/images/dlb/health_check/btn_prev.png) no-repeat 100% 100%;} .swiper-container .swiper-pagination.health_check {position: absolute; top:5px; right:0 !important; text-align: right; width:100%; height:50px; right:5%;} .swiper-container .swiper-pagination.health_check .swiper-pagination-bullet {position: relative;width:20px; height:20px; text-align: center; line-height: 20px; font-size:12px; color:#e2e2e2; opacity: 1; background: transparent; border:2px solid #e2e2e2; margin:0 4px !important;} .swiper-container .swiper-pagination.health_check .swiper-pagination-bullet:first-child:after {content:''; background:#fff; width:0;} .swiper-container .swiper-pagination.health_check .swiper-pagination-bullet:after {position: absolute; content: ''; width: 10px;height: 3px; top: 10px; left: -10px; background: #e2e2e2;} .swiper-container .swiper-pagination.health_check .swiper-pagination-bullet-active {color:#007aff; border:2px solid #007aff; background: transparent; transition: all .5s} .swiper-container .swiper-pagination.health_check .swiper-pagination-bullet-active:after {position: absolute; content: ''; width: 10px;height: 3px; top: 10px; left: -10px; background: #007aff; transition: all .3s} .swiper-container .swiper-pagination.health_check .swiper-pagination-bullet-active:last-child:after {position: absolute; content: '';} .swiper-container .swiper-pagination.health_check .swiper-pagination-bullet:hover {color:#007aff; border:2px solid #007aff;} .swiper-container .swiper-pagination.health_check .swiper-pagination-bullet-history {color: #007aff; border:2px solid #007aff;} .swiper-container .swiper-pagination.health_check .swiper-pagination-bullet-history:after {position: absolute; content:''; width:10px; height:3px; top:10px; left:-10px; background:#007aff;} /* page04 */ .posture_slide_con .posture_q_find {padding:23px 10px; border-top:1px dotted #c7c8c8; box-sizing: border-box;} .posture_slide_con .posture_q_find_select .title {position:relative; padding:20px 0 20px 61px; background:#f1f6ff; border-radius:20px; color:#4671d2; text-align:left; font-size:18px; font-weight: bold;} .posture_slide_con .posture_q_find_select .title:before {content:''; position: absolute; left:15px; top:-3px; width:34px; height:34px; background:url(/subscribe/images/dlb/health_check/select_title01.png) no-repeat 100% 100%;} .posture_slide_con .posture_q_find_select.select02, .posture_slide_con .posture_q_find_select.select03 {margin-top:35px;} .posture_slide_con .posture_q_find_select.select01 .title:before {background:url(/subscribe/images/dlb/health_check/select_title01.png) no-repeat 100% 100%;} .posture_slide_con .posture_q_find_select.select02 .title:before {background:url(/subscribe/images/dlb/health_check/select_title02.png) no-repeat 100% 100%;} .posture_slide_con .posture_q_find_select.select03 .title:before {background:url(/subscribe/images/dlb/health_check/select_title03.png) no-repeat 100% 100%;} .posture_slide_con .posture_q_find_select ul {display: flex; flex-wrap: wrap;} .posture_slide_con .posture_q_find_select ul li{position:relative; display:flex; justify-content: space-between; width:30%; height:100%; margin:20px 5% 0 0; text-align: center;color: #555;} .posture_slide_con .posture_q_find_select ul li a {display: block; width:100%; height:100%;} .posture_slide_con .posture_q_find_select ul li a > img {position: relative; width:82px; height:82px;} .posture_slide_con .posture_q_find_select ul li p {font-size:13px; font-weight: bold; margin-top:10px;} .posture_slide_con .posture_q_find_select ul li:nth-child(3n) {margin-right:0;} .posture_slide_con .posture_q_find_select ul li.on:before{content:''; display: block; position: absolute; left:0; right:0; margin:0 auto; top:0; width:82px; height:82px; background:rgba(0,0,0,0.7); border-radius:16px; z-index: 20;} .posture_slide_con .posture_q_find_select ul li.on:after{content:''; display: block; position: absolute; left:0px; right:-5%; top:-5%; bottom:0; background:url(/subscribe/images/dlb/health_check/checked_round.png) no-repeat right top; background-size:25px 25px; z-index: 21; width:82px; height:82px; margin:0 auto;} .posture_slide_con .posture_q_find_select .health_check_finish {width:90%; margin:30px auto 0; background:#4671d2; border-radius: 50px;} .posture_slide_con .posture_q_find_select .health_check_finish a {display:block; width:100%; height:100%;} .posture_slide_con .posture_q_find_select .health_check_finish a span {display: inline-block; position: relative; padding-right:20px; background:#4671d2; color:#fff; font-size:21px; padding:20px 20px 20px 0; font-weight: bold;} .posture_slide_con .posture_q_find_select .health_check_finish a span:after {display: inline-block; content: ''; width: 9px; height: 18px; position: absolute; right: 0; top: 50%; background: url(/subscribe/images/dlb/health_check/health_check_arrow.png) no-repeat 0 center; background-size: contain; transform: translateY(-50%);} /* 20060 : KSH : 멜다방 20년 6월 퀴즈 이벤트 팝업 */ .june_quiz_2021 {position:relative;min-height:400px;padding:40px 0 35px;background:url("/subscribe/images/dlb/melbang/event/juneQuiz_2021/bg_juneQuiz_01.png") no-repeat 0 0;background-size:100%;} .june_quiz_2021 .cont {margin:91% 25px 0;border-radius:12px;background:#fff;} .june_quiz_2021 .cont .result {display:block;margin-top:20px;} .june_quiz_2021 .cont .type03 .result {display:block;margin-top:0;} .june_quiz_2021 .type01 .info {margin:0 22px;padding-top:15px;} .june_quiz_2021 .type02 .info {margin:0 22px 20px;position: relative;} .june_quiz_2021 .cont .type02 .info .large_txt{color: #000;font-size: 30px;font-weight: bold;text-align: center;margin-bottom: 20px;} .june_quiz_2021 .cont .type02 .info .info_txt{color:#7c7e7c;font-size: 15px;text-align: center;} .june_quiz_2021 .cont .type02 .info .info_txt .customer_num{color: #20b784;} .june_quiz_2021 .cont .type02 .info .info_txt .co_num{color: #ee3722;} .june_quiz_2021 .cont .type02 .info img+img{right: 0;} .june_quiz_2021 .type02 .mel_quiz_tit{font-size: 20px;color: #000;font-weight: bold;text-align: center;margin: 10px 0 10px;} .june_quiz_2021 .type02 .mel_quiz_tit_sub{font-size: 14px;color: #534c43;text-align: center;} .june_quiz_2021 .type02 .mel_guiz_info{font-size: 14px;font-weight: 700;color: #000;background-color: #fff;margin-top: 20px;border-radius: 5px;text-align: center;padding: 15px 0;line-height: 1.5;} .june_quiz_2021 .type02 .mel_guiz_info span{color: #666;font-weight: 400;} .june_quiz_2021 .type03 .info {padding-top:37px;} .june_quiz_2021 .radius_box{border-radius: 12px;background-color: #d7ac79;} .june_quiz_2021 .cont .info ul{margin-top: 20px;} .june_quiz_2021 .cont .info ul li{border: 2px solid #ac8960;padding: 12px 0px;text-align: center;font-size: 18px;font-weight: 700;border-radius: 5px;margin-bottom: 15px;color: #fff;background-color: #c1996b;} .june_quiz_2021 .cont .info ul li.on{border: 2px solid #000;background-color: #fff;color: #000;} /* 210625 : BHY : 동의수정 */ #pop_wrap.baro_expert h1 {text-align: left;padding-left: 15px;} #pop_wrap.baro_expert #pop_content .pop_content_inner > p {font-size: 14px;padding-bottom: 25px;} #pop_wrap.baro_expert #pop_content .pop_content_inner > h2 {font-size: 14px;margin-top: 15px;font-weight: normal;} #pop_wrap.baro_expert #pop_content .pop_content_inner .txtarea{margin:15px 0 0; background-color:#f8f8f8; height:99px; overflow-y:scroll; font-size:15px;box-sizing:border-box;border-radius: 5px;} #pop_wrap.baro_expert #pop_content .pop_content_inner .txtarea .view{height:100%;} #pop_wrap.baro_expert #pop_content .pop_content_inner .gurt_agree_box{padding:15px; font-size:12px; line-height:20px; font-family:"RixSGo M";} #pop_wrap.baro_expert #pop_content .pop_content_inner .gurt_agree_box ul li{position:relative;color: #333;font-size:12px; line-height:20px;padding:0 0 0 12px;background: none;margin-bottom: 10px;} #pop_wrap.baro_expert #pop_content .pop_content_inner .gurt_agree_box ul li:before {content:''; position:absolute; left:5px; top:8px; width:3px; height:3px; background:#000;} #pop_wrap.baro_expert #pop_content .pop_content_inner .gurt_agree_box ul li span.notice {color: #333;} #pop_content .pop_content_inner .step_level {position: relative;display: flex;align-items: center;} /* 210630 : WYJ : 바로미터 인증화면 수정 */ .baro_wrap.type02 .intro_tit_h3 {font-size:17px !important;} .baro_wrap.type02 .txt_bround {font-size: 13px;color: #666;} .baro_wrap .btn_total_agree a {display:block;padding:10px 15px; box-sizing: border-box; background:#475069; color:#fff; font-size:13px; font-weight: 700; border-radius: 5px;} .baro_wrap .total_agree_sub_info {margin-top: 10px;font-size: 12px;} .baro_wrap .total_agree {padding-bottom: 0;} #insperAgree .gurtAnly .gurt_agree_box ul li:before, .baro_wrap .gurtAnly .gurt_agree_box ul li:before {display:none !important;} .gurtAnly .total_agree_grade .total_agree_grade_tooltip {right: -40px;} .gurtAnly .total_agree_grade .total_agree_grade_tooltip:before, .gurtAnly .total_agree_grade .total_agree_grade_tooltip:after {right: 55px;} /* 220203 : WSN : 동의팝업 */ .new_agr .total_agree_grade .total_agree_grade_tooltip {right: -60px;} .new_agr .total_agree_grade .total_agree_grade_tooltip:before, .new_agr .total_agree_grade .total_agree_grade_tooltip:after {right: 80px;} .new_agr .total_agree_grade .total_agree_grade_tooltip .tooltip_list{height:25px; line-height:25px;} .new_agr .total_agree_grade .total_agree_grade_tooltip .tooltip_list li{font-weight:normal;font-family:"RixSGo EB";padding-left:0;} /* 210707 : WYJ : 멜다방 21년 7월 룰렛 이벤트 */ .roulette2107_evt {margin:0 auto; max-width:720px;width:100%; overflow:hidden; position:relative;} .roulette2107_evt .melda_img_con {position:relative; font-size:0; line-height:0;} .roulette2107_evt img[class*="roulette_con"] {position:absolute; left:50%; transform:translate(-50%);} .roulette2107_evt .roulette_con01 {position:absolute; left:50%; transform:translate(-50%); top:40%; width:74.7%;} .roulette2107_evt .roulette_con01 img {transform-origin:center center;z-index:1;} .roulette2107_evt .roulette_con01.on img {transition:all 5s ease-out;} .roulette2107_evt img.roulette_con02 {width:7.2%; top:34%; -webkit-transform:translate(-50%) translate3d(0,0,0);} .roulette2107_evt img.roulette_con03 {left:4.4%; width:13.2%; top:80%; transform:translate(0);} .roulette2107_evt .btn_01 {position:absolute; width:21%; left:50%; top:56%; transform:translate(-50%);} /* 210811 : WYJ : 채팅상담 랜딩 */ .chat_land_wrap .chat_law {height:13px;padding: 10px 15px 0 0;color: #bcccff;text-align: right;font-size: 11px;background: url("/subscribe/images/product/bg_chat_top.jpg") repeat-y 0 0;background-size: contain;} .chat_land_wrap #footer {margin-bottom: 0} /* 210820 : WYJ : 인증번호 받기 수정 */ .cert_phone_num {position: absolute;bottom: 6px;right: 0;} .cert_phone_num span {position: absolute;color: #e11b22;right: 90px;bottom: 3px;font-size: 16px;letter-spacing:-0.5px;} .cert_phone_num .btn {display: inline-block;padding: 0 8px;height: 30px;line-height: 30px;color: #666;font-size: 16px;border: 1px solid #ccc;} /* .group input.cert_nums {font-size: 14px;} .group input.cert_numsinput::placeholder {font-size: 14px;} */ .btn_all {display:inline-block; width:100%; height:40px; background-color:#ccc; color:#fff; text-align:center; line-height:40px;} .btn_all.on {background-color:#475069;} .btn_all span {color:#fff; font-size:16px;} /* 210825 : BHY : 멜다방 21년 9월 룰렛 이벤트 */ .roulette_2108 {margin:0 auto; max-width:720px;width:100%; overflow:hidden; position:relative;} .roulette_2108 .melda_img_con {position:relative; font-size:0; line-height:0;} .roulette_2108 img[class*="roulette_con"] {position:absolute; left:50%; transform:translate(-50%);} .roulette_2108 .roulette_con01 {position:absolute; left:50%; transform:translate(-50%); top:39%; width:80%;} .roulette_2108 .roulette_con01 img {transform-origin:center center;z-index:1;} .roulette_2108 .roulette_con01.on img {transition:all 5s ease-out;} .roulette_2108 img.roulette_con02 {width:14%; top:31.6%; transform:translate(-50%) translate3d(0,0,0);} .roulette_2108 img.roulette_con03 {left:4.4%; width:13.2%; top:80%; transform:translate(0);} .roulette_2108 .btn_01 {position:absolute; width:27%; left:50%; top:57%; transform:translate(-50%);} .roulette_2108 .animal {position:absolute; width:22.6%; left:5%; bottom:8%;} /* 210827 : WYJ : 보장분석 & 바로미터 팝업 */ .layer_wrap .layer_gurtAnly {position: relative;margin: 0 15px; text-align: center; border-radius: 45px; background: #fff;} .layer_wrap .layer_gurtAnly:after {display:block;content: "";width: 101px;height: 87px;background: url("/subscribe/images/dlb/common/img_pop_result.png") no-repeat 0 0;position: absolute;left: 50%;top: 50px;background-size: contain;transform: translateX(-50px);} .layer_wrap .gurt_pop_top {padding-top: 162px;text-align: center;font-size: 24px;font-weight: bold; line-height:1.3; letter-spacing:-1px;} .layer_wrap .gurt_pop_top span {color: #de4738;} .layer_wrap .gurt_pop_btm {margin: 22px 48px 0; padding: 12px 0 20px; color: #222;font-size:14px; border-top: 2px solid #f5f5f5;} .layer_wrap .gurt_pop_btm .btn_area {margin: 22px auto 0;width:auto; height: 40px;font-size: 14px;line-height: 40px; } .layer_wrap .gurt_pop_btm .btn_area a {display: block; height: 40px;font-size: 14px;line-height: 40px;color: #fff; border-radius:5px; background: #de4738;} .layer_wrap .gurt_pop_btm .btn_area a > span { color:inherit; vertical-align:initial; } .layer_wrap .gurt_pop_btm .sm_text {text-align:center; margin-top:22px; font-size:10px; color:#c2c2c2;} .layer_wrap .layer_gurtAnly .gurt_mid_text {margin-top:16px; text-align:center;} .layer_wrap .layer_gurtAnly .gurt_mid_text .desc {position:relative; display:block; font-size:18px; color:#222; font-weight:500; line-height:1.1; } .layer_wrap .layer_gurtAnly .gurt_mid_text .desc_think {z-index:2; position:relative; display:inline-block; padding-right:25px; font-size:18px; color:#222; font-weight:700; min-height:30px;} .layer_wrap .layer_gurtAnly .gurt_mid_text .desc_think:before {z-index:2; content:''; position:absolute; top:-4px; right:0; width:21px; height:30px; background:url('/subscribe/images/dlb/common/icon_think.png') no-repeat right bottom; background-size:21px auto;} .layer_wrap .layer_gurtAnly .gurt_mid_text .desc_think:after {z-index:-1; content:''; position:absolute; bottom:5px; left:0; right:0; width:100%; height:8px; border-radius:1px; background:#fdf151; opacity: 0.8;} .layer_wrap .layer_gurtAnly .gurt_mid_text .desc_think.type_100 {padding-right:42px; min-height:23px; color:#de4738; font-weight:600; line-height:1.1} .layer_wrap .layer_gurtAnly .gurt_mid_text .desc_think.type_100:after {bottom:2px;} .layer_wrap .layer_gurtAnly .gurt_mid_text .desc_think.type_100:before {width:38px; height:23px; background:url('/subscribe/images/dlb/common/icon_100.png') no-repeat right 5px; background-size:38px auto;} .layer_wrap .layer_gurtAnly .gurt_mid_text .txt {font-size:11px; color:#222;} .layer_wrap .layer_gurtAnly.type_no_bg:after {display:none; } .layer_wrap .layer_gurtAnly.type_no_bg .gurt_pop_top {padding-top:50px;} .layer_wrap .layer_gurtAnly a.pop_close {padding:15px; top:15px; right:15px;} /* 210907 : WSN : 플로핑배너 추가 */ .incall_btn {position: fixed; width:80%; left:0; right:0; margin:0 auto; min-width: 320px; bottom:80px; z-index: 90;} .incall_btn .incall_banner {position: relative; top: 0px; width: 80%; min-width: 320px; left:0; right:0; margin: 0 auto;} .incall_btn .incall_banner .incall_img {display:block; width:100%; height:100%; } .incall_btn .incall_close {position: absolute; top:3%; right:0%; z-index: 10; } .incall_btn .incall_close > img {width:50%;} /* 210907 : WSN : 팝업배너 추가 */ #pop_wrap .incall_pop {margin-left: 5%;width: 90%; z-index: 110;position: fixed;} #pop_wrap .incall_pop .incall_pop_content .pop_content_inner {position: relative; top: 47%; left: 50%; transform: translate(-50%,-50%);} #pop_wrap .incall_pop .incall_pop_content .pop_content_inner .incall_pop_btn {position: relative;} #pop_wrap .incall_pop .incall_pop_content .pop_content_inner .incall_pop_close {position: absolute; top:6.7%; right:17%; width:4%;} /* 211018 : WSN : 로또이벤트 */ .lotto2110_evt{margin:0 auto; max-width:720px;width:100%; overflow:hidden; position:relative;} .lotto2110_evt .melda_img_con{position:relative; font-size:0; line-height:0;} .lotto2110_evt img[class*="lotto_con"]{position:absolute; left:50%; transform:translate(-50%);} .lotto2110_evt img.lotto_con01{width:7.5%; top:54%;left: 63.5%;-webkit-transform:translate(-50%) translate3d(0,0,0);opacity: 0;} .lotto2110_evt div.lotto_con11{width: 35.6%;top: 70.6%;left: 7.5%;z-index: 1;position: relative;opacity: 1;transition: opacity 1s;} .lotto2110_evt div.lotto_con12{width: 35.6%;top: 75.6%;left: 33.3%;z-index: 2;position: relative;opacity: 1;transition: opacity 1s;} .lotto2110_evt div.lotto_con13{width: 35.6%;top: 72.2%;left: 56.8%;z-index: 1;position: relative;opacity: 1;transition: opacity 1s;} .lotto2110_evt img.lotto_ball_mark.red{width: 68.4%;left: 4.3%;top: 17.2%;position: absolute;transition: opacity 1s;transition-delay: 3.7s;z-index: 5;} .lotto2110_evt img.lotto_ball_res_stamp.red{width: 45.3%;left: 14.5%;top: 29.7%;position: absolute;} .lotto2110_evt img.lotto_ball_res_vita.red{width: 23.4%;left: 20.7%;top: 23.4%;position: absolute;} .lotto2110_evt img.lotto_ball_res_coffee.red{width: 39.8%;left: 16%;top: 25%;position: absolute;} .lotto2110_evt img.lotto_ball_mark.yellow{width: 68.4%;left: 21.5%;top: 22.3%;position: absolute;transition: opacity 1s;transition-delay: 6.1s;z-index: 5;} .lotto2110_evt img.lotto_ball_res_stamp.yellow{width: 45.7%;left: 36.3%;top: 36.7%;position: absolute;} .lotto2110_evt img.lotto_ball_res_vita.yellow{width: 17.6%;left: 50.4%;top: 30.5%;position: absolute;} .lotto2110_evt img.lotto_ball_res_coffee.yellow{width: 33.2%;left: 41.4%;top: 36.3%;position: absolute;} .lotto2110_evt img.lotto_ball_mark.green{width: 68.4%;left: 24.6%;top: 15.6%;position: absolute;transition: opacity 1s;transition-delay: 8.5s;z-index: 5;} .lotto2110_evt img.lotto_ball_res_stamp.green{width: 46.1%;left: 38.7%;top: 26.2%;position: absolute;} .lotto2110_evt img.lotto_ball_res_vita.green{width: 27.3%;left: 50%;top: 21.9%;position: absolute;} .lotto2110_evt img.lotto_ball_res_coffee.green{width: 34.4%;left: 41.8%;top: 25.8%;position: absolute;} .lotto2110_evt .btn_01{position:absolute; width:41.7%; left:50%; top:30%; transform:translate(-50%);animation: lotto_btn_ani infinite 1s linear;transform-origin: left; } .lotto2110_evt div[class*="lotto_con"] {position: absolute;} /* 2011018 : WSN : 로또 이벤트 팝업 */ .lottoBox_wrap20 .lottoBox_info{width:100%; background:#fff; border-radius:35px 35px 0 0;} .lottoBox_wrap20 .lottoBox_info ul li{padding:110px 0 25px; text-align:center;} .lottoBox_wrap20 .lottoBox_info ul li .res_img_star{ position:absolute; left:50%; transform:translateX(-50%); top:-130px; z-index: 101;} .lottoBox_wrap20 .lottoBox_info ul li .res_img_star img{ width:160px;} .lottoBox_wrap20 .lottoBox_info ul li .res_img_vita{ position:absolute; left:50%; transform:translateX(-50%); top:-146px; z-index: 101;} .lottoBox_wrap20 .lottoBox_info ul li .res_img_vita img{ width:85px;} .lottoBox_wrap20 .lottoBox_info ul li .res_img_stamp{ position:absolute; left:50%; transform:translateX(-50%); top:-95px; z-index: 101;} .lottoBox_wrap20 .lottoBox_info ul li .res_img_stamp img{ width:190px;} .lottoBox_wrap20 .lottoBox_info ul li strong{display:block; text-align:center; font-size:18px; letter-spacing:-0.05em; font-weight:700; margin-bottom:10px;} .lottoBox_wrap20 .lottoBox_info ul li p{font-size:14px; letter-spacing:-0.025em;} .lottoBox_wrap20 .lottoBox_info+.btn_confirm{display:block; background:#ff6665; color:#fff; padding:15px 0; font-size:14px; font-weight:700; text-align:center;} .lottoBox_wrap20 .fireWorks_lotto{animation:rouletteBox_fire20 1.2s ease; transform:scale(1);} /* 20211210 : LSW : 실손X파일 */ .gurt_xfile{ padding:30px 15px 0; background:url("/subscribe/images/dlb/gurtanly/bg_korea_paper.jpg") top center; background-size:100% auto; box-sizing: border-box; line-height:1.2; letter-spacing:-.06em; position:relative; word-break:keep-all; font-size:14px; overflow:hidden; font-family:"RixSGo M"; } .gurt_xfile #footer{ padding: 30px 15px; background-color: #f4f4f4; margin-left:-15px; margin-bottom:0; margin-top:0; width:calc(100% + 30px); } .gurt_xfile *,.lypop_gurt_xfile * { box-sizing:inherit; line-height:inherit; color:inherit; letter-spacing: inherit; word-break:inherit; font-size:inherit; } .gurt_xfile img{ max-width:100%; } .gurt_xfile .mt5{margin-top:5px;} .gurt_xfile .mt10{margin-top:10px;} .gurt_xfile .mt13{margin-top:13px;} .gurt_xfile .mt15{margin-top:15px;} .gurt_xfile .mt20{margin-top:20px;} .gurt_xfile .mt23{margin-top:23px;} .gurt_xfile .mt25{margin-top:25px;} .gurt_xfile .rix_b{font-family:"RixSGo B";} .gurt_xfile .rix_eb{font-family:"RixSGo EB";} .gurt_xfile .rix_m{font-family:"RixSGo M"} .gurt_xfile .xfile_c01{color:#0096af;} .gurt_xfile .xfile_c02{color:#fff;} .gurt_xfile .xfile_c03{color:#005664;} .gurt_xfile .fnt21{font-size:20px;} .gurt_xfile .fnt20{font-size:20px;} .gurt_xfile .sub_title{font-size:19px;} .gurt_xfile [class*=ico]{ display:inline-block; background-repeat:no-repeat; background-position:center; vertical-align: middle; } .gurt_xfile .bg_xfile_band{ background-image:url("/subscribe/images/dlb/gurtanly/bg_xfile_band.png"); width: 117px; height:88px; background-size:117px 88px; } .gurt_xfile .ico_xfile_tape{ background-image:url("/subscribe/images/dlb/gurtanly/ico_xfile_tape.png"); width: 56px; height: 50px; background-size:56px auto; } .gurt_xfile .ico_meritz_character01{ background-image:url("/subscribe/images/dlb/gurtanly/ico_meritz_character01.png"); width: 83px; height: 140px; background-size:auto 140px; } .gurt_xfile .ico_meritz_character02{ background-image:url("/subscribe/images/dlb/gurtanly/ico_meritz_character02.png"); width: 67px; height: 90px; background-size:auto 90px; } .gurt_xfile .ico_meritz_character03{ background-image:url("/subscribe/images/dlb/gurtanly/ico_meritz_character03.png"); width: 93px; height: 130px; background-size:auto 130px; } .gurt_xfile .ico_meritz_character04{ background-image:url("/subscribe/images/dlb/gurtanly/ico_meritz_character04.png"); width: 106px; height: 140px; background-size:106px auto; } .gurt_xfile .ico_meritz_character05{ background-image:url("/subscribe/images/dlb/gurtanly/ico_meritz_character05.png"); width: 120px; height: 155px; background-size:auto 155px; } .gurt_xfile .ico_meritz_character06{ background-image:url("/subscribe/images/dlb/gurtanly/ico_meritz_character06.png"); width: 97px; height: 94px; background-size:97px auto ; } .lypop_gurt_xfile .ico_meritz_character07,.gurt_xfile .ico_meritz_character07{ background-image:url("/subscribe/images/dlb/gurtanly/ico_meritz_character07.png"); width: 115px; height: 119px; background-size:auto 119px ; } .gurt_xfile .ico_xfile_dlab01{ background-image:url("/subscribe/images/dlb/gurtanly/ico_xfile_dlab01.png"); width: 42px; height: 52px; background-size:42px 52px; } .gurt_xfile .ico_xfile_dlab02{ background-image:url("/subscribe/images/dlb/gurtanly/ico_xfile_dlab02.png"); width: 31px; height: 44px; background-size:31px 44px; } .gurt_xfile .ico_xfile_dlab03{ background-image:url("/subscribe/images/dlb/gurtanly/ico_xfile_dlab03.png"); width: 44px; height: 39px; background-size:auto 39px; } .gurt_xfile .ico_xfile_dlab04{ background-image:url("/subscribe/images/dlb/gurtanly/ico_xfile_dlab04.png"); width: 44px; height: 39px; background-size:auto 39px; } .gurt_xfile .ico_xfile_red{ background-image:url("/subscribe/images/dlb/gurtanly/ico_xfile_red.png"); width: 5px; height: 7px; background-size:auto 7px; } .gurt_xfile .bg_xfile_band{position:absolute; top:0; right:0;} .gurt_xfile .generation_check_title{font-size:0; font-family:"RixSGo EB"; padding-bottom:22px; border-bottom:1px solid #cccccc;} .gurt_xfile .generation_check_title * {font-size:29px;} .gurt_xfile .summary_txt {line-height:1.56;} .gurt_xfile .summary_txt .txt{font-size:17px; font-family:"RixSGo B"; margin-top:22px;} .gurt_xfile .summary_txt .txt.fnt20 {font-size:20px;} .gurt_xfile .summary_txt .fnt21.rix_eb.mt10{line-height:1.45;} .gurt_xfile .summary_txt .btn_box,.lypop_gurt_xfile .btn_box{margin-top:10px;} .gurt_xfile .summary_txt .check_btn,.lypop_gurt_xfile .check_btn{font-size:16px; color:#fff; display:block; width:100%; height:60px; line-height:62px; border-radius:8px; border:2px solid #0096af; background-color:#0096af; text-align:center; box-shadow: 0 2px 3px 5px rgba(0,150,175,.1);} .gurt_xfile .summary_txt .align_c{text-align:center; margin-top:10px;} .gurt_xfile .advant_explain_area{position:relative; margin-top:18px;} .gurt_xfile .none_data{margin-top:42px;} .gurt_xfile .none_data + .advant_explain_area{margin-top:10px;} .gurt_xfile .advant_explain_area .ico_xfile_tape{position:absolute; top:-15px; right:-15px;} .gurt_xfile .advant_explain_area .ico_meritz_character06{position:absolute; top: -54px;right: -12px;} .gurt_xfile .advant_explain_area .bg_note_top{background:url("/subscribe/images/dlb/gurtanly/bg_paper_top.png") no-repeat top; background-size:100% 40px; height:30px;} .gurt_xfile .advant_explain_area .bg_note{background:url("/subscribe/images/dlb/gurtanly/bg_note_paper.png") repeat-y top; background-size:100% 69px; padding:0 20px 20px; line-height:1.57; box-shadow:0px 5px 10px 0px rgba(0,0,0,0.10);} .gurt_xfile .advant_explain_area .bullet{display:block; font-family:"RixSGo M"; font-size:0;} .gurt_xfile .advant_explain_area .shadow_box{font-size:14px; box-shadow:0 0 7px 4px #fff; display:inline-block; max-width:calc(100% - 14px); background-color:#fff;} .gurt_xfile .advant_explain_area li + li{margin-top:5px;} .gurt_xfile .advant_explain_area li + li.mt10{margin-top:10px;} .gurt_xfile .advant_explain_area .bullet::before{content:""; display:inline-block; width:7px; height:7px; border-radius:7px; border:2px solid #f03724; box-sizing:border-box; vertical-align: top; margin-top:6px; margin-right:7px; box-shadow:0 0 6px 15px #fff;} .gurt_xfile .advant_explain_area .call_btn{color:#0096af; display:block; width:100%; height:48px; line-height:48px; border-radius:8px; background-color:#fff; border:2px solid #0096af; text-align:center; margin-top:15px;} .gurt_xfile .radio_type {position:relative;} .gurt_xfile .radio_type .txt{position:relative; font-size:14px; padding-left:20px; display:inline-block; height:16px; line-height:19px;} .gurt_xfile .radio_type input{position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; opacity:0;} .gurt_xfile .radio_type .txt::before{content:""; position:absolute; top:calc(50% - 8px); left:0; width:16px; height:16px; border:1px solid #bbbbbb; border-radius:16px; box-sizing:border-box;} .gurt_xfile .radio_type .txt::after{content:""; position:absolute; width:10px; height:10px; background-color:#f03724; border-radius:9px; top: calc(50% - 5px); left:3px; transition:transform .25s ease-in-out; transform:scale(0); box-sizing:border-box;} .gurt_xfile .radio_type input:checked + .txt::after{transform:scale(1);} .gurt_xfile .xfile_user_example{position:relative; margin-top:30px; padding:25px 15px 17px; background-image:url("/subscribe/images/dlb/gurtanly/bg_korea_paper02.jpg"); background-position:top center; background-size:100% auto; box-shadow:0 0 7px 4px rgba(0,0,0,0.1); line-height:1.52;} .gurt_xfile .xfile_user_example img[src*="x_file_text.png"]{width:267px;} .gurt_xfile .xfile_user_example .bg_green{opacity:.8; z-index:1;background-color:#2db2c8; width:100%; height:100%; top:0; left:0; position:absolute;} .gurt_xfile .xfile_user_example .bg_blue{opacity:.9; z-index:1;background-color:#3897cd; width:100%; height:100%; top:0; left:0; position:absolute; border-radius:0 0 0 26px; } .gurt_xfile .xfile_user_example .content_box{z-index:2; position:relative;} .gurt_xfile .xfile_user_example .content_box .txt{font-size:16px;} .gurt_xfile .xfile_user_example .content_box .bb_green{border-bottom:1px solid rgba(0,177,201,0.8); padding-bottom:22px;} .gurt_xfile .xfile_user_example .example_txt{font-size:0; white-space:nowrap; border-top:1px solid rgba(86,203,219,0.8); padding-top:22px; position:relative; margin-top:25px;} .gurt_xfile .xfile_user_example .example_txt [class*=character]{position:absolute; top:0; left:-20px;} .gurt_xfile .xfile_user_example .example_txt .ico_meritz_character01{top:-20px; } .gurt_xfile .xfile_user_example .example_txt .ico_meritz_character03{top:-5px; } .gurt_xfile .xfile_user_example .example_txt .ico_meritz_character04{top:-25px; left:-26px;} .gurt_xfile .xfile_user_example .example_txt .ico_meritz_character05{top: -30px;left: -33px;} .gurt_xfile .xfile_user_example .balloon_box{display:inline-block; font-size:14px; white-space:normal; vertical-align: top; margin-left:70px;} .gurt_xfile .xfile_user_example .balloon_box img{width:100%;} .gurt_xfile .xfile_user_example .example_txt .balloon{width:calc(100% + 42px); position:relative; border-radius:0 0 0 26px; background-repeat:no-repeat; box-sizing: content-box; background-size:100% auto; margin-left:-12px;} .gurt_xfile .xfile_user_example .example_txt .balloon>p{ z-index:2; position:relative; line-height:1.65; letter-spacing:-.06em} .gurt_xfile .call_us{padding:20px 2px 25px 18px; font-size:0; } .gurt_xfile .call_us .txt{width:calc(100% - 67px); line-height:1.43; display:inline-block; vertical-align: middle; font-size:0;} .gurt_xfile .call_us span{font-size:15px; } .gurt_xfile .call_us02 {position:relative; padding:0; } .gurt_xfile .call_us02_txt { display: inline-block; padding-bottom:40px; width: calc(100% - 67px);} .gurt_xfile .call_us02_txt img {width:90%;} .gurt_xfile .call_us02 .align_c_wrap { margin-top: 18px; border-radius: 15px 0 15px 15px; height:40px; line-height:40px; /* background:url('/subscribe/images/dlb/gurtanly/gurt22_white_bg.png') no-repeat; background-size:92%; */ background-color:#fff; text-align: center; width:calc(100% - 38px); position:relative; font-size:13px; min-width:187px; } .gurt_xfile .call_us02 .align_c_wrap::after {content:""; width:24px; height:16px; border-top:1px solid #fff; position:absolute; top:0; right:-12px; border-width: 8px; border-right: 12px solid transparent; box-sizing: border-box;} .gurt_xfile .call_us02 .ico_meritz_character02 {position:absolute; right:0; width:83px; height:112px; background-size:auto 112px;} .gurt_xfile .dlab_hashtag{padding-top:40px; border-top:1px solid #cccccc;} .gurt_xfile .dlab_hashtag .lists{margin-top:20px;} .gurt_xfile .dlab_hashtag .list {background-color:#fff; padding:10px; box-shadow:0 4px 4px 0 rgba(0,0,0,0.1); border-radius:5px; font-size:0;} .gurt_xfile .dlab_hashtag .list + .list{margin-top:5px; } .gurt_xfile .dlab_hashtag .list [class*=ico]:not(.ico_xfile_red){width:80px; height:80px; background-color:#e6eef3; border-radius:40px; vertical-align:top;} .gurt_xfile .dlab_hashtag .list .ico_xfile_dlab01{background-position:23px 15px;} .gurt_xfile .dlab_hashtag .list .ico_xfile_dlab02{background-position:26px 20px;} .gurt_xfile .dlab_hashtag .list .ico_xfile_dlab03{background-position:18px 19px;} .gurt_xfile .dlab_hashtag .list .ico_xfile_red{margin-left:7px; vertical-align: 2px;} .gurt_xfile .dlab_hashtag .list .txt_box{width:calc(100% - 80px); font-size:14px; display:inline-block; vertical-align:top; padding:6px 0 6px 15px; line-height:1.5; } .gurt_xfile .dlab_hashtag .list .to_link{margin-top: 10px;display: block;font-size: 14px; line-height:1;} .gurt_xfile .caution_area {margin-top:40px; background-color:#fff; border-radius:28px 28px 0 0; padding:25px 15px; width: calc(100% + 30px); margin-left:-15px;} .gurt_xfile .caution_lists {margin-top:15px;} .gurt_xfile .caution_lists .list{line-height:1.4; font-size:0;} .gurt_xfile .caution_lists .list + .list{margin-top:7px;} .gurt_xfile .caution_lists .number{font-size:11px; font-family: "RixSGo EB"; vertical-align: top; display:inline-block; width:15px;} .gurt_xfile .caution_lists .txt{font-size:13px; font-family: "RixSGo M"; vertical-align: top; display:inline-block; width:calc(100% - 15px); letter-spacing:-0.06em;} .lypop_gurt_xfile.layer_wrap{ top: calc(50% - 80px); } .lypop_gurt_xfile .lypop_gurt_content.layer_content{ width:calc(100% - 70px); min-height:165px; height:auto; position:relative; z-index: 2; background:url("/subscribe/images/dlb/gurtanly/bg_korea_paper.jpg") top center; background-size:100% auto; box-sizing: border-box; line-height:1.2; letter-spacing:-.06em; position:relative; word-break:keep-all; font-size:14px; overflow:hidden; font-family:"RixSGo M"; margin:0 auto; border-radius:5px; padding:10px; } .lypop_gurt_xfile .bg_area{ position:absolute; top:-20px; width:100%; height:232px; background-image:url("/subscribe/images/dlb/gurtanly/bg_xfile_band02.png"); background-repeat:no-repeat; background-position:center; background-size:100% auto; z-index: 1; } .lypop_gurt_xfile .btn_box{ margin-top:25px; } .lypop_gurt_xfile .check_btn{ box-shadow:none; height:50px; line-height:52px; } .lypop_gurt_xfile .bg_area .ico_meritz_character07{position:absolute; top:-77px; left: calc(50% - 68px);} .lypop_gurt_xfile .text_area{text-align:center; font-size:16px; line-height:1.56; margin-top:20px;} /* 220408 : kms : 실비 X 파일 없을때 to-be */ .call_txt_wrap {} .call_txt_wrap .call_sub_title {font-size:0.9375rem; color:#444;} .call_txt_wrap .btn_more .btn {display:inline-block; width:100%;color:#fff; text-align:center; font-weight:700; padding:1.40625rem; margin-top:1.34375rem; } .call_txt_wrap .btn_more .btn.btn_confirm {font-family:'RixSGo EB'; font-size:16px; font-weight:500; background-color:#0096af; -webkit-border-radius:5px; border-radius:5px; border:1px solid #0096af; -webkit-box-shadow:0 0.425rem 0.425rem rgba(0, 150, 175, 0.2); box-shadow:0 0.425rem 0.425rem rgba(0, 150, 175, 0.2);} .call_txt_wrap .align_c_wrap {text-align:center; padding:4px 0; margin-top:10px;} .call_txt_wrap .align_c_wrap p {font-size:0.875rem;} .rdo_call_wrap {position:relative; margin-top:42px; margin-bottom:40px;} .rdo_call_wrap .rdo_inner_bg {padding:20px 13.5px; margin-top:14px; background:url("/subscribe/images/dlb/gurtanly/img_paper_bg.png") repeat-x center; background-size:330px 197px; -webkit-box-shadow:0 10px 10px rgba(25, 23, 24, 0.08); box-shadow:0 10px 10px rgba(25, 23, 24, 0.08);} .rdo_call_wrap .rdo_inner_bg::before {content:''; position:absolute; top:27px; right:-14px; width:55.5px; height:49.5px; background:url("/subscribe/images/dlb/gurtanly/img_paper_bg2.png")no-repeat center; background-size:cover;} .rdo_call_wrap .rdo_inner_bg::after {content:''; position:absolute; top:-10px; right:-10px; width:96.5px; height:93.5px; background:url("/subscribe/images/dlb/gurtanly/img_grut_two.png")no-repeat center; background-size:100%;} .rdo_call_wrap h3 {font-family:'RixSGo EB'; font-size:1.25rem; font-weight:500; color:#111;} .rdo_call_wrap .input_radio {position:relative; display:block;} .rdo_call_wrap .input_radio:first-child {margin-top:2px;} .rdo_call_wrap .input_radio ~ .input_radio {padding-top:14.5px;} .rdo_call_wrap .input_radio label {font-size:0.875rem; vertical-align:middle; line-height:1.3; color:#444;} .rdo_call_wrap .btn_wrap {margin:20px 0 0;} .rdo_call_wrap .btn_wrap .btn {display:inline-block; width:100%; padding:14px 14px 13px; font-family:'RixSGo EB'; font-size:0.875rem; font-weight:500;} .rdo_call_wrap .btn_wrap .btn_g_line {text-align:center; color:#0096af; background-color:#fff; border:2px solid #0096af; -webkit-border-radius:5px; border-radius:5px;} .rdo_call_wrap .rdo_inner_bg .total_agree li {padding-top:13.5px;font-size:0.825rem;} .rdo_call_wrap .gurt_xfile .radio_type .txt {color:#444;} .layer_wrap.calladvant .layer_content:before {content:''; position:absolute; top:-100px; left:50%; width:114.5px; height:119px; -webkit-transform:translateX(-50%); transform:translateX(-50%); background:url("/subscribe/images/dlb/gurtanly/img_advant_cht.png")no-repeat center; background-size:cover;} .layer_wrap.calladvant .layer_calladvant {position: relative; width:100%; padding:20px 10px 10px; background:#fff url("/subscribe/images/dlb/gurtanly/img_advant_bg.gif")repeat top left; background-size:cover; border:1px solid #fff; -webkit-border-radius:8px; border-radius:8px; box-sizing: border-box;} .layer_wrap.calladvant .layer_calladvant .con {text-align:center;} .layer_wrap.calladvant .layer_calladvant .con p {font-family:'RixSGo M'; padding-top:7.5px; font-size:1rem; line-height:1.5; color:#222;} .layer_wrap.calladvant .layer_calladvant .btn_area {} .layer_wrap.calladvant .layer_calladvant .btn_area .btns {width:100%; height:auto; padding:17.5px; line-height:1; color:#fff; background:#0096af; border:1px solid #0096af; -webkit-border-radius:8px; border-radius:8px; box-sizing:border-box;} .layer_wrap.calladvant .layer_calladvant .btn_area .btns span {color:inherit; font-family:'RixSGo EB'; font-size:1rem; font-weight:500;} .lypop_gurt_xfile.call_gurt_content .bg_area {background-image:none !important;} .lypop_gurt_xfile.call_gurt_content .check_btn {line-height:48px !important;} /* 220307 : CKM : 운전자 보험 간편점검서비스 */ .gurt_drive_intro {position: relative; overflow: hidden;} .gurt_drive_intro_anchor {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:calc(100% - 110px); height:20%; z-index: 2;} .gurt_drive_intro_anchor:first-of-type {position:absolute; top:46%; left:50%; height:15%; z-index: 2;} .gurt_drive_intro_anchor:nth-of-type(2) {position:absolute; top:64.5%; left:50%; height:15%; z-index: 2;} .gurt_drive_intro_anchor:last-of-type {position:absolute; top:84%; left:50%; width:29%; height:5%; z-index: 2;} .gurt_drive_dlpo.product_layer_tab ul li .f_btn {text-align: center; background:#4922ac;} .gurt_drive_dlpo.product_layer_tab ul li .f_btn span {padding:2px 35px 0 20px; font-size:18px;} /* 운전자간편점검 결과서 */ .content_gurt_drive {background:#f1fcff;} .drive_lack_color {color:#ffa729;} .drive_lack_color_bg {background:#ffa729;} .drive_enough_color {color:#4519b6;} .drive_enough_color_bg {background:#4519b6;} .drive_enough_color_bg_none {background:none;} .gurt_drive_result {padding:0 15px;} .gurt_drive_result .notice_area {padding-top:35px; text-align: center;} .gurt_drive_result .notice_area .drive_check_title {font-size: 29px; font-family: "RixSGo EB"; box-shadow: inset 0 -8px 0 #e1d8fb; font-weight:bold;} .gurt_drive_result .notice_area .drive_check_title .driver_name {font-size:inherit; font-family: inherit; color:#4519b6;} .gurt_drive_result .notice_area .sub-txt {margin-top:25px;} .gurt_drive_result .notice_area .sub-txt:last-child {margin-top:12px; font-family: "RixSGo EB"; font-weight:bold; letter-spacing:-1.5px;} /* 운전자간편점검 빙고 영역 */ .gurt_drive_result .bingo_area {position: relative; padding:20px 15px; margin-top:25px; border:1px solid #e3e3e3; border-radius: 15px; background:#ececec;} .gurt_drive_result .bingo_area .bingo_title {text-align: center; font-size:27px; font-family: "RixSGo B"; font-weight:600;} .gurt_drive_result .bingo_area .bingo_inner {position: relative; z-index: 1; overflow:hidden;} .gurt_drive_result .bingo_area .bingo_flex {display: flex; justify-content: space-between; width:100%;} .gurt_drive_result .bingo_area .bingo_flex:first-child {margin-top:15px;} .gurt_drive_result .bingo_area .bingo_flex:nth-child(2) {margin: 12.5px 0;} .gurt_drive_result .bingo_area .bingo_item {display: flex; position: relative; justify-content: center; align-items: center; box-sizing:border-box; width:30%; max-height:92px; padding:30px 12px; background:#dddddd; color:#444444; border:1px solid #f1f1f1; border-radius: 15px; text-align: center; white-space: nowrap;} .gurt_drive_result .bingo_area .bingo_item.default {background:#dddddd; color:#444444; border:1px solid #f1f1f1;} .gurt_drive_result .bingo_area .bingo_item.enough_result {background:#4519b6; color:#fff; border:1px solid #fff;} .gurt_drive_result .bingo_area .bingo_item.lack_result {background:#ffa729; color:#fff; border:1px solid #fff;} .gurt_drive_result .bingo_area .bingo_item .item_txt {font-size:14px; font-family: "RixSGo B"; font-weight:bold;} /* 빙고 라인(default display : none) */ .gurt_drive_result .bingo_area .bingo_line_wrap {position: absolute; top:0; left:0; width:100%; height:100%; z-index: -1;} .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line {display: none; position:absolute; left:0%; top:0%; width:98%; height:3px; background:#4519b6; z-index: -1;} .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line.on {display: block;} .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line:first-child {top:18%;} /* row01 */ .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line:nth-child(2) {top:52%;} /* row02 */ .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line:nth-child(3) {top:85%;} /* row03 */ .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line:nth-child(4) {top:20%; left:15%; width:3px; height: 96%;} /* col01 */ .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line:nth-child(5) {top:20%; left:50%; width:3px; height: 96%;} /* col02 */ .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line:nth-child(6) {top:20%; left:85%; width:3px; height: 96%;} /* col03 */ .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line:nth-child(7) {top:48%; left:-16%; width:124%; transform:rotateZ(45deg)} /* cross01 = 좌상우하 */ .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line:last-child {top:57%; left:auto; right:0; width:109%; transform: rotateZ(135deg);} /* cross02 = 우상좌하*/ /* 빙고 라인 대각선 device width 별 css */ @media only screen and (min-width:315px) and (max-width:335px) { .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line:nth-child(7) {top:48%; left:-16%; width:124%; transform:rotateZ(47deg)} /* cross01 = 좌상우하 */ .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line:last-child {top:57%; left:auto; right:0; width:109%; transform: rotateZ(133deg);} /* cross02 = 우상좌하*/ } @media screen and (min-width:385px) { .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line:nth-child(7) {top:48%; left:-5%; width:100%; transform:rotateZ(42deg)} /* cross01 = 좌상우하 */ .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line:last-child {top:57%; left:auto; right:0; width:109%; transform: rotateZ(137deg);} /* cross02 = 우상좌하*/ } @media screen and (min-width:400px) { .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line:nth-child(7) {top:50%; left:-2%; width:100%; transform:rotateZ(42deg)} /* cross01 = 좌상우하 */ .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line:last-child {top:57%; left:auto; right:0; width:109%; transform: rotateZ(140deg);} /* cross02 = 우상좌하*/ } @media screen and (min-width:450px) { .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line:nth-child(7) {top:57%; left:12%; width:85%; transform:rotateZ(36deg)} /* cross01 = 좌상우하 */ .gurt_drive_result .bingo_area .bingo_line_wrap .bingo_line:last-child {top:58%; left:4%; width:80%; transform: rotateZ(145deg);} /* cross02 = 우상좌하*/ } .gurt_drive_result .bingo_status {background: url('/subscribe/images/dlb/gurtanly/dlab_drive_bingo_status.png') no-repeat; width:100%; height:28px; margin-top:8px; background-position: center; background-size:50%;} /* 운전자간편점검 핵심점검포인트 */ .important_check_point {padding-top:30px; background:#d1f4fd;} .important_check_point .check_contents {padding:0 15px;} .important_check_point .check_section:not(:first-child){margin-top:25px;} .important_check_point .check_section:last-child {padding-bottom: 32px;} .important_check_point .check_item {display: flex;} .important_check_point .check_item span {width:50%; text-align: right; font-size:13px; font-family: "RixSGo B"; font-weight:bold;} .important_check_point .check_item .point_topic {display: flex;} .important_check_point .check_item .point_topic .ico {display:inline-block; background:url('/subscribe/images/dlb/gurtanly/dlab_drive_result_ico01.png') no-repeat; width:23px; height:23px; margin-right:7px; background-size:cover; background-position: center;} .important_check_point .check_section:nth-child(2) .point_topic .ico {background:url('/subscribe/images/dlb/gurtanly/dlab_drive_result_ico02.png') no-repeat; width:23px; height:23px; margin-right:7px; background-size:cover; background-position: center;} .important_check_point .check_section:nth-child(3) .point_topic .ico {background:url('/subscribe/images/dlb/gurtanly/dlab_drive_result_ico03.png') no-repeat; width:23px; height:23px; margin-right:7px; background-size:cover; background-position: center;} .important_check_point .point_bar {width:98%; height:15px; box-sizing: content-box; margin-top:7px; padding:3px; background-color:#fff; border-radius: 15px;} .important_check_point .point_bar .point_bar_case {height:15px; border-radius: 15px;} .important_check_point .point_comment {margin-top:10px;} .important_check_point .point_comment p {font-size:14px; font-family: "RixSGo M";} /* 운전자간편점검 핵심점검포인트(미가입) */ .noassign_notice {margin-top:30px;} .noassign_notice img {width:100%;} /* 20220504 : DJM 운전자간편점검 추가 */ .important_check_point.style01 .check_name{padding: 0 0 15px 0; text-align: center;font-size: 21.175px; font-family: "RixSGo B";} .important_check_point.style01 .check_name .name_color{color: #ffa729;} .important_check_point.style01{background:#fff7d6;} .important_check_point.style01 .check_section:nth-child(1) .point_topic .ico {background:url('/subscribe/images/dlb/gurtanly/dlab_drive_result_ico04.png') no-repeat; width:23px; height:23px; margin-right:7px; background-size:cover; background-position: center;} .important_check_point.style01 .check_section:nth-child(2) .point_topic .ico {background:url('/subscribe/images/dlb/gurtanly/dlab_drive_result_ico05.png') no-repeat; width:23px; height:23px; margin-right:7px; background-size:cover; background-position: center;} /* 보험전화 안내& 사용자별 보험 추천 Top2 */ .drive_recommend_area {padding:0 15px; } .drive_recommend_area .ico_meritz_area .notice_call {display: inline-block; font-size:15px; margin-right:20px;} .drive_recommend_area .ico_meritz_area .notice_call strong {font-size:16px;} .drive_recommend_area .ico_meritz_area .ico_meritz_character02 {display:inline-block; background-repeat:no-repeat; background-position:center; vertical-align: bottom; background-image:url("/subscribe/images/dlb/gurtanly/ico_meritz_character02.png"); width: 67px; height: 90px; background-size:auto 90px;} .drive_recommend_area .user_recommend_area {margin-top:20px;} .drive_recommend_area .user_recommend_area p {line-height:1.84; font-size:17px; font-family: "RixSGo B"; font-weight:bold;} .drive_recommend_area .user_recommend_area .user_confirm_data {padding:5px 10px; margin-right:5px; border:1px solid #094b9c; border-radius: 15px; color:#094b9c;} .drive_recommend_area .user_recommend_area .user_recommend_link {display: inline-block; margin-top:15px;} .drive_recommend_area .user_recommend_area .user_recommend_link a {text-decoration: none;} .drive_recommend_area .user_recommend_area .user_recommend_link a img {width:47.5%;} .drive_recommend_area .user_recommend_area .user_recommend_link a:last-child img {margin-left:10px; text-align: right;} .drive_caution_area .caution_area {margin-top:30px; padding:25px 15px; background-color:#fff;} .drive_caution_area .caution_title {position: relative; margin-left:20px; font-size:14px; font-family: "RixSGo B"; font-weight:bold;} .drive_caution_area .caution_title::before {content: ''; position: absolute; left:-23px; width:19px; height:19px; background:url('/subscribe/images/dlb/gurtanly/dlab_drive_warning_ico.png') no-repeat; background-size:100%;} .drive_caution_area .caution_lists {margin-top:10px;} .drive_caution_area .caution_lists .list{line-height:1.4; font-size:0;} .drive_caution_area .caution_lists .list + .list{margin-top:7px;} .drive_caution_area .caution_lists .txt{position: relative; margin-left:7px; font-size:12px; font-family: "RixSGo M"; color:#444;} .drive_caution_area .caution_lists .txt::before {content:''; position: absolute; top:6px; left:-7px; background:#444; width:3px; height:3px; border-radius: 50%; background-size:auto;} /* 운전자간편점검 K랜딩 팝업 */ .drive_klanding_popup_inner {position: relative; z-index: 106; margin-top:20%; padding:0 10px;} .drive_klanding_popup_inner a {display: inline-block; width:100%; border-radius: 0 0 20px 20px; line-height:50px; text-align:center} .drive_klanding_popup_inner a img {min-height:53px;} /* 운전자간편점검 보장분석 팝업 */ .drive_landing_popup_b_inner {position: relative; z-index: 106; margin-top:20%; padding:0 10px;} .drive_landing_popup_b_inner a {display: inline-block; width:100%; border-radius: 0 0 20px 20px; line-height:50px; text-align:center} .drive_landing_popup_b_inner a img {width:92%; min-height:53px;} /*============= 230323 : 다이렉트 자동차보험 이탈팝업 ==============*/ @font-face { font-family:"RixSGo"; font-style: normal; font-weight: 400; src: url("../font/rixsgo_M.eot"); src: url("../font/rixsgo_M.eot?#iefix") format("embedded-opentype"), url("../font/rixsgo_M.woff") format("woff"), url("../font/rixsgo_M.ttf") format("truetype"); } @font-face { font-family:"RixSGo"; font-style: normal; font-weight: 700; src: url("../font/rixsgo_B.eot"); src: url("../font/rixsgo_B.eot?#iefix") format("embedded-opentype"), url("../font/rixsgo_B.woff") format("woff"), url("../font/rixsgo_B.ttf") format("truetype"); } @font-face { font-family:"RixSGo"; font-style: normal; font-weight: 900; src: url("../font/rixsgo_EB.eot"); src: url("../font/rixsgo_EB.eot?#iefix") format("embedded-opentype"), url("../font/rixsgo_EB.woff") format("woff"), url("../font/rixsgo_EB.ttf") format("truetype"); } .direct_pop * {font-family:"RixSGo", sans-serif; font-weight:400;} /* 다이렉트 자동차보험 - 보험료 계산 전 팝업 */ .direct_pop {width:100%; height:100%; background-color:#fff;} .direct_pop img {width:100%;} .direct_pop .pop_header {position:relative; width:100%; padding:12px 0; background-color:#333; box-shadow:0 0 15px rgb(0 0 0 / 30%);} .direct_pop .pop_header .tit {margin:0; color:#fff; font-size:15px; font-weight:700; text-align:center;} .direct_pop .pop_header .pop_close {position:absolute; top:11px; right:15px;} .direct_pop .pop_header .pop_close span {display:block; width:20px; height:20px; background: url(/subscribe/images/common/ico_comm.png) -48px -100px no-repeat; background-size:251px 244px; text-indent:-999em;} .direct_pop .top_area {padding:12px 15px; background-color:#2a2a2a;} .direct_pop .top_area p {text-align:center; color:#979797; font-size:14px; font-weight:700;} .direct_pop .top_area span {font-size:20px;} .direct_pop .top_area strong {color:#fff;} .direct_pop .cont_area {padding:0 15px; margin:8px 0;} .direct_pop .img_area {padding:0 15px; margin:8px 0;} .direct_pop .bnr_area {position:relative; height:0; padding-bottom:38%;} .direct_pop .bnr_area button {position:absolute; left:0; top:0; padding:0 15px;} .direct_pop .btn_area {width:100%; box-sizing:border-box; padding:8px 15px 50px 15px; background-color:#fff; } .direct_pop .btn_area .btn_close {width:100%; padding:15px 10px; background-color:#0096af; color:#fff; font-weight:700; font-size:16px;} .direct_pop .btn_area .btn_home {margin-top:8px; color:#666; font-size:13px;} .direct_pop .btn_area .btn_home::after {content:""; display:inline-block; width:16px; height:16px; background: url(/subscribe/images/dlab/ico_arr_next.png) 0 2px no-repeat; background-size:cover;} /* 다이렉트 자동차보험 - 나에게 계산결과 보내기 팝업 */ .direct_pop.result .top_area p {text-align:left;} .direct_pop.result .cont_area {margin-bottom:0;} .direct_pop.result .cont_area .bx_valid {margin-bottom:10px;} .direct_pop.result .cont_area .mz_mail_box .bx_valid {margin-bottom:0;} .direct_pop.result .cont_area .group label {font-size:14px; font-weight:700;} .direct_pop.result .cont_area .group input {min-height:45px; padding:13px 15px; margin-top:6px; font-size:14px; border:1px solid #ddd; border-radius:6px; box-sizing:border-box;} .direct_pop.result .cont_area .group input::placeholder {font-size:14px; line-height:1.5; overflow:visible;} .direct_pop.result .cont_area .txt_tip {padding-top:8px;} .direct_pop.result .cont_area .txt_tip span {font-size:12px; color:#333;} .direct_pop.result .cont_area .txt_tip span ~ span {padding-top:4px} .direct_pop.result .cont_area .txt_tip span::before {content:""; top:5px; width:3px; height:3px; background: url(/subscribe/images/common/bu_dt_black.gif) no-repeat;} .direct_pop.result .cont_area .txt_tip span ~ span::before {content:""; top:8px;} .direct_pop.result .btn_area {padding-bottom:10px;} .direct_pop.result .btn_area .btn_confirm {width:100%; padding:15px 10px; background-color:#888; color:#fff; font-weight:700; font-size:16px;} .direct_pop.result .btn_area .btn_confirm.active {background-color:#0096af;} .direct_pop.result .bnr_area {padding-bottom:50%;} .wyl_240722_laypopup { width:100%; height:100vh; background: rgb(67 66 83 / 60%); padding:32px; box-sizing:border-box; font-family:"pretendard"; } .wyl_240722_laypopup .wyl_layer_area { position:relative; top:50%; left:50%; width:100%; max-width:296px; padding-top:60px; /* min-height:516px; */ background:#fff; border-radius:16px; transform:translate(-50%, -50%); } .wyl_240722_laypopup .wyl_layer_area .close_btn { content:""; position:absolute; right:16px; top:16px; padding:6px; box-sizing:border-box; background: url("/subscribe/images/pd/pn/photo_close.svg"); } .wyl_240722_laypopup .wyl_layer_area .head_area { position:relative; margin:0px 0 16px 0; font-size:18px; font-weight:700; line-height:26px; text-align:center; } .wyl_240722_laypopup .wyl_layer_area .body_area { width:100%; } .wyl_240722_laypopup .wyl_layer_area .body_area .img_area { position:relative; height:255px; } .wyl_240722_laypopup .wyl_layer_area .body_area .btn_area { margin:0 auto; padding:24px; } .wyl_240722_laypopup .wyl_layer_area .body_area .btn_area li { position:relative; } .wyl_240722_laypopup .wyl_layer_area .body_area .btn_area li:first-child { margin-bottom:10px; } .wyl_240722_laypopup .wyl_layer_area .body_area .btn_area li span { content: ""; position: absolute; left: 50%; top: -22px; display: flex; width: 165px; height: 24px; transform: translate(-50%,0); font-family: "RixSGo M"; border: 1px solid #DE4738; border-radius: 16px; font-size: 13px; font-weight: 400; background: #fff; justify-content: center; align-items:center; box-shadow:0px 4px 4px 0px #00000026; background-clip: content-box, border-box;} .wyl_240722_laypopup .wyl_layer_area .body_area .btn_area li span:before { content: ''; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); border-bottom: 8px solid transparent; border-left: 8px solid transparent; border-top: 8px solid #fff; border-right: 8px solid transparent; z-index: 2; } .wyl_240722_laypopup .wyl_layer_area .body_area .btn_area li span:after { content: ''; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); border-bottom: 8px solid transparent; border-left: 8px solid transparent; border-top: 8px solid #DE4738; border-right: 8px solid transparent; } .wyl_240722_laypopup .wyl_layer_area .body_area .tip { position:absolute; width:120px; height:28px; } .wyl_240722_laypopup .wyl_layer_area .body_area .btn_area .btn1 { width:100%; height:52px; background:#DE4738; color:#fff; border-radius:6px; font-size:16px; font-weight:700; } .wyl_240722_laypopup .wyl_layer_area .body_area .btn_area .btn2 { width:100%; height:52px; border:1px solid #ccc; color:#111; border-radius:6px; font-size:16px; font-weight:700; } /* 이탈팝업 */ .wyl_240722_direct_pop { position:relative; width:100%; height:100vh; background:#EBF2FF; overflow: scroll; } .wyl_240722_direct_pop .pop_header { position:fixed; width:100%; height:46px; padding:12px 0; box-sizing:border-box; background:#333; } .wyl_240722_direct_pop .pop_header .tit {margin: 0; font-family:"pretendard"; color: #fff; font-size: 15px; font-weight: 400; text-align: center;} .wyl_240722_direct_pop .pop_header .pop_close { position: absolute; top:2px; right:0px;} .wyl_240722_direct_pop .pop_header .pop_close span { display: block; width: 40px; height: 40px; background: url("/subscribe/images/common/pop/pop_close_breakway.png")4px 4px no-repeat; background-size:32px 32px; text-indent: -999em; } .wyl_240722_direct_pop .pop_body { position:relative; margin-top:46px; width:100%; height:calc( 100vh - 46px) } .wyl_240722_direct_pop .pop_body .wyl_img_area_b { width:100%; } .wyl_240722_direct_pop .pop_body .btn_area { /* position:absolute; left:0; bottom:24px; */ width:100%; padding:0 18px 0 18px; box-sizing: border-box; } .wyl_240722_direct_pop .pop_body .btn_area ul { display:flex; justify-content:space-between; gap:10px;} .wyl_240722_direct_pop .pop_body .btn_area ul li { width:50%; height:52px; } .wyl_240722_direct_pop .pop_body .btn_area ul li button { font-family:"RixSGo B"; font-size:16px; font-weight:400; } .wyl_240722_direct_pop .pop_body .btn_area .btn_confirm { width:100%; height:52px; background:#DE4738; border-radius:6px; color:#fff; } .wyl_240722_direct_pop .pop_body .btn_area .btn_home { width:100%; height:52px; background:#fff; border-radius:6px; border:1px solid #d4d4d4; color:#252525;} .wyl_240722_direct_pop .pop_body .btn_area p { margin-top:16px; text-align:center; font-family:"pretendard"; color:#767676; font-size:13px;} .barometer_result_cont .score_grap_wrap { position:relative; width:100%; height:auto; margin:0; padding:0; } .barometer_result_cont .score_grap_wrap .score_grap_inner { position:relative; width:100%; height:0; margin:0; padding:0; padding-bottom:50%; } .barometer_result_cont .score_grap_wrap:before { right:80%; bottom:0; } .barometer_result_cont .score_grap_wrap:after { left:76%; bottom:0; } .barometer_result_cont .score_grap_wrap .grap_result { overflow:hidden; } .barometer_result_cont .score_grap_wrap .grap_result_inner.half { background-size:100% 100%; } .barometer_result_cont .score_grap_wrap .grap_result_inner { background:#ed4649; } .barometer_result_cont .score_grap_wrap .grap100_inner .left_edge { background:#ed4649; }