/*!**************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./resources/css/app.css ***! \**************************************************************************************************************/ @charset "utf-8"; *{ margin: 0; padding: 0; } body{ font-size: 14px; line-height: 16px; color:#000000; background-color:#ffffff; font-weight: 400; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } /* input[type=text]{ font-size:14px; outline:none; font-weight: 400; background-color: #fff; border: solid 1px #e1e1e1; border-radius: 3px; height: 42px; vertical-align: middle; text-indent: 10px; box-shadow:1px 1px 1px rgba(0, 0, 0, .05);} */ input[type=text]{ font-size:14px; outline:none; font-weight: 400; background-color: #f3f4f8; border: solid 1px #f3f4f8; border-radius: 3px; height: 42px; vertical-align: middle; text-indent: 10px;} input[type=file]{ font-size:14px; outline:none; font-weight: 400; background-color: #f3f4f8; border: solid 1px #f3f4f8; border-radius: 3px; height: 42px; line-height: 42px; vertical-align: middle; text-indent: 10px;} input[type=number]{ font-size:14px; outline:none; font-weight: 400; background-color: #f3f4f8; border: solid 1px #f3f4f8; border-radius: 3px; height: 42px; vertical-align: middle; text-indent: 10px; box-shadow:1px 1px 1px rgba(0, 0, 0, .05);} input[type=tel]{ font-size:14px; outline:none; font-weight: 400; background-color: #f3f4f8; border: solid 1px #f3f4f8; border-radius: 3px; height: 42px; vertical-align: middle; text-indent: 10px; box-shadow:1px 1px 1px rgba(0, 0, 0, .05);} input[type=email]{ font-size:14px; outline:none; font-weight: 400; background-color: #f3f4f8; border: solid 1px #f3f4f8; border-radius: 3px; height: 42px; vertical-align: middle; text-indent: 10px; box-shadow:1px 1px 1px rgba(0, 0, 0, .05);} input[type=password]{ font-size:14px; outline:none; font-weight: 400; background-color: #f3f4f8; border: solid 1px #f3f4f8; border-radius: 3px; height: 42px; vertical-align: middle; text-indent: 10px; box-shadow:1px 1px 1px rgba(0, 0, 0, .05);} select{ font-size:14px; outline:none; font-weight: 400; background-color: #f3f4f8; border: solid 1px #f3f4f8; border-radius: 3px; height: 42px; vertical-align: middle; box-shadow:1px 1px 1px rgba(0, 0, 0, .05);} textarea{ font-size:14px; outline:none; font-weight: 400; background-color: #f3f4f8; border: solid 1px #f3f4f8; border-radius: 3px; height: 42px; vertical-align: middle; box-shadow:1px 1px 1px rgba(0, 0, 0, .05); resize: none;} input::placeholder{ color: #999; font-size: 12px;} img{ vertical-align: top; border:0;} input[type=date]{ position: relative; font-size:13px; outline:none; font-weight: 400; background-color: #f3f4f8; border: solid 1px #f3f4f8; border-radius: 3px; height: 42px; vertical-align: middle; text-indent: 5px; box-shadow:1px 1px 1px rgba(0, 0, 0, .05);} input[type="date"]::-webkit-calendar-picker-indicator{ opacity:0; z-index: 1; cursor: pointer;} input[type="date"]::after{ content: ''; position: absolute; top:10px; right: 7px; width:18px; height: 18px; background: url(/dist/images/ico_cal.277eea7a.svg); background-size: contain;} .fileBtnSt{ display: none;} .fileBtnSt + label{ display: inline-table; width:calc(100% - 2px); height: 38px; line-height: 38px; border: solid 1px #569bfa; border-radius: 5px; text-align: center; font-size: 12px; color: #569bfa;} .fileBtnSt + label span{ position: relative; padding-left: 20px;} .fileBtnSt + label span::before{ content: ''; position: absolute; top:0; left: 0; width:16px; height: 16px; background: url(/dist/images/ico_imgupload.3e08cf60.svg); background-size: contain;} body,ul,dl,ol,li{margin:0; padding:0; list-style-type:none;} a{ text-decoration:none; color:#000000;} .notScroll {overflow: hidden;width: 100%;height: 100vh;touch-action:none;} .fend{clear:both;} html { /* Prevent font scaling in landscape */ -webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/ -moz-text-size-adjust: none; /*Firefox*/ -ms-text-size-adjust: none; /*Ie*/ } textarea:required { box-shadow: none; resize: none; } form.was-validated input:invalid { animation:line 1s infinite ; border-color: #df1818;} form.was-validated input:invalid::placeholder{color: #df1818;} form.was-validated textarea:invalid { animation:line 1s infinite ; border-color: #df1818;} form.was-validated textarea:invalid::placeholder{color: #df1818;} form.was-validated select:invalid { animation:line 1s infinite ; border-color: #df1818;} form.was-validated select:invalid::placeholder{color: #df1818;} @keyframes line { 0%{ border-color: #df1818;} 50%{ border-color: #e1e1e1;} 100%{ border-color: #df1818;} } input[type="checkbox"].default{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;} input[type="checkbox"].default + label{display:inline-block; height:20px; padding-left:29px; background:url(/dist/images/checkbox_off.28992772.svg) no-repeat; background-size: contain; box-sizing:border-box; cursor:pointer; user-select: none;} /*체크 전*/ input[type="checkbox"].default + label{display:inline-block; font-size:14px; color:#303030; line-height:19px;} /*체크박스 텍스트 STYLE*/ input[type="checkbox"].default + label span{color:#999999} input[type="checkbox"].default:checked + label{ background:url(/dist/images/checkbox_on.b632d4d6.svg) no-repeat; background-size: contain;} /*체크 후, background-position만*/ input[type="radio"].default{ display: none;} input[type="radio"].default + label{display:inline-block; height:22px; line-height: 22px; padding-left:29px; background:url(/dist/images/radio_off.45337a33.svg) no-repeat; background-size: contain;} input[type="radio"].default:checked ~ label{ background:url(/dist/images/radio_on.b54c72f9.svg) no-repeat; background-size: contain;} .listnone{ height: 100px; line-height: 100px; background-color: #f7f7f7; text-align: center; border-radius: 10px; color: #aaa; letter-spacing: -0.5px;} .loader{ position: fixed; top:0; left: 0; width:100%; height: 100%; background-color: rgba(255,255,255,0); z-index: 5000; display: none;} .loader .inbox { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; z-index: 5100;} .loader .inbox:before {content: ""; color: #fff; height: 25px; width: 25px; background: #0000; border-radius: 50%; border: 5px solid #00a9ff; animation: loader 1s infinite;} @keyframes loader { 50% { transform: rotatez(180deg); border-style: dashed; border-color: #00a9ff #087cc3 #087cc3 #00a9ff; } 100% { transform: rotatez(360deg); } } .skeletonLoader{ position: fixed; bottom:0; left: 0; width:100%; height: 2px; overflow: hidden; z-index: 2000;} .skeletonLoader .inbox{ position: absolute; width:100%; height: 3px; background-color: #00a9ff; left: -100%; animation: skeletonLoader 1s infinite;} @keyframes skeletonLoader { 0% { left: -100%;} 100% { left: 100%;} } .skeletonStyle { background: linear-gradient(120deg, #f9f9fb 30%, #ffffff 38%, #ffffff 40%, #f9f9fb 48%); background-size: 200% 100%; background-position: 100% 0; animation: communitylist 1s infinite; } @keyframes communitylist { 100% { background-position: -100% 0; } } .swal2-html-container {font-size: 14px !important;} .swal2-title{ font-size: 17px !important; line-height: 22px; font-weight: 500 !important; margin-top: 10px !important; letter-spacing: -1px !important;} .swal2-styled.swal2-confirm{ background-color: #00a9ff !important; border: 0 !important;} .swal2-styled{ box-shadow: none !important;} .swal2-container{ z-index: 3000 !important;} input.swal2-input{ border: 0 !important; box-shadow: none !important; text-align: center; font-size: 26px; letter-spacing: 5px;} /*font*/ .fwt100{ font-weight: 100;} .fwt300{ font-weight: 300;} .fwt400{ font-weight: 400;} .fwt500{ font-weight: 500;} .fwt700{ font-weight: 700;} .fwt900{ font-weight: 900;} /*margin*/ .mgl0{ margin-left: 0;} .mgl1{ margin-left: 1px;} .mgl2{ margin-left: 2px;} .mgl3{ margin-left: 3px;} .mgl4{ margin-left: 4px;} .mgl5{ margin-left: 5px;} .mgl6{ margin-left: 6px;} .mgl7{ margin-left: 7px;} .mgl8{ margin-left: 8px;} .mgl9{ margin-left: 9px;} .mgl10{ margin-left: 10px;} .mgl11{ margin-left: 11px;} .mgl12{ margin-left: 12px;} .mgl13{ margin-left: 13px;} .mgl14{ margin-left: 14px;} .mgl15{ margin-left: 15px;} .mgl16{ margin-left: 16px;} .mgl17{ margin-left: 17px;} .mgl18{ margin-left: 18px;} .mgl19{ margin-left: 19px;} .mgl20{ margin-left: 20px;} .mgl25{ margin-left: 25px;} .mgl30{ margin-left: 30px;} .mgl35{ margin-left: 35px;} .mgl40{ margin-left: 40px;} .mgl45{ margin-left: 55px;} .mgl50{ margin-left: 50px;} .mgl55{ margin-left: 55px;} .mgl60{ margin-left: 60px;} .mgr0{ margin-right: 0;} .mgr1{ margin-right: 1px;} .mgr2{ margin-right: 2px;} .mgr3{ margin-right: 3px;} .mgr4{ margin-right: 4px;} .mgr5{ margin-right: 5px;} .mgr6{ margin-right: 6px;} .mgr7{ margin-right: 7px;} .mgr8{ margin-right: 8px;} .mgr9{ margin-right: 9px;} .mgr10{ margin-right: 10px;} .mgr11{ margin-right: 11px;} .mgr12{ margin-right: 12px;} .mgr13{ margin-right: 13px;} .mgr14{ margin-right: 14px;} .mgr15{ margin-right: 15px;} .mgr16{ margin-right: 16px;} .mgr17{ margin-right: 17px;} .mgr18{ margin-right: 18px;} .mgr19{ margin-right: 19px;} .mgr20{ margin-right: 20px;} .mgr25{ margin-right: 25px;} .mgr30{ margin-right: 30px;} .mgr35{ margin-right: 35px;} .mgr40{ margin-right: 40px;} .mgr45{ margin-right: 55px;} .mgr50{ margin-right: 50px;} .mgr55{ margin-right: 55px;} .mgr60{ margin-right: 60px;} .mgr65{ margin-right: 65px;} .mgr70{ margin-right: 70px;} .mgr75{ margin-right: 75px;} .mgr80{ margin-right: 80px;} .mgr85{ margin-right: 85px;} .mgr90{ margin-right: 90px;} .mgr95{ margin-right: 95px;} .mgr100{ margin-right: 100px;} .mgt0{ margin-top: 0;} .mgt1{ margin-top: 1px;} .mgt2{ margin-top: 2px;} .mgt3{ margin-top: 3px;} .mgt4{ margin-top: 4px;} .mgt5{ margin-top: 5px;} .mgt6{ margin-top: 6px;} .mgt7{ margin-top: 7px;} .mgt8{ margin-top: 8px;} .mgt9{ margin-top: 9px;} .mgt10{ margin-top: 10px;} .mgt11{ margin-top: 11px;} .mgt12{ margin-top: 12px;} .mgt13{ margin-top: 13px;} .mgt14{ margin-top: 14px;} .mgt15{ margin-top: 15px;} .mgt16{ margin-top: 16px;} .mgt17{ margin-top: 17px;} .mgt18{ margin-top: 18px;} .mgt19{ margin-top: 19px;} .mgt20{ margin-top: 20px;} .mgt25{ margin-top: 25px;} .mgt30{ margin-top: 30px;} .mgt35{ margin-top: 35px;} .mgt40{ margin-top: 40px;} .mgt45{ margin-top: 55px;} .mgt50{ margin-top: 50px;} .mgt55{ margin-top: 55px;} .mgt60{ margin-top: 60px;} .mgb0{ margin-bottom: 0;} .mgb1{ margin-bottom: 1px;} .mgb2{ margin-bottom: 2px;} .mgb3{ margin-bottom: 3px;} .mgb4{ margin-bottom: 4px;} .mgb5{ margin-bottom: 5px;} .mgb6{ margin-bottom: 6px;} .mgb7{ margin-bottom: 7px;} .mgb8{ margin-bottom: 8px;} .mgb9{ margin-bottom: 9px;} .mgb10{ margin-bottom: 10px;} .mgb11{ margin-bottom: 11px;} .mgb12{ margin-bottom: 12px;} .mgb13{ margin-bottom: 13px;} .mgb14{ margin-bottom: 14px;} .mgb15{ margin-bottom: 15px;} .mgb16{ margin-bottom: 16px;} .mgb17{ margin-bottom: 17px;} .mgb18{ margin-bottom: 18px;} .mgb19{ margin-bottom: 19px;} .mgb20{ margin-bottom: 20px;} .mgb25{ margin-bottom: 25px;} .mgb30{ margin-bottom: 30px;} .mgb35{ margin-bottom: 35px;} .mgb40{ margin-bottom: 40px;} .mgb45{ margin-bottom: 55px;} .mgb50{ margin-bottom: 50px;} .mgb55{ margin-bottom: 55px;} .mgb60{ margin-bottom: 60px;} /*padding*/ .pdl0{ padding-left: 0;} .pdl1{ padding-left: 1px;} .pdl2{ padding-left: 2px;} .pdl3{ padding-left: 3px;} .pdl4{ padding-left: 4px;} .pdl5{ padding-left: 5px;} .pdl6{ padding-left: 6px;} .pdl7{ padding-left: 7px;} .pdl8{ padding-left: 8px;} .pdl9{ padding-left: 9px;} .pdl10{ padding-left: 10px;} .pdl11{ padding-left: 11px;} .pdl12{ padding-left: 12px;} .pdl13{ padding-left: 13px;} .pdl14{ padding-left: 14px;} .pdl15{ padding-left: 15px;} .pdl16{ padding-left: 16px;} .pdl17{ padding-left: 17px;} .pdl18{ padding-left: 18px;} .pdl19{ padding-left: 19px;} .pdl20{ padding-left: 20px;} .pdl25{ padding-left: 25px;} .pdl30{ padding-left: 30px;} .pdl35{ padding-left: 35px;} .pdl40{ padding-left: 40px;} .pdl45{ padding-left: 55px;} .pdl50{ padding-left: 50px;} .pdl55{ padding-left: 55px;} .pdl60{ padding-left: 60px;} .pdr0{ padding-right: 0;} .pdr1{ padding-right: 1px;} .pdr2{ padding-right: 2px;} .pdr3{ padding-right: 3px;} .pdr4{ padding-right: 4px;} .pdr5{ padding-right: 5px;} .pdr6{ padding-right: 6px;} .pdr7{ padding-right: 7px;} .pdr8{ padding-right: 8px;} .pdr9{ padding-right: 9px;} .pdr10{ padding-right: 10px;} .pdr11{ padding-right: 11px;} .pdr12{ padding-right: 12px;} .pdr13{ padding-right: 13px;} .pdr14{ padding-right: 14px;} .pdr15{ padding-right: 15px;} .pdr16{ padding-right: 16px;} .pdr17{ padding-right: 17px;} .pdr18{ padding-right: 18px;} .pdr19{ padding-right: 19px;} .pdr20{ padding-right: 20px;} .pdr25{ padding-right: 25px;} .pdr30{ padding-right: 30px;} .pdr35{ padding-right: 35px;} .pdr40{ padding-right: 40px;} .pdr45{ padding-right: 55px;} .pdr50{ padding-right: 50px;} .pdr55{ padding-right: 55px;} .pdr60{ padding-right: 60px;} .pdt0{ padding-top: 0;} .pdt1{ padding-top: 1px;} .pdt2{ padding-top: 2px;} .pdt3{ padding-top: 3px;} .pdt4{ padding-top: 4px;} .pdt5{ padding-top: 5px;} .pdt6{ padding-top: 6px;} .pdt7{ padding-top: 7px;} .pdt8{ padding-top: 8px;} .pdt9{ padding-top: 9px;} .pdt10{ padding-top: 10px;} .pdt11{ padding-top: 11px;} .pdt12{ padding-top: 12px;} .pdt13{ padding-top: 13px;} .pdt14{ padding-top: 14px;} .pdt15{ padding-top: 15px;} .pdt16{ padding-top: 16px;} .pdt17{ padding-top: 17px;} .pdt18{ padding-top: 18px;} .pdt19{ padding-top: 19px;} .pdt20{ padding-top: 20px;} .pdt25{ padding-top: 25px;} .pdt30{ padding-top: 30px;} .pdt35{ padding-top: 35px;} .pdt40{ padding-top: 40px;} .pdt45{ padding-top: 55px;} .pdt50{ padding-top: 50px;} .pdt55{ padding-top: 55px;} .pdt60{ padding-top: 60px;} .pdb0{ padding-bottom: 0;} .pdb1{ padding-bottom: 1px;} .pdb2{ padding-bottom: 2px;} .pdb3{ padding-bottom: 3px;} .pdb4{ padding-bottom: 4px;} .pdb5{ padding-bottom: 5px;} .pdb6{ padding-bottom: 6px;} .pdb7{ padding-bottom: 7px;} .pdb8{ padding-bottom: 8px;} .pdb9{ padding-bottom: 9px;} .pdb10{ padding-bottom: 10px;} .pdb11{ padding-bottom: 11px;} .pdb12{ padding-bottom: 12px;} .pdb13{ padding-bottom: 13px;} .pdb14{ padding-bottom: 14px;} .pdb15{ padding-bottom: 15px;} .pdb16{ padding-bottom: 16px;} .pdb17{ padding-bottom: 17px;} .pdb18{ padding-bottom: 18px;} .pdb19{ padding-bottom: 19px;} .pdb20{ padding-bottom: 20px;} .pdb25{ padding-bottom: 25px;} .pdb30{ padding-bottom: 30px;} .pdb35{ padding-bottom: 35px;} .pdb40{ padding-bottom: 40px;} .pdb45{ padding-bottom: 55px;} .pdb50{ padding-bottom: 50px;} .pdb55{ padding-bottom: 55px;} .pdb60{ padding-bottom: 60px;} /*text-align*/ .tgnl{ text-align: left;} .tgnc{ text-align: center;} .tgnr{ text-align: right;} @font-face { font-family: 'CoreDream1'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'CoreDream3'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'CoreDream7'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff'); font-weight: normal; font-style: normal; } body{ background-color: #ebedf1;} .subtop{ height: 54px;} .subtop .inbox{ position: fixed; top:0; left: 0; width:100%; height: 54px; background-color: #fff; z-index: 1000;} .subtop .inbox .navi{ position: absolute; top:10px; left:15px; height: 34px; line-height: 34px; font-size: 20px; font-weight: 900; letter-spacing: -1px; color:#181818; padding-left: 25px;} .subtop .inbox .navi::before{ content: ''; position: absolute; top:8px; left: 0; width:18px; height: 18px; background: url(/dist/images/ico_arw_gray.4bc40a89.svg); background-size: contain; transform: rotate( 180deg );} .subtop .inbox .btnbox{ position: absolute; top:10px; right: 15px;} .subtop .inbox .btnbox ul{ position: relative; display: inline-table; height: 34px; line-height: 34px; margin-left: 10px; letter-spacing: -1px; font-size: 14px; font-weight: 600; color: #00a9ff;} .subtop .inbox .btnbox ul.chat::before{ content: ''; position:absolute; top:0; left: -18px; width:16px; height: 16px; background: url(/dist/images/ico_chat.ff68e6e1.svg); background-size: contain;} .subtop .inbox .btnbox ul .share{ letter-spacing: -1px; padding:0 5px 0 20px; color: #000;} .subtop .inbox .btnbox ul .share::before{ content: ''; position: absolute; top:9px; left: 0; width:16px; height: 16px; background: url(/dist/images/ico_share.c239dc3e.svg); background-size: contain;} .subtop .inbox .btnbox ul .community{ letter-spacing: -1px; padding-left: 22px; color: #00a9ff; filter: grayscale(100%); opacity: 0.6;} .subtop .inbox .btnbox ul .community::before{ content: ''; position: absolute; top:7px; left: 0; width:20px; height: 20px; background: url(/dist/images/botmenu_community.d58fc36f.svg); background-size: contain;} .subtop .inbox .btnbox ul .community.active{ filter: grayscale(0%); opacity: 1;} .subtop .inbox .btnbox ul .challenge{ letter-spacing: -1px; padding-left: 22px; color: #00a9ff; filter: grayscale(100%); opacity: 0.6;} .subtop .inbox .btnbox ul .challenge::before{ content: ''; position: absolute; top:7px; left: 0; width:20px; height: 20px; background: url(/dist/images/botmenu_challenge.4975ea55.svg); background-size: contain;} .subtop .inbox .btnbox ul .challenge.active{ filter: grayscale(0%); opacity: 1;} .subtop .inbox .search{ position: absolute; top:8px; right: 5px; height: 34px; width:calc(100% - 180px); background-color: #f3f4f8; border-radius: 10px; overflow: hidden;} .subtop .inbox .search input{ width:100%; height: 34px; line-height: 34px; border: 0; background-color: transparent;} .subtop .inbox .search .btn{ position: absolute; top:0; right: 0; width:34px; height: 34px; z-index: 100;} .subtop .inbox .search .btn::after{ content: ''; position: absolute; top:9px; right: 12px; width:16px; height: 16px; background: url(/dist/images/ico_search_b.6ce6e3bf.svg); background-size: contain; opacity: 0.3;} .bot_menu{ height: 71px;} .bot_menu .inbox{ position: fixed; bottom: 0; left: 0; width:100%; height: 60px; background-color: #fff; border-top: solid 1px #eee; z-index: 1000;} .bot_menu .inbox .menu{ display: inline-table; width:100%; margin-top: 10px;} .bot_menu .inbox .menu ul{ display: table-cell; width:20%; text-align: center; font-size: 12px; color: #777; letter-spacing: -0.5px; font-weight: bold;} .bot_menu .inbox .menu ul img{ width: 24px; height: 24px; margin: 0 0 3px 0; -webkit-filter: grayscale(100%);filter: grayscale(100%);} .bot_menu .inbox .menu ul.on{ color: #00a9ff;} .bot_menu .inbox .menu ul.on img{-webkit-filter: grayscale(0%); filter: grayscale(0%); opacity: 1;} .float_inquiry{ position: fixed; bottom: 70px; right: 10px; width:50px; height: 50px; border-radius: 50px; background-color: #00a9ff; z-index: 1000;} .float_inquiry ul{ width:30px; height: 30px; background: url(/dist/images/float_inquiry.52d500c4.svg); background-size: contain; margin: 10px 0 0 10px;} .dbox{ background-color: #fff; margin-left: 10px; margin-right: 10px; border-radius: 7px; box-shadow:1px 1px 1px rgba(0, 0, 0, .05); overflow: hidden;} .btnBot{ position: fixed; bottom: 0; left: 0; width:calc(100% - 30px); padding: 15px; background-color: #fff; z-index: 500;} .btnBot1{ bottom: 0; left: 0; width:calc(100% - 30px); padding: 30px 15px 15px 15px; background-color: #fff; z-index: 500;} .btnTop{ bottom: 0; left: 0; width:calc(100% - 50px); padding: 0 15px 0 25px; background-color: #fff; z-index: 500;} .btn_blue_w{ height: 46px; line-height: 46px; border-radius: 5px; background-color: #00a9ff; color: #fff; font-size: 16px; font-weight: 700; text-align: center;} .btn_blue_w.buttonSt{ width:100%; outline: none; border: 0;} .btn_kakao_join{ height: auto; line-height: 46px; margin: 5px auto; background-color: #FEE500; text-align: center; border-radius: 6px; } .btn_blue_w.communitySearch{ width:20%; height: 43px; line-height: 43px; outline: none; border: 0;} /*로그인, 회원가입 팝업*/ .start-select-popup-overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; /* 어두운 배경 */ display: flex; justify-content: center; align-items: center; z-index: 3000; /* 다른 요소 위에 나타나도록 */ visibility: hidden; /* 기본적으로 숨겨진 상태 */ opacity: 0; transition: opacity 0.3s ease; } /* 팝업 콘텐츠 */ .start-select-popup-content { background-color: white; padding: 20px; width: 90%; max-width: 400px; /*width: 100%;*/ /*height: 100%;*/ z-index: 3000; /* 다른 요소 위에 나타나도록 */ border-radius: 10px; position: relative; /* 닫기 버튼을 위한 상대적 위치 */ text-align: center; } .startBtnBox{ font-size: 15px; } /* 닫기 버튼 스타일 */ .start-select-pop-close-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 20px; cursor: pointer; } /* 팝업이 보일 때 */ .start-select-popup-overlay.show { visibility: visible; opacity: 1; } /*로그인, 회원가입 팝업*/ .slidepop .bg{ position: fixed; top:0; right: 0; width:100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 2000; display: none;} .slidepop .inbox{ position: fixed; top:0; right: -100%; width:calc(100% - 20px); height:100%; background-color: rgba(255,255,255,1); border-radius: 20px 0 0 20px; z-index: 2100; overflow: hidden;} .slidepop .inbox .top{ margin: 0 15px 0 15px; border-bottom: solid 1px #aaa; height: 50px; line-height: 50px; font-size: 18px; font-weight: 700; letter-spacing: -1px; color:#181818;} .slidepop .inbox .top .close{ position: absolute; top:12px; right: 15px; width:40px; height: 26px; line-height: 26px; border-radius: 5px; font-size: 12px; color: #999; border: solid 1px #e1e1e1; font-weight: 500; text-align: center;} .slidepop .inbox .cont{ position: absolute; top:51px; left: 0; width:100%; height: calc(100% - 51px); overflow-y: auto;} .slidepop.on .bg{ display: block;} .slidepop.on .inbox{ animation:slidepop1 0.5s ease-out forwards;} @keyframes slidepop1 { 0%{ right:-100%;} 100%{ right:0;} } .slidepop .inbox{ animation:slidepop2 0.2s ease-in forwards;} @keyframes slidepop2 { 0%{ right:0;} 100%{ right:-100%;} } .layerDefault{ position: fixed; top:0; left: 0; width:100%; height: 100%; background:rgba(0,0,0,0.5); z-index: 1000;} .layerDefault .inbox{ position: fixed; top:50%; left: 15px; width:calc(100% - 30px); background-color: #fff; border-radius: 10px; min-height: 80px; transform: translate(0, -50%);} .layerDefault .top{ height: 50px; line-height: 50px; font-size: 17px; font-weight: 700; text-indent: 15px;} .layerDefault .close{ position: absolute; top:5px; right: 5px; padding: 10px;} .layerDefault .close::before{ content: '\2573'; font-size: 16px;} .layerDefault .close1{ position: absolute; top:5px; right: 5px; padding: 10px;} .layerDefault .close1::before{ content: '\2573'; font-size: 16px;} .layerDefault .btnbox{ border-top: solid 1px #eee; margin: 0 15px 0 15px; padding: 10px 0 15px 0; text-align: center;} .layerDefault .btnbox ul{ display: inline-table; height: 30px; line-height: 30px; font-size: 15px; letter-spacing: -1px; font-weight: 700; margin: 0 5px 0 5px; padding: 0 15px 0 15px;} .layerDefault .btnbox .confirm{ color: #00a9ff;} .layerDefault .btnbox .cancel{ color: #888;} /*홀인원 이벤트 참가 동의 안내 팝업 수정*/ .layerDefaultHoleinone{ } .layerDefaultHoleinone .inbox{ left: 15px; width:100%; background-color: #fff; border-radius: 10px; min-height: 80px;} .layerDefaultHoleinone .top{ height: 50px; line-height: 50px; font-size: 17px; font-weight: 700; text-indent: 15px;} .layerDefaultHoleinone .close{ position: absolute; top:5px; right: 5px; padding: 10px;} .layerDefaultHoleinone .close::before{ content: '\2573'; font-size: 16px;} .layerDefaultHoleinone .agreeBtnbox{ border-top: solid 1px #eee; margin: 0 15px 0 15px; padding: 10px 0 15px 0; text-align: center;} .layerDefaultHoleinone .agreeBtnbox ul{ display: inline-table; height: 30px; line-height: 30px; font-size: 15px; letter-spacing: -1px; font-weight: 700; margin: 0 5px 0 5px; padding: 0 15px 0 15px;} .layerDefaultHoleinone .agreeBtnbox .confirm{ color: #00a9ff;} .layerDefaultHoleinone .agreeBtnbox .cancel{ color: #888;} /*홀인원 이벤트 참가 동의 안내 팝업 수정 end*/ .formDefault ul{ position: relative; margin-top: 25px;} .formDefault ul input{ width:calc(100% - 2px); margin: 8px 0 0 0;} .formDefault ul textarea{ width:calc(100% - 22px); margin: 8px 0 0 0; padding: 10px; height: 70px;} .formDefault ul textarea::placeholder{ color: #999; font-size: 12px;} .formDefault ul .btn{ position: absolute; bottom:5px; right: 5px; font-size: 11px; height: 34px; line-height: 34px; background-color: #00a9ff; color: #fff; border-radius: 3px; padding: 0 10px 0 10px; z-index: 100;} .formDefault ul .btn.ok{ background-color: #f3f4f8; color: #00a9ff; font-weight: bold;} .formDefault ul .count{ position: absolute; bottom:14px; right: 80px; font-size: 12px; color: #00a9ff;} .formDefault ul .btn_search{ position: absolute; bottom:5px; right: 5px; width:34px; height: 34px;} .formDefault ul .btn_search ul{ position: absolute; top:9px; left: 10px; width:15px; height: 15px; background: url(/dist/images/ico_search_b.6ce6e3bf.svg); background-size: contain; opacity: 0.5;} .formDefault .radio2{ margin-top: 0;} .formDefault .radio2 li{ display: inline-table; width:calc(50% - 2px); margin-top: 8px;} .formDefault .radio2 label{ display: inline-table; width:100%; height: 38px; line-height: 38px; border-radius: 10px; background-color: #e8ebf5; color: #8a91a5; text-align: center;} .formDefault .radio2 [type="radio"] { display: none;} .formDefault .radio2 [type="radio"]:checked ~ label {background:#013561; color:#fff;} .formDefault .check_txt{ font-size: 12px; color: #df1818; display: none;} .formDefault .check_txt.ok{ color: #007b0c;} .formDefault .authentication{ display: none;} .formDefault .authentication1{ display: none;} .formDefault .exinfo{ font-size: 12px; padding: 7px 0 0 0; color: #82b7d7;} .radio1{ margin-top: 0;} .radio1 ul{ margin-bottom: 10px;} .radio1 label{ display: inline-table; width:100%; padding: 16px 0 16px 0; line-height: 16px; border-radius: 10px; background-color: #e8ebf5; color: #8a91a5; text-align: center;} .radio1 [type="radio"] { display: none;} .radio1 [type="radio"]:checked ~ label {background:#013561; color:#fff;} .declare_info{ font-size: 12px; color: #999; padding: 0 0 15px 0; letter-spacing: -0.5px;} .cateChoice{ position: relative; display:flex; flex-wrap: wrap; padding: 0 0 80px 0;} .cateChoice ul{ flex-basis: 33.3333%; display: flex; flex-direction: column; text-align: center; margin-bottom: 30px;} .cateChoice ul label{ text-align: center;} .cateChoice ul label div{ position: relative; width:80px; height: 80px; border-radius: 80px; background-color: #f8f8f8; margin: 0 auto 7px; overflow: hidden;} .cateChoice ul label div .bg{ position: absolute; top:0; left: 0; width:100%; height: 100%; z-index: 100;} .cateChoice ul label div .ckd{ position: absolute; top:0; left: 0; width:100%; height: 100%; z-index: 200; background: url(/dist/images/cover_check.43d8b02a.png); background-size: contain; display: none;} .cateChoice ul [type="checkbox"] { display: none;} .cateChoice ul [type="checkbox"]:checked ~ label div .ckd{ display: block;} .areaChange{ position:fixed; bottom: 0; left: 0; width:100%; height:100%; background-color: rgba(0,0,0,0.5); z-index: 2000} .areaChange .inbox{ position: absolute; top:0; left: 0; width:100%; padding: 0 0 24px 0; background-color: #fff; border-radius: 0 0 20px 20px;} .areaChange .inbox .tit{ padding: 15px 15px 0 15px; font-size: 18px; font-weight: 700;} .areaChange .inbox .close{ position: absolute; top:5px; right: 5px; padding: 10px;} .areaChange .inbox .close::before{ content: '\2573'; font-size: 20px;} .areaChange .inbox .list{ padding: 20px 15px 0 15px; font-size: 12px;} .areaChange .inbox .list ul{ position: relative; border: solid 1px #eee; border-radius: 5px; margin-bottom: 10px; line-height: 36px; padding-left: 70px; letter-spacing: -1px;} .areaChange .inbox .list ul::after{ content: ''; position: absolute; top:11px; right: 10px; width:14px; height: 14px; background: url(/dist/images/ico_arw_gray.4bc40a89.svg); background-size: contain; opacity: 0.5;} .areaChange .inbox .list ul div{ position: absolute; top:0; left: 10px; color: #999;} .areaChange .inbox .sel .stit{ color: #999; padding:0 0 10px 0;} .areaChange .inbox .sel select{ height: 36px; line-height: 36px; font-size: 12px;} .areaChange .inbox .sel .btn{ position: absolute; bottom: 24px; right: 15px; width:50px; height: 34px; line-height: 34px; border-radius: 5px; background-color: #00a9ff; color: #fff; text-align: center; font-size: 13px; letter-spacing: -1px; font-weight: 700;} .tabDefault{ height: 40px; line-height: 40px; border-radius: 40px; background-color: #f8f8f8; } .tabDefault ul{ display: inline-table; width:100%;} .tabDefault ul li{ display: table-cell;} .tabDefault.box2 ul li{ width:50%; text-align: center; font-size: 13px; font-weight: 600; color: #999; border-radius: 40px;} .tabDefault.box3 ul li{ width:33.333333333333%; text-align: center; font-size: 13px; font-weight: 600; color: #999; border-radius: 40px;} .tabDefault ul li.on{ background-color: #00a9ff; color: #fff;} .tab_s1{ position: relative; border-bottom: solid 10px #f6f6f6;} .tab_s1{ height: 40px; overflow-y: hidden;} .tab_s1 .swiper-slide{ position: relative; height: 40px; line-height: 40px; text-align: center; display: inline-table; letter-spacing: -1px; color: #999; font-size: 13px; font-weight: 600;} .tab_s1 .swiper-slide span{ font-weight: 400; margin-left: 3px;} .tab_s1 .swiper-slide.on{ color: #569bfa;} .tab_s1 .swiper-slide.on::before{ content:''; background-color: #569bfa; width:100%; height: 3px; position: absolute; bottom:0; left: 0;} .tab_slide{ position: relative; border-bottom: solid 10px #f6f6f6; height: 40px; overflow-y: hidden; overflow-x: auto; -ms-overflow-style: none;} .tab_slide::-webkit-scrollbar{ display: none; width:0; height: 0; background: transparent; -webkit-appearance: none;} .tab_slide .inbox{ position: absolute; top:0; left: 0; height: 40px;} .tab_slide ul{ position: relative; height: 40px; line-height: 40px; text-align: center; display: inline-table; letter-spacing: -1px; color: #999; font-size: 13px; font-weight: 600; padding: 0 15px 0 15px;} .tab_slide ul span{ font-weight: 400; margin-left: 3px;} .tab_slide ul.on{ color: #569bfa;} .tab_slide ul.on::before{ content:''; background-color: #569bfa; width:100%; height: 3px; position: absolute; bottom:0; left: 0;} .policy_contents{ color: #777; font-size: 13px; line-height: 16px; padding: 0 0 40px 0;} .policy_contents .part{ padding: 40px 0 0 0;} .policy_contents .part.first{ padding: 20px 0 0 0;} .policy_contents .part .title{ color: #000; font-weight: 700; padding: 0 0 40px 0; font-size: 18px; letter-spacing: -1px; text-align: center;} .policy_contents .part .tit{ color: #000; font-weight: 700; padding: 0 0 15px 0;} .policy_contents span{color: #000; font-weight: bold;} .txtfontbox .txt{font-family: 'CoreDream3', sans-serif; padding: 30px 0 0 25px; font-size: 24px; line-height: 28px; letter-spacing: -1px;} .txtfontbox .txt span{font-family: 'CoreDream7', sans-serif;} .txtfontbox .txt2{ font-size: 12px; letter-spacing: -0.5px; padding: 10px 25px 0 25px; color: #569bfa;} .p_g_img{ position: absolute; top:0; left: 0; width:100%; height: 100%; z-index: 100;} .p_u_img{ position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:77.241379%; height: 77.241379%; border-radius: 77.241379%; z-index: 50;} .tb_height_01{ border-top:solid 1px #e6e9eb; border-left:solid 1px #e6e9eb;} .tb_height_01 tr:hover td{ background-color:#f5f7f9;} .tb_height_01 tr td{ border-bottom:solid 1px #e6e9eb; border-right:solid 1px #e6e9eb; text-align:center; padding:10px 0 10px 0;} .tb_height_01 tr.head td{ background-color:#f5f7f9; font-weight:bold;} .tb_height_01.tiny tr td{ padding: 5px 0 5px 0;} .tb_height_02{ border-top:solid 1px rgba(0,0,0,0.2); border-left:solid 1px rgba(0,0,0,0.2); font-size: 12px;} .tb_height_02 tr td{ border-bottom:solid 1px rgba(0,0,0,0.2); border-right:solid 1px rgba(0,0,0,0.2); text-align:center; padding:5px 0 5px 0;} .tb_height_02 tr.head td{ background-color:rgba(0,0,0,0.2); font-weight:bold;} .appVersion{ position: fixed; top:0; left: 0; width:100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 2000; display: none;} .appVersion .inbox{ position: fixed; bottom: 0; left: 0; width:calc(100% - 40px); background-color: #fff; border-radius: 20px 20px 0 0; padding: 20px 20px 30px 20px; z-index: 2100;} .appVersion .inbox .close{ position: absolute; top:10px; right: 10px; padding: 10px;} .appVersion .inbox .close::before{ content: '\2573'; font-size: 20px;} .appVersion .inbox .title{ font-size: 18px; font-weight: bold; line-height: 30px; color: #569bfa; letter-spacing: -1px;} .appVersion .inbox .txt{ padding: 20px 0 30px 0; line-height: 18px;} .appVersion .inbox .btn{ background-color: #f3f4f8; height: 50px; line-height: 50px; border-radius: 7px; font-weight: bold; font-size: 15px; letter-spacing: -1px; color: #84889a; text-align: center;} .appVersion .inbox .btn div{ display: inline-table; position: relative;} .appVersion .inbox .btn div::before{ content: ''; position: absolute; top:14px; left: -28px; width:20px; height: 20px; background: url(/dist/images/ico_google.bf0bb4d4.png) center center; background-size: contain;} .friend{ position: relative;} .friend .tit{ position: relative; line-height: 50px; font-size: 16px; font-weight: 600; letter-spacing: -1px; padding: 0 0 0 15px;} .friend .manage{ position: absolute; top:15px; right: 15px; color: #999; letter-spacing: -1px;} .friend .list{ padding: 0 15px 20px 15px;} .friend .swiper-slide{ width: auto;} .friend ul{ position: relative; width:65px; text-align:center; margin-right: 5px;} .friend ul .thumb{ width:50px; height: 50px; border-radius: 50px; overflow: hidden; margin: 0 auto;} .friend ul .name{ padding: 5px 0 5px 0; color: #888; letter-spacing: -0.5px;} .friend ul .walk{ font-weight: bold;} .friend_detail{ position: fixed; top: 0; left: 0; width:100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1500;} .friend_detail .inbox{ position: fixed; bottom: 0; left: 0; width:100%; background-color: #fff; border-radius: 25px 25px 0 0; padding: 0 0 30px 0; box-shadow:0 0 5px rgba(0, 0, 0, .2);} .friend_detail .inbox .close{ position: absolute; top:10px; right: 10px; padding: 10px;} .friend_detail .inbox .close::before{ content: '\2573'; font-size: 20px;} .friend_detail .thumb{ width:80px; height: 80px; border-radius: 80px; overflow: hidden; margin: 30px auto 0;} .friend_detail .name{ padding: 10px 0 5px 0; letter-spacing: -0.5px; font-size: 15px; font-weight: bold; text-align: center;} .friend_detail .info{ margin: 20px 15px 0 15px; border: solid 1px #eee; border-radius: 10px;} .friend_detail .info ul{ display: inline-table; width:100%; border-bottom: dashed 1px #eee; line-height: 40px;} .friend_detail .info ul:last-child{ border-bottom: 0;} .friend_detail .info ul li{ display: table-cell;} .friend_detail .info ul:nth-child(1) li{ background-color: #f9f9f9; font-size: 12px; font-weight: bold;} .friend_detail .info ul li:nth-child(1){ padding: 0 0 0 15px; letter-spacing: -1px; font-weight: bold; font-size: 12px;} .friend_detail .info ul li:nth-child(2){ width:90px; text-align: center;} .friend_detail .info ul li:nth-child(3){ width:90px; text-align: center; color: #569bfa;} .friend_list .list ul{ position: relative; height: 80px;} .friend_list .list ul .thumb{ position:absolute; top:10px; left: 10px; width:60px; height: 60px; border-radius: 60px;} .friend_list .list ul .name{ position: absolute; top:50%; left:80px; transform: translate(0, -50%); color: #999;} .friend_list .list ul .name .nick{ color: #000; font-size: 16px; font-weight: bold; padding: 0 0 3px 0;} .friend_list .list ul .walk{ position: absolute; top:0; right: 15px; line-height: 80px; font-weight: bold; font-size: 18px;} .ad_vast{ position: relative; height: 0; overflow-y: auto;} .vast_inbox{ position: relative; height: 0; overflow-y: hidden;} .vast_inbox video{ width:100%;} .vast_inbox .vast_playback_bi{ position: absolute; top:10px; right: 10px; border: 0; background:transparent; z-index: 500;} .vast_inbox .vast_playback_bi img{ width: 20px;} .vast_inbox .vast_playback2{ position: absolute; top:0; left: 0; width:100%; height: 100%; z-index: 400;} .vast_inbox .vast_player_endscreen-container{ position: absolute; top:0; left: 0; width:100%; height: 100%; z-index: 500; display: none;} .vast_inbox .vast_player_endscreen-container .vast_player_endscreen-img{ position: absolute; top:0; left: 0; width:100%; z-index:500;} .vast_inbox .vast_player_endscreen-container .vast_playback_replay{ position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:72px; height: 72px; border: 0; background:transparent; z-index: 510; display: none;} .vast_inbox .vast_player_endscreen-container .vast_landing_in_player{ position: absolute; bottom:15px; right: 15px; padding: 7px; background-color: rgba(0,0,0,0.6); border: solid 1px rgba(255,255,255,0.5); border-radius: 5px; color: #fff; font-size: 11px; z-index: 510;} .vast_inbox .vast_playback_muteunmute{ position: absolute; bottom: 15px; right: 15px; border: 0; background:transparent; z-index: 400;} .vast_inbox .vast_playback_muteunmute img{ width:20px;} .vast_inbox .vast_playback_muteunmute .vast_playback_unmute-img{ display: none;} .wisemobDT{ position: relative; height: 0; overflow: hidden;} .wisemobDT.slide{padding: 0px 0 0px 0;} /* .wisemobDT.slide{padding: 0px 0 15px 0;} edited by hooni 2024.03.19*/ .wisemobDT .bnbox{ text-align: center;} .wisemobST{ position: relative; height: 0; overflow: hidden;} .wisemobST.slide{padding: 15px 0 15px 0;} .wisemobST .box{} .wisemobST .wiseSlide.h_250{background-color: #fff; width:300px; height: 250px; margin: 0 auto; border-radius: 10px; overflow: hidden; box-shadow:1px 1px 1px rgba(0, 0, 0, .1);} .wisemobST .wiseSlide.h_250 .swiper-wrapper .swiper-slide{ position: relative;} .wisemobST .wiseSlide.h_250 .swiper-wrapper .swiper-slide .logo{ position: absolute; bottom:75px; right: 5px; width:50px; height: 50px; border-radius: 50px; overflow: hidden; background-color: #fff;} .wisemobST .wiseSlide.h_250 .swiper-wrapper .swiper-slide .logo.none{ display: none;} .wisemobST .wiseSlide.h_250 .swiper-wrapper .swiper-slide .logo .img{ width:44px; height: 44px; margin: 3px 0 0 3px;} .wisemobST .wiseSlide.h_250 .swiper-wrapper .swiper-slide .img_box{ height: 180px;} .wisemobST .wiseSlide.h_250 .swiper-wrapper .swiper-slide .info_box{ position: relative; height: 70px;} .wisemobST .wiseSlide.h_250 .swiper-wrapper .swiper-slide .info_box .title{ padding: 10px 15px 0 15px; line-height: 18px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; word-break: break-all; -webkit-line-clamp: 1; text-overflow: ellipsis;} .wisemobST .wiseSlide.h_250 .swiper-wrapper .swiper-slide .info_box .price{ padding: 5px 15px 0 15px; text-align: left; font-weight: bold; font-size: 16px;} .wisemobST .wiseSlide.h_50{background-color: #ffffff; width:318px; height: 48px; margin: 0 auto; border-radius: 5px; border: solid 1px #eee; overflow: hidden;} .wisemobST .wiseSlide.h_50 .swiper-wrapper .swiper-slide .logo{ position: absolute; top:4px; right: 4px; width:40px; height: 40px; border-radius: 40px; overflow: hidden; background-color: #f8f8f8;} .wisemobST .wiseSlide.h_50 .swiper-wrapper .swiper-slide .logo.none{ display: none;} .wisemobST .wiseSlide.h_50 .swiper-wrapper .swiper-slide .logo .img{ width:34px; height: 34px; margin: 3px 0 0 3px;} .wisemobST .wiseSlide.h_50 .swiper-wrapper .swiper-slide .img_box{ position: absolute; top:0; left: 0; width:70px; height: 48px;} .wisemobST .wiseSlide.h_50 .swiper-wrapper .swiper-slide .info_box{ position: relative; height: 48px; margin: 0 50px 0 70px;} .wisemobST .wiseSlide.h_50 .swiper-wrapper .swiper-slide .info_box.none{ margin: 0 5px 0 70px;} .wisemobST .wiseSlide.h_50 .swiper-wrapper .swiper-slide .info_box .title{ padding: 5px 15px 0 10px; line-height: 18px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; word-break: break-all; -webkit-line-clamp: 1; text-overflow: ellipsis;} .wisemobST .wiseSlide.h_50 .swiper-wrapper .swiper-slide .info_box .price{ padding: 2px 15px 0 10px; text-align: left; font-weight: bold; font-size: 16px;} .wisemobST .wiseSlide.h_75{background-color: #ffffff; width:318px; height: 73px; margin: 0 auto; border-radius: 5px; border: solid 1px #eee; overflow: hidden;} .wisemobST .wiseSlide.h_75 .swiper-wrapper .swiper-slide .logo{ position: absolute; top:16px; right: 5px; width:40px; height: 40px; border-radius: 40px; overflow: hidden; background-color: #f8f8f8;} .wisemobST .wiseSlide.h_75 .swiper-wrapper .swiper-slide .logo.none{ display: none;} .wisemobST .wiseSlide.h_75 .swiper-wrapper .swiper-slide .logo .img{ width:34px; height: 34px; margin: 3px 0 0 3px;} .wisemobST .wiseSlide.h_75 .swiper-wrapper .swiper-slide .img_box{ position: absolute; top:0; left: 0; width:100px; height: 73px;} .wisemobST .wiseSlide.h_75 .swiper-wrapper .swiper-slide .info_box{ position: relative; height: 50px; margin: 0 50px 0 100px;} .wisemobST .wiseSlide.h_75 .swiper-wrapper .swiper-slide .info_box .title{ padding: 10px 15px 0 10px; line-height: 18px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; word-break: break-all; -webkit-line-clamp: 2; text-overflow: ellipsis;} .wisemobST .wiseSlide.h_75 .swiper-wrapper .swiper-slide .info_box .price{ padding: 2px 15px 0 10px; text-align: left; font-weight: bold; font-size: 16px;} .wisemobST .wiseSlide.h_100{background-color: #ffffff; width:318px; height: 98px; margin: 0 auto; border-radius: 5px; border: solid 1px #eee; overflow: hidden;} .wisemobST .wiseSlide.h_100 .swiper-wrapper .swiper-slide .logo{ position: absolute; bottom:5px; right: 5px; width:40px; height: 40px; border-radius: 40px; overflow: hidden; background-color: #f8f8f8;} .wisemobST .wiseSlide.h_100 .swiper-wrapper .swiper-slide .logo.none{ display: none;} .wisemobST .wiseSlide.h_100 .swiper-wrapper .swiper-slide .logo .img{ width:34px; height: 34px; margin: 3px 0 0 3px;} .wisemobST .wiseSlide.h_100 .swiper-wrapper .swiper-slide .img_box{ position: absolute; top:0; left: 0; width:110px; height: 98px;} .wisemobST .wiseSlide.h_100 .swiper-wrapper .swiper-slide .info_box{ position: relative; height: 50px; margin: 0 0 0 110px;} .wisemobST .wiseSlide.h_100 .swiper-wrapper .swiper-slide .info_box .title{ padding: 10px 15px 0 10px; line-height: 18px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; word-break: break-all; -webkit-line-clamp: 2; text-overflow: ellipsis;} .wisemobST .wiseSlide.h_100 .swiper-wrapper .swiper-slide .info_box .price{ padding: 2px 15px 0 10px; text-align: left; font-weight: bold; font-size: 16px;} .wisemobNT{ position: relative; height: 0; overflow: hidden;} .wisemobNT.slide{padding: 15px 0 15px 0;} .wisemobNT .box{ text-align: center;} .mobwithFr{ position: relative; height: 0; overflow: hidden;} .mobwithFr.slide{padding: 15px 0 15px 0;} .mobwithFr .box{ text-align: center;} .mezzoBnFr{ position: relative; height: 0; overflow: hidden;} .mezzoBnFr.slide{padding: 15px 0 15px 0;} .mezzoBnFr .box{ text-align: center;} .campBanner{ position: relative; cursor: pointer; margin: 0 auto; height: 0; overflow: hidden;} .campBanner.slide{ padding: 15px 0 15px 0;} .campBanner .bn img{ width:100%;} .campBanner .ico{ position: absolute; top:5px; right: 5px;} .campBanner.slide .ico{ position: absolute; top:20px; right: 5px;} .campBanner .ico img{ width:16px;} .coupangBanner{ position: relative; cursor: pointer; margin: 0 auto; height: 0; overflow: hidden; text-align: center;} .coupangBanner.slide{ padding: 15px 0 15px 0;} .coupangBanner.bnbox{ display: inline-table;} .tpmnBanner{ position: relative; height: 0; overflow: hidden;} .tpmnBanner.slide{padding: 15px 0 15px 0;} .tpmnBanner .box{ text-align: center;} .coupang_wrap.sz300250{ position: relative;} .coupang_wrap.sz300250 .inbox{ position: relative; width:300px; height: 250px; background-color: #fff; margin: 0 auto;} .coupang_wrap.sz300250 .img{ width:300px; height: 94px; background: url(https://cdn.valuewalk.co.kr/resources/temp/coupang_ad_300250_02.png) center center; background-size: cover;} .coupang_wrap.sz300250 .cupangGoods{ margin: 0 10px 0 10px;} .coupang_wrap.sz300250 .cupangGoods .culist ul{ cursor: pointer;} .coupang_wrap.sz300250 .cupangGoods .culist ul .thumb{ position: relative; padding-top: 100%; background-color: #fafafa; border-radius: 7px; overflow: hidden; margin-bottom: 5px;} .coupang_wrap.sz300250 .cupangGoods .culist ul .thumb dl{ position: absolute; top:0; left: 0; width:100%; height: 100%;} .coupang_wrap.sz300250 .cupangGoods .culist ul .title{ font-size: 12px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; word-break: break-all; -webkit-line-clamp: 2; text-overflow: ellipsis;} .coupang_wrap.sz300250 .cupangGoods .culist ul .price{ text-align: center; font-weight: bold; padding: 3px 0 0 0;} .coupang_wrap.sz300250.slide{padding: 15px 0 15px 0;} .coupang_wrap.sz300250{ position: relative; height: 0; overflow: hidden;} .coupang_wrap.sz32050{ position: relative;} .coupang_wrap.sz32050 .inbox{ position: relative; width:320px; height: 50px; background-color: #fff; margin: 0 auto;} .coupang_wrap.sz32050 .img{ width:121px; height: 50px; background: url(https://cdn.valuewalk.co.kr/resources/temp/coupang_ad_32050_01.png) center center; background-size: cover;} .coupang_wrap.sz32050 .cupangGoods{ position: absolute; top:5px; right: 5px; width:180px; height: 40px;} .coupang_wrap.sz32050 .cupangGoods .culist ul{ cursor: pointer;} .coupang_wrap.sz32050 .cupangGoods .culist ul .thumb{ position: relative; height: 40px; background-color: #fafafa; overflow: hidden;} .coupang_wrap.sz32050 .cupangGoods .culist ul .thumb dl{ position: absolute; top:0; left: 0; width:100%; height: 100%;} .coupang_wrap.sz32050 .cupangGoods .culist ul .title{ display: none;} .coupang_wrap.sz32050 .cupangGoods .culist ul .price{ display: none;} .coupang_wrap .line ul:nth-child(1){ position: absolute; top:0; left: 0; width:1px; height: 100%; background-color: rgba(0,0,0,0.1); z-index: 600;} .coupang_wrap .line ul:nth-child(2){ position: absolute; top:0; left: 1px; width:calc(100% - 2px); height: 1px; background-color: rgba(0,0,0,0.1); z-index: 600;} .coupang_wrap .line ul:nth-child(3){ position: absolute; bottom:0; right: 0; width:1px; height: 100%; background-color: rgba(0,0,0,0.1); z-index: 600;} .coupang_wrap .line ul:nth-child(4){ position: absolute; bottom:0; right: 1px; width:calc(100% - 2px); height: 1px; background-color: rgba(0,0,0,0.1); z-index: 600;} .mezzo_wrap{ position: relative; height: 0; overflow: hidden;} .mezzo_wrap .__mezzo_video_ad_ui_layer__{ z-index: 980 !important;} .mezzoBanner{ position: relative; height: 0; overflow: hidden;} .mezzoBanner.slide{padding: 15px 0 15px 0;} .mezzoBanner .box{ text-align: center;} .valuewalkDad .bnbox{ position: relative;} .valuewalkDad .bnbox .point{ position: absolute; top:10px; right: 10px; z-index: 100; background-color: rgba(0,0,0,0.6); color: #fff; font-size: 14px; font-weight: bold; padding: 6px 16px 6px 16px; border-radius: 100px; display: none;} .valuewalkDad .bnbox .point.show{ display: block;} /* .valuewalkDad .bnbox .adver_img { width: 300px; height: 250px;} 20240312 edited by hooni */ .valuewalkDad .bnbox .adver_img { width: 300px; height: 300px;} /* 20240312 edited by hooni */ /* 광고가 들어간 알림 팝업 */ .ad_pop_layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1500; display: none; } .ad_pop_layer .inbox { position: absolute; top: 50%; left: 15px; width: calc(100% - 60px); transform: translate(0, -50%); background-color: #fff; border-radius: 15px; padding: 15px; text-align: center; } .ad_pop_layer .close { position: absolute; top: 5px; right: 5px; padding: 10px; } .ad_pop_layer .close::before { content: '\2573'; font-size: 16px; } .ad_pop_layer .inbox .tit { font-family: 'CoreDream7', serif; font-size: 20px; line-height: 24px; letter-spacing: -1px; padding: 25px 0 15px 0; } .ad_pop_layer .inbox .tit span { font-weight: bold; color: #569bfa; } .ad_pop_layer .inbox .btnBox { display: flex; justify-content: center; gap: 10px; margin-top: 50px; } .adConfirmBtn, .adCancelBtn { list-style: none; padding: 0; margin: 0; } .adConfirmBtn, .adCancelBtn { padding: 10px 20px; border: none; border-radius: 5px; color: #fff; cursor: pointer; font-size: 16px; } .adConfirmBtn { background-color: #569bfa; } /* 취소 버튼이 없을 때 가운데 정렬 */ .ad_pop_layer .btnBox.singleButton { justify-content: center; } .adCancelBtn { background-color: #569bfa; } /* 설명 문구 스타일 추가 */ .ad_pop_layer .description { text-align: center; font-size: 14px; color: #666; /* 설명 문구의 색상 */ margin-top: 10px; /* 타이틀과의 간격 */ line-height: 1.5; /* 줄 간격 설정 */ word-break: break-word; /* 긴 텍스트가 줄바꿈되도록 */ padding-bottom: 10px; } /* 광고가 들어간 알림 팝업 end */ /*!************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./node_modules/photoswipe/dist/photoswipe.css ***! \************************************************************************************************************************************/ /*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */ .pswp { --pswp-bg: #000; --pswp-placeholder-bg: #222; --pswp-root-z-index: 100000; --pswp-preloader-color: rgba(79, 79, 79, 0.4); --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9); /* defined via js: --pswp-transition-duration: 333ms; */ --pswp-icon-color: #fff; --pswp-icon-color-secondary: #4f4f4f; --pswp-icon-stroke-color: #4f4f4f; --pswp-icon-stroke-width: 2px; --pswp-error-text-color: var(--pswp-icon-color); } /* Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions) */ .pswp { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--pswp-root-z-index); display: none; touch-action: none; outline: 0; opacity: 0.003; contain: layout style size; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* Prevents focus outline on the root element, (it may be focused initially) */ .pswp:focus { outline: 0; } .pswp * { box-sizing: border-box; } .pswp img { max-width: none; } .pswp--open { display: block; } .pswp, .pswp__bg { transform: translateZ(0); will-change: opacity; } .pswp__bg { opacity: 0.005; background: var(--pswp-bg); } .pswp, .pswp__scroll-wrap { overflow: hidden; } .pswp__scroll-wrap, .pswp__bg, .pswp__container, .pswp__item, .pswp__content, .pswp__img, .pswp__zoom-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .pswp__img, .pswp__zoom-wrap { width: auto; height: auto; } .pswp--click-to-zoom.pswp--zoom-allowed .pswp__img { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .pswp--click-to-zoom.pswp--zoomed-in .pswp__img { cursor: move; cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } /* :active to override grabbing cursor */ .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img, .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active, .pswp__img { cursor: -webkit-zoom-out; cursor: -moz-zoom-out; cursor: zoom-out; } /* Prevent selection and tap highlights */ .pswp__container, .pswp__img, .pswp__button, .pswp__counter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .pswp__item { /* z-index for fade transition */ z-index: 1; overflow: hidden; } .pswp__hidden { display: none !important; } /* Allow to click through pswp__content element, but not its children */ .pswp__content { pointer-events: none; } .pswp__content > * { pointer-events: auto; } /* PhotoSwipe UI */ /* Error message appears when image is not loaded (JS option errorMsg controls markup) */ .pswp__error-msg-container { display: grid; } .pswp__error-msg { margin: auto; font-size: 1em; line-height: 1; color: var(--pswp-error-text-color); } /* class pswp__hide-on-close is applied to elements that should hide (for example fade out) when PhotoSwipe is closed and show (for example fade in) when PhotoSwipe is opened */ .pswp .pswp__hide-on-close { opacity: 0.005; will-change: opacity; transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1); z-index: 10; /* always overlap slide content */ pointer-events: none; /* hidden elements should not be clickable */ } /* class pswp--ui-visible is added when opening or closing transition starts */ .pswp--ui-visible .pswp__hide-on-close { opacity: 1; pointer-events: auto; } /*