(()=>{ let main = document.querySelector('.designSettingElement.text-body.blogPost.content'); if(!main) return false; main.classList.remove('content'); main.classList.remove('blogPost'); main.classList.remove('text-body'); main.classList.remove('text-designSettingElement'); })() @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap'); @font-face { font-family: 'NEXEN_TIRE_Regular'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/NEXEN_TIRE_Regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'NEXEN_TIRE_Bold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/NEXEN_TIRE_Bold.woff') format('woff'); font-weight: normal; font-style: normal; } .designSettingElement:has(#calc){ text-align: center; } #calc{ max-width: 1400px; text-align: initial; } #calc *{ margin: revert; padding: revert; border: revert; font-size: revert; vertical-align: revert; color: revert; -webkit-box-sizing : revert; box-sizing: revert; text-align: revert; border-collapse: revert; line-height: revert; } #calc:has(.guideline [type="checkbox"]:not(:checked)):has(input:active:not(#calc .guideline *)) .guideline .cate_contents * { border-color: red !important; color: red; transition-timing-function: step-start; } #calc:has(.guideline [type="checkbox"]:not(:checked)) .guideline * { transition: all 1s; transition-timing-function: linear; } :root:has(.on) { --color1: hsl(var(--c1), var(--c2), calc(68% - var(--c3))); --shadow: black; } :root:has(#calc.b2c.on){ --c1: 240; --c2: 100%; --c3: 0%; } :root:has(#calc.b2b.on){ --c1: 0; --c2: 100%; --c3: 0%; } :root:has(#calc.agency.on){ --c1: 113; --c2: 44%; --c3: 21%; } #calc.b2c .user.b2c{ display: initial; } #calc.b2c .option.user.b2c{ display: flex; } #calc.b2b .user.b2b{ display: initial; } #calc.b2b .option.user.b2b{ display: flex; } #calc.agency .user.agency{ display: initial; } #calc.agency .option.user.agency{ display: flex; } #calc_cates{ margin-bottom: 160px; } #body .section-wrapper .section { max-width: none !important; padding: 0; } #body:not(.mobile) .item-wrapper.blog.blogStack .blogWrapper { max-width: none !important; } #item38873348 { padding: 0; } .blogPostTitleAndDateWrapper { display: none !important; } #calc:not(.on) .cate_box:not(.guideline){ color:#e7e7e7 !important; } #calc:not(.on) .bt label:has(input:checked){ background-color: initial !important; border: none; } #calc:not(.on) .option_contents_bts .bt label:hover:not(:has(input:disabled)):not(:has(.inputext)) { background-color: initial !important; } #calc { display: inline-block; } #calc .user{ display: none; } #calc .outtd { vertical-align: top; } #calc #calc_photo{ vertical-align: top; display: inline-block; width: 400px; height: 500px; margin-right: 50px; margin-top: 36px; } #calc #calc_photo table{ width: 100%; border-spacing: 6px; } #calc #calc_photo td{ box-sizing: border-box; border: 5px solid; border-color: #2F2D2D #434040 #4F4C4C #434040; padding: 4px; color: white; box-shadow: inset 0 1px 2px rgb(0 0 0 / 30%), 0 2px 1px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 50%); background-image: linear-gradient(#ffffff, #e1e1dd); position: relative; vertical-align: top; } #calc #calc_photo .sub { height: 126px; border-width: 4px; } #calc #calc_photo .sub .title{ margin-top: 7px; } #calc #calc_photo img { margin-top: 10px; max-width: 500px; box-sizing: border-box; width: 100%; border: 4px solid; border-color: #C7C7BF #e1e1dd #ffffff #e1e1dd; } #calc #calc_photo .sub ul { display: none; } #calc #calc_photo .main ul { color: black; font-size: 14px; } #calc #calc_photo ul li { padding: 5px } #calc #calc_photo .title:before, #calc #calc_photo .title:after { content: ""; flex: 1 1; border-bottom: 2px solid #444444; margin: auto 3px; } #calc #calc_photo .title { font-family: 'Noto Sans KR'; display: flex; box-sizing: border-box; color: black; text-align: center; bottom: 12px; } #calc #calc_photo .sub .title{ font-size: 11px; } #calc #calc_photo td.main { height: 300px; padding: 14px; } #calc.on .cate_title { border-bottom: 2px solid black; } #calc .cate_title { font-family: 'NEXEN_TIRE_Regular'; border-bottom: 2px solid gray; margin-bottom: 26px; font-size: 22px; padding-bottom: 6px; padding-left: 12px; color: var(--color1); padding-top: 33px; height: 32px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: rotate(-0.03deg); font-weight: bold; } #calc .cate_contents{ font-family: 'Noto Sans KR'; padding-left: 30px; line-height: 140%; } #calc ul{ padding-left: 40px; } #calc .comments li{ line-height: 170%; } #calc .notice .comments li{ font-size: 18px; } #calc .opiton_checkbox{ text-align: right; margin-top: 20px; padding-right: 40px; } #calc .agency .opiton_checkbox{ text-align: left; } #calc .agencytable .opiton_checkbox{ text-align: left; } #calc .agencytable .opiton_checkbox label{ font-weight: initial !important; } #calc .opiton_checkbox label{ font-weight: bold; font-size: 18px; border-bottom: 1px solid #9f9e9e; padding-right: 10px; } #calc .opiton_checkbox label input{ margin-left: 20px; margin-right: 10px; } #calc .option{ display: flex; margin-bottom: 24px; } #calc .option:has(.dc_disabled),#calc .option:has(.dc_disabled) input{ color:#b9b9b9 !important; } #calc .option:has(.dc_disabled) .option_title{ text-decoration: line-through; } #calc .option_title{ flex:none; font-family: 'NEXEN_TIRE_Bold'; vertical-align: top; width: 180px; font-size: 22px; align-items: center; cursor: default; padding-top: 3px; } #calc .option_contents{ flex:1; } #calc .option_contents .option_commnet{ padding-left: 20px; padding-top: 5px; font-size: 16px; } #calc .option_contents input[type="date"]{ font-size: 16px; font-family: 'Noto Sans KR'; padding: 1px 10px; } #calc .option_info{ display: inline-block; font-size: 14px; vertical-align: super; cursor:help; position: relative; } #calc .option_info [type="checkbox"]{ display: none; } #calc .option_info .infobox{ display: none; position: absolute; top: 0; left: 18px; min-width: 460px; border: 2px solid #B3B3B3; z-index: 999; cursor:default; } #calc .option_info:has([type="checkbox"]:checked) .infobox{ display: block; } #calc .info_title{ display: flex; padding: 2px; background-color: #B3B3B3; color: black; font-size: 16px; height: 30px; align-items: center; justify-content: center; } #calc .info_title::after { position: absolute; content: '\d7'; color: #000; text-align: center; top: 3px; right: 3px; width: 20px; height: 20px; font-size: 20px; cursor: pointer; } #calc .info_contents{ padding: 15px; font-family: 'Noto Sans KR'; background-color: white; font-size: 15px; } #calc .info_contents img{ max-width: 550px; } #calc .option_contents_bts{ border-collapse: collapse; box-sizing: border-box; } #calc .option_contents_bts .bt{ box-sizing: border-box; display: inline-block; width: 145px; height: 40px; border: 1px solid #919191; margin-left: -1px; margin-top: -1px; text-align: center; cursor: pointer; position:relative; } #calc .option_contents_bts .bt label:hover:not(:has(input:disabled)):not(:has(.inputext)) { background-color: hsl(var(--c1), var(--c2), calc(90% - var(--c3))); } #calc .option_contents_bts .bt .hover_img{ display: none; position: absolute; box-sizing: border-box; min-width: 200px; min-height: 200px; padding: 5px; background-color: white; border: 2px solid #B3B3B3; right: 0; top: 50px; z-index: 99; } #calc.on .option_contents_bts .bt:hover .hover_img{ display: block; } #calc .option_contents_bts .hover_img img{ max-width: 450px; } #calc .option_contents_bts .bt label{ font-family: 'Noto Sans KR'; box-sizing: border-box; overflow: hidden; font-size: 13px; display: block; justify-content : center; align-items:center; width: 100%; height: 100%; line-height: 38px; cursor: pointer; } #calc .option_contents_bts .bt label:has(:checked){ line-height: 34px; } #calc .option_contents_bts .bt input[type="radio"]{ display: none; } #calc .bt label:has(input:checked) { background-color: hsl(var(--c1), var(--c2), calc(90% - var(--c3))); border: 3px solid; border-color: hsl(var(--c1), var(--c2), calc(70% - var(--c3))) hsl(var(--c1), var(--c2), calc(95% - var(--c3))) hsl(var(--c1), var(--c2), 95%) hsl(var(--c1), var(--c2), calc(70% - var(--c3))); font-weight: bold; font-size: 13px; } #calc .bt:has(.inputext){ border: none; } #calc .bt .inputext{ display: block; box-sizing: border-box; width: 90%; height: 32px; border: none; border-bottom: 1px solid black; margin: 3px; padding: 5px; text-align: center; } #calc label:has(input:disabled){ text-decoration: line-through; color: rgb(170, 170, 170); border-color: rgb(170, 170, 170) !important; } #calc .popup{ z-index: 99999; display: none; position: fixed; top: 0; left: 0; background-color: rgb(0 0 0 / 64%); height: 100%; width: 100%; vertical-align: middle; text-align: center; cursor:default; } #calc .popup_contents{ margin: auto; box-sizing: border-box; display: block; background-color: rgb(0 0 0 / 50%); height: 500px; width: 450px; padding: 20px; color: white; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; border: 5px solid; border-color: #111010 #1b1a1a #1b1a1a #111010; box-shadow: inset 0 1px 2px rgb(0 0 0 / 30%), 0 2px 1px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 50%); cursor: default; } #calc .popup_contents img { box-sizing: border-box; border: 4px solid; border-image-source: linear-gradient(304deg, rgb(178 52 150) 0%, rgb(53 113 180) 100%); border-image-slice: 1; margin: auto; margin-bottom: 20px; display: block; width: 400px; } #calc .popup input{ display: table-cell; /* font-family: 'Noto Sans KR'; */ font-size: 16px; width: 350px; height: 46px; margin-top: 10px; border-radius: 4px; cursor: pointer; vertical-align: middle; line-height: 46px; border: 1px solid black; } #calc .popup .ok{ font-weight: bold; color: white; background-image: linear-gradient(#1f70e9, #0d57c5); } #calc .popup .ok:hover { background-image: linear-gradient(#4e8db9, #4e8db9); } #calc .popup .cancle{ color: black; background-image: linear-gradient(#ffffff, #ddddda); } #calc .popup .cancle:hover { background-image: linear-gradient(#d3d3d3, #d3d3d3); } #calc .popup_txt{ margin: 30px 0; } #calc .popup_txt::before{ content: ' - '; } #calc .popup_txt::after{ content: ' - '; } #calc .option_contents_count { box-sizing: border-box; border: 1px solid #919191; width: 145px; height: 40px; overflow: hidden; } #calc .option_contents_count input { box-sizing: border-box; text-align: center; } #calc .option_contents_count .counter-minus, #calc .option_contents_count .counter-plus{ box-sizing: border-box; height: 100%; width: 36px; padding: 6px 12px; border: 1px solid transparent; color: #fff; text-align: center; } #calc .option_contents_count input[type="number"] { box-sizing: border-box; height: 100%; width: 71px; border: none; } #calc .option_contents_count input[type="button"] { box-sizing: border-box; height: 100%; width: 36px; padding: 6px 12px; border: 1px solid transparent; color: #fff; } #calc .option_contents_count input[type="button"]:disabled:hover { background-color: darkgrey; cursor: not-allowed; } #calc .option_contents_count input[type="button"]:disabled, #calc .option_contents_count input[type="button"]:disabled:hover { background-color: darkgrey; cursor: not-allowed; } #calc .option_contents_count input[type="button"] { background-color: #009dda; } #calc .option_contents_count input[type="button"]:hover { background-color: #0486b9; } #calc .option_contents_count input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; -moz-appearance: textfield; } #calc .option_contents_discount input::-webkit-inner-spin-button, #calc .option_contents_discount input::-webkit-outer-spin-button { opacity: 1; -webkit-appearance: outer-spin-button !important; position: absolute; top: 2px; left: 3px; height: 24px; } #calc .option_contents_discount input.fixed::-webkit-inner-spin-button, #calc .option_contents_discount input.fixed::-webkit-outer-spin-button { display: none; color: black; } #calc .option_contents_discount input.fixed { color: black; } #calc .option_contents_discount input{ background: none; border: none; height: 30px; width: 100px; font-size: 16px; text-align: right; outline: none; padding-right: 2px; } #calc .option_contents_discount{ display: inline-block; padding: 0 3px; border-bottom: 1px solid #757575; } #calc .option_contents_discount:has(input:focus){ border-bottom: 1px solid rgb(119, 0, 0); } #calc .contents_textarea{ width: 300px; height: 100px; border: revert; padding: revert; margin: revert; } #calc .btbox{ padding-left: 40px; } #calc .btbox input{ font-family: 'Noto Sans KR'; font-size: 16px; font-weight: bold; padding: 2px 8px; } #calc .receipt_desk{ position: fixed; font-family: 'Noto Sans KR'; bottom: 21px; left: 0; width: 100%; height: 114px; z-index: 9999; } #calc .bts input{ font-size: 18px; width: 145px; height: 40px; background-color: white; color: black; font-weight: bold; vertical-align: middle; border: 3px solid; border-color: hsl(var(--c1), var(--c2), calc(90% - var(--c3))) hsl(var(--c1), var(--c2), calc(70% - var(--c3))) hsl(var(--c1), var(--c2), calc(70% - var(--c3))) hsl(var(--c1), var(--c2), calc(90% - var(--c3))); cursor: pointer; margin: 0 3px; } #calc .text1{ font-size: 22px; letter-spacing: 0px; } #calc .final_amount{ font-family: 'Noto Sans KR'; width: 200px; height: 37px; font-size: 22px; color: #F7931E; border: none; background: none; text-align: right; padding-right: 20px; } #calc .receipt_desk_contents{ bottom: 21px; position: fixed; display: flex; text-align: center; justify-content: center; align-items: center; width: 100%; height: 70px; box-sizing: border-box; background-color: #F2F2F2; } #calc .receipt_desk .bts{ display: inline-block; } #calc .show_receipt{ transition: width 0.3s, height 0.3s; position: fixed; box-sizing: border-box; text-align: center; width: 100%; height: 44px; bottom: 91px; line-height: 140%; } #calc .show_receipt:has(label input:checked){ height: 600px; } #calc .show_receipt_movebox{ transition: all 0.3s; display: inline-block; width: 510px; height: 600px; } #calc .show_receipt_movebox:has(label input:checked){ width: 800px; overflow: hidden; } #calc .show_receipt_paper{ transition: all 0; background-color: white; box-sizing:border-box; width: 100%; height: 556px; border-left: 2px solid var(--color1); border-right: 2px solid var(--color1); overflow-y: scroll; padding: 50px; } #calc .show_receipt_contents{ position: relative; z-index: 1; } #calc .show_receipt_contents::before{ z-index: -1; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); position: absolute; top: 800px; left:0; font-family: 'NEXEN_TIRE_BOLD'; content: '오성시스템(주)\aSMART CHANNEL'; font-size: 70px; white-space: pre; color: #f3f3f3; line-height: 140%; } #calc:not(.on) .receipt_desk{ display: none; } #calc.on .show_receipt_bt{ display: block; width: 100%; height: 44px; box-sizing: border-box; background-color: var(--color1); border-radius: 25px 25px 0 0; padding-top: 5px; font-size: 22px; color:white; position: relative; line-height: 140%; } #calc .show_receipt_bt::after{ content: ' '; font-family: 'Noto Sans KR'; position: absolute; right: 20px; top: 20px; border: solid white; border-width: 0 2px 2px 0; display: inline-block; padding: 5px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } #calc .show_receipt_bt:has(.show_receipt_checkbox:checked)::after{ top: 14px; transform: rotate(45deg); -webkit-transform: rotate(45deg); } #calc .show_receipt_checkbox{ display: none; } #calc .show_receipt_contents table{ width: 100%; border-spacing: 0px; border-collapse: initial; border-top: 2px solid #9F9F9F; border-bottom: 2px solid #9F9F9F; box-sizing: border-box; } #calc .show_receipt_contents table:not(.receipt_discount, .receipt_agency_table) td { text-align: center; padding: 0; color: black; font-family: 'Noto Sans KR'; font-size: 17px; font-weight: bold; height: 56px; box-sizing: border-box; vertical-align: middle; } #calc .show_receipt_contents table:not(.receipt_discount, .receipt_agency_table) tr.vat td{ border-top: 1px dashed #9F9F9F; } #calc .show_receipt_contents table:not(.receipt_discount, .receipt_agency_table) tr.last td{ border-top: 2px solid #9F9F9F; } #calc .show_receipt_contents table:not(.receipt_discount, .receipt_agency_table) tr td:first-child { width: 226px; background-color: hsla(0, 0%, 56%, 0.459); } #calc .show_receipt_contents table:not(.receipt_discount, .receipt_agency_table) tr td:nth-child(2) { color: hsl(var(--c1), var(--c2), calc(65% - var(--c3))); border-right: 1px solid #9F9F9F; } #calc .show_receipt_contents table:not(.receipt_discount, .receipt_agency_table) tr td:nth-child(3) { width: 226px; text-align: right; padding-right: 40px; } #calc .show_receipt_contents tr.payment td:first-child { width: 226px; background-color: hsla(0, 0%, 56%, 0.459); } #calc .show_receipt_contents tr.payment td:nth-child(2),#calc .show_receipt_contents tr.payment td:nth-child(3) { color: black !important; border: none !important; padding: 0 !important; margin: 0 !important; text-align: center !important; } #calc .show_receipt_contents table:not(.receipt_discount, .receipt_agency_table) tr td { background-color: hsl(0deg 0% 93% / 43%); } #calc .copyright{ text-align: right; } #calc .receipt_commnet{ text-align:initial; } #calc .table_title{ margin-top: 4px; text-align:initial; } #calc .show_receipt_contents tr td.receipt_textarea{ color: rgb(22, 22, 22); font-size: 14px; border-right: none !important; font-weight: initial; } #calc .show_receipt_contents tr.client_check_no td.receipt_textarea{ color: red !important; font-size: 16px; } #calc .show_receipt_contents tr.client_check_ok td.receipt_textarea{ color: blue !important; font-size: 16px; } #calc .show_receipt_contents tr td.receipt_date{ color: rgb(22, 22, 22) !important; border-right: none !important; font-weight: initial; } #calc .show_receipt_contents table:has(.receipt_textarea) tr.last{ display: none !important; } #calc .show_receipt_contents table:not(.receipt_discount, .receipt_agency_table) tr td.withoutvat{ font-weight: initial; font-size: 14px; color: rgb(22, 22, 22); } #calc .moneytable_contents{ border-collapse : collapse; border-spacing : 0; } #calc .moneytable_contents tr.title td{ font-weight: bold; } #calc .moneytable_contents td{ width: 200px; border-bottom: 1px solid rgb(173, 173, 173); padding: 6px; text-align: center; } #calc .moneytable_contents tr:not(.title) td.etc{ font-size: 14px; line-height: 120%; } #calc .moneytable_contents td:first-child{ width: 130px; text-align: right; } #calc .moneytable_contents .dctotal td{ border-top: 2px solid rgb(99, 99, 99); border-bottom: 2px solid rgb(99, 99, 99); font-size: 16px; font-weight: bold; } #calc .moneytable_contents .discount_text{ text-align: center; font-size: 15px; } #calc .moneytable_contents .discount_text[name="부가세"]{ font-size: 14px; } #calc .receipt_discount td{ width: 25%; box-sizing: border-box; text-align: center; border-bottom: 1px solid rgb(173, 173, 173) } #calc .receipt_discount .dctotal td{ font-size: 16px; font-weight: bold; } #calc .receipt_discount tr:last-child td{ border-top: 2px solid rgb(173, 173, 173) } #calc .receipt_discount tr:first-child td.total:after{ content: '(VAT 포함)'; } #calc .receipt_discount tr:first-child td{ font-weight: bold; } #calc .agency_table{ border-collapse : collapse; border-spacing : 0; } #calc .agency_table tr.title td{ font-weight: bold; } #calc .agency_table td:first-child{ width: 150px; min-width: initial; } #calc .agency_table td{ padding: 6px; min-width: 200px; height: 50px; border-bottom: 1px solid rgb(173, 173, 173); } #calc .agency_table tr:not(.title) td.agency_margin{ font-size: 14px; line-height: 120%; min-width: initial; } #calc .agency_table tr.total td{ background-color: #4c4646; color:white; font-size: 18px; text-align: center !important; } #calc .agency_table tr.title td{ text-align: center !important; } #calc .agency_table tr:has(input:not(:checked)) td{ color:#9f9f9f; } #calc .agency_table td:first-child label{ justify-content: left; text-align: left; } #calc .agency_table label{ box-sizing: border-box; display: flex; width: 100%; height: 100%; align-items: center; text-align: center; justify-content: center; cursor: pointer; } #calc .agency_table tr:has(:checked) td{ background-color: hsl(var(--c1), var(--c2), calc(85% - var(--c3))); } #calc .agency_table tr:hover:not(:has(:checked)):has(input) td{ background-color: hsl(var(--c1), var(--c2), calc(95% - var(--c3))); color: black; } #calc .receipt_agency_table{ border-collapse : collapse; border-spacing : 0; } #calc .receipt_agency_table td{ text-align: center; padding: 4px; } #calc .receipt_agency_table tr.total td{ box-sizing: border-box; background-color: #707070; color: white; } #calc .receipt_agency_table tr.title td{ font-weight: bold; line-height: 120%; border-bottom: 1px solid rgb(173, 173, 173); } #calc .receipt_agency_table tr.margin td.agency_margin{ font-size: 14px; } #calc .receipt_desk_copyright{ position: fixed; background-color: rgb(71, 71, 71); color:white; bottom: 0; left: 0; z-index: 99999; width: 100%; height: 21px; line-height: 21px; text-align: center; } ((()=>{ "use strict"; const lhi = text => location.href.indexOf(text)>=0 ? true:false; let user = 'b2c'; if(lhi('/sign-calc') || lhi('calc_test_b20')){ user = 'b2c'; }else if(lhi('/client-calc')){ user = 'b2b'; }else if(lhi('/agency-calc')){ user = 'agency'; } document.querySelector('#calc').classList.add(user); const value_talbe = { '10': { '20': 18000, '25': 19800, '30': 27000, '40': 32400, '50': 36000, '60': 39600 }, '15': { '20': 22000, '25': 24200, '30': 33000, '40': 39600, '50': 44000, '60': 48400 }, '20': { '20': 28000, '25': 30800, '30': 42000, '40': 50400, '50': 56000, '60': 61600 }, '30': { '20': 38000, '25': 41800, '30': 57000, '40': 68400, '50': 76000, '60': 83600 }, '40': { '20': 50000, '25': 55000, '30': 75000, '40': 90000, '50': 100000, '60': 110000 }, '50': { '20': 70000, '25': 77000, '30': 105000, '40': 126000, '50': 140000, '60': 154000 }, '60': { '20': 120000, '25': 132000, '30': 180000, '40': 216000, '50': 240000, '60': 264000 }, '75': { '20': 150000, '25': 165000, '30': 225000, '40': 270000, '50': 300000, '60': 330000 } }; const title_imgs = { "일체형 채널":{ img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666835421540.png", value: 1, comments: [ "SMART CHANNEL에서 표준화한 특수한 일체형 3D 채널 간판", "SMART CHANNEL의 정품 액체 아크릴 (SMART UV 레진)을 통해 특수한 효과를 내는 간판", "정품 액체 아크릴 (SMART UV 레진) : 에폭시와 유사한 효과를 내는 무황변 고강도 광확산 액체 아크릴을 이용하여 에폭시의 단점을 없애고 장점은 극대화", "초소형 채널 제작 가능" ] }, "네온아트 채널":{ img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666835421736.png", value: 2, comments: [ "SMART CHANNEL에서 개발한 고급 프리미엄 에폭시 효과를 내는 3D 채널 간판", "SMART CHANNEL의 정품 액체 아크릴 (SMART UV 레진)과 샤인 UV 레진을 통해 특수한 효과를 내는 채널 간판 [정품 액체 아크릴 (SMART UV 레진) + 샤인 UV 레진]", "정품 액체 아크릴 (SMART UV 레진) : 에폭시와 유사한 효과를 내는 무황변 고강도 광확산 액체 아크릴을 이용하여 에폭시의 단점을 없애고 장점은 극대화", "샤인 UV 레진 : 정품 액체 아크릴 (SMART UV 레진)의 효과를 극대화하여 조명이 없을 때는 고급스럽게, 조명이 있을 때는 더욱 화려한 효과와 동시에 채널 간판의 내구성을 더욱 강하게", "초소형 채널 제작 가능" ] }, "에폭시형 채널":{ img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666835421888.png", value: 3, comments: [ "SMART CHANNEL에서 개발한 고급 프리미엄 에폭시 효과를 내는 3D 채널 간판", "SMART CHANNEL의 정품 액체 아크릴 (SMART UV 레진)과 샤인 UV 레진을 통해 특수한 효과를 내는 채널 간판 [정품 액체 아크릴 (SMART UV 레진) + 샤인 UV 레진]", "정품 액체 아크릴 (SMART UV 레진) : 에폭시와 유사한 효과를 내는 무황변 고강도 광확산 액체 아크릴을 이용하여 에폭시의 단점을 없애고 장점은 극대화", "샤인 UV 레진 : 정품 액체 아크릴 (SMART UV 레진)의 효과를 극대화하여 조명이 없을 때는 고급스럽게, 조명이 있을 때는 더욱 화려한 효과와 동시에 채널 간판의 내구성을 더욱 강하게", "초소형 채널 제작 가능" ] }, "아크릴 면발광 채널":{ img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1667375348300.png", value: 4, comments: [ "SMART CHANNEL에서 개발한 고급 프리미엄 에폭시 효과를 내는 3D 채널 간판", "SMART CHANNEL의 정품 액체 아크릴 (SMART UV 레진)과 샤인 UV 레진을 통해 특수한 효과를 내는 채널 간판 [정품 액체 아크릴 (SMART UV 레진) + 샤인 UV 레진]", "정품 액체 아크릴 (SMART UV 레진) : 에폭시와 유사한 효과를 내는 무황변 고강도 광확산 액체 아크릴을 이용하여 에폭시의 단점을 없애고 장점은 극대화", "샤인 UV 레진 : 정품 액체 아크릴 (SMART UV 레진)의 효과를 극대화하여 조명이 없을 때는 고급스럽게, 조명이 있을 때는 더욱 화려한 효과와 동시에 채널 간판의 내구성을 더욱 강하게", "초소형 채널 제작 가능" ] }, "아크릴 채널":{ img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666835422119.png", value: 5, comments: [ "일반 아크릴을 더욱 고급스럽게 효과를 내는 아크릴 채널 간판", "SMART CHANNEL의 샤인 UV 레진과 아크릴 형상 기술을 종합 이용하여 엠보 효과가 나는 아크릴 채널 간판 제작" ] }, "양산형 채널":{ img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1667452834235.png", value: 6, comments:[ "ISO 표준 양산 시스템 도입", "체계적인 QC 시스템", "직접 제조, 유통 관리, AS를 진행하는 3D프린터와 장비를 이용하여 리스크 없는 양산 가능", "자동화 장비 도입 전문 업체 + 3D프린터 전문 업체 + 간판 전문 업체 조합을 통한 최고 퀄리티의 일관성 있는 양산 제품 제작", "체계적인 유통 관리 시스템", "빠른 공기 및 납기 시스템", "AS 기간 도입", "진행사항 보고 시스템 도입" ] } }; const class_title = { channel : "channel", // 채널종류 size: "size", // 각수 floor: "floor", // 층 color1: "color1", // 입체 1번 color2: "color2", // 입체 2번 sidecolor: "sidecolor", // 외벽 도색 led: "led", heigth: "height", side: "side" } const cates = { "서비스 이용 확인 사항":{ class:[ "guideline" ], comments:[ "견적의 금액은 \"주문 고객용\"\"업체 전용\"\"파트너 기업 (계약기업)\"으로 해당 인원에게만 유효합니다.", "본 자동 견적 시스템은 저작권을 보호받고 있으며 저작권 소유는 오성시스템(주)에게 있습니다.", "본 소프트웨어를 유사하게 모방하거나 허가 없이 상업 목적으로 활용 시 법적인 처벌을 받을 수 있습니다." ], checkbox:{ title: "이해하고 동의합니다. (필수)", func: function(){ if(document.querySelector('#calc').classList.contains('on')) location.reload() document.querySelector('#calc').classList.toggle('on'); } } }, "기본 선택 사항" : { "채널 종류" : { code:class_title.channel, info: { type: 'link', link: '/channel' }, bts :{ "일체형 채널" : { value: 1 }, "네온아트 채널" : { value: 2 }, "에폭시형 채널" : { value: 3 }, "아크릴 면발광 채널" : { value: 4 }, "아크릴 채널" : { value: 5, popup:{ img:'https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666835422119.png', link: '/cso' } }, "양산형 채널" : { value: 6, popup:{ img:'https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1667452834235.png', link: '/cso' } } } }, "각수" : { code:class_title.size, info: { img : "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1670380871947.png" }, bts: { "~10각 (소형)":{ value: 10, class: 'not_'+class_title.channel+'_2' }, "~15각 (소형)":{ value: 15 }, "~20각 (중형)":{ value: 20 }, "~30각 (중형)":{ value: 30 }, "~40각 (중형)":{ value: 40 }, "~50각 (대형)":{ value: 50, class: [ 'not_'+class_title.channel+'_3', 'not_'+class_title.channel+'_4' ] }, "~60각 (대형)":{ value: 60, class: [ 'not_'+class_title.channel+'_3', 'not_'+class_title.channel+'_4' ] }, "~75각 (대형)":{ value: 75, class: [ 'not_'+class_title.channel+'_3', 'not_'+class_title.channel+'_4' ] } } }, "높이" : { code:class_title.heigth, info: { img : "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666853157001.png" }, bts: { "~20mm":{ value: 20, class: 'for_'+class_title.channel+'_2' }, "~25mm":{ value: 25, class: 'not_'+class_title.channel+'_2' }, "~30mm":{ value: 30, class: 'not_'+class_title.channel+'_2' }, "~40mm":{ value: 40, class: 'not_'+class_title.channel+'_2' }, "~50mm":{ value: 50, class: 'not_'+class_title.channel+'_2' }, "~60mm":{ value: 60, class: 'not_'+class_title.channel+'_2' } } }, "글자 형상" : { bts: { "한글":{ value: 1 }, "영문":{ value: 0.9 }, "로고":{ value: 1.3 } } }, "외벽두께" : { info: { img : "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666853157185.png" }, bts: { "레벨1 (0.6~0.8mm)":{ value: 1, class: [ 'not_'+class_title.channel+'_2', 'not_'+class_title.size+'_15', 'not_'+class_title.size+'_20', 'not_'+class_title.size+'_30', 'not_'+class_title.size+'_40', 'not_'+class_title.size+'_50', 'not_'+class_title.size+'_60', 'not_'+class_title.size+'_75' ] }, "레벨2 (1.2~1.4mm)":{ value: 1.1, class: [ 'for_'+class_title.channel+'_2', 'not_'+class_title.size+'_50', 'not_'+class_title.size+'_60', 'not_'+class_title.size+'_75' ] }, "레벨3 (1.6~2.0mm)":{ value: 1.2, class: [ 'not_'+class_title.channel+'_2', 'not_'+class_title.size+'_10' ] }, "레벨4 (2.2~2.4mm)":{ value: 1.3, class: [ 'not_'+class_title.channel+'_2', 'not_'+class_title.channel+'_3', 'not_'+class_title.channel+'_4', 'not_'+class_title.size+'_10', 'not_'+class_title.size+'_15', 'not_'+class_title.size+'_20', 'not_'+class_title.size+'_30', 'not_'+class_title.size+'_40', ] } } }, "외벽형상" : { code:class_title.side, info: { img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1670292213710.png" }, bts: { "일반형":{ value: 1, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666853158337.png" }, "라운드형":{ value: 1.1, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666853157636.png" }, "일반 경사형":{ value: 1.1, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666853158110.png" }, "꺽임형":{ value: 1.15, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666853157502.png" }, "이중 라운드형":{ value: 1.2, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666853157906.png", class: 'not_'+class_title.channel+'_2' }, "이중 꺽임형":{ value: 1.2, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666853157765.png", class: 'not_'+class_title.channel+'_2' } } }, "입체 색상 높이" : { code:class_title.floor, bts: { "1층":{ value: 1, img:"https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666853158668.png", class:[ `not_${class_title.side}_1_1`, `not_${class_title.side}_1_15`, `not_${class_title.side}_1_2` ] }, "2층":{ value: 1.02, img:"https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666853158857.png" }, "3층":{ value: 1.05, img:"https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666853159052.png" }, "4층 이상":{ value: 1.1, img:"https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1667530710280.png" } } }, "입체 색상, 1" : { code:class_title.color1, addtitle: " (1번)", info: { title : "입체 색상 1 (2층일 경우)", img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1670377497241.png" }, bts: { "불투명":{ value: 1, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1670293047588.png" }, "반투명":{ value: 1.05, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1670293047766.png" }, "투명":{ value: 1.1, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1670293047899.png" } } }, "입체 색상, 2" : { code:class_title.color2, addtitle: " (2번)", info: { title : "입체 색상 2 (2층일 경우)", img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1670377497241.png" }, comment : "2층 이상 시 추가선택", bts: { "불투명":{ value: 1, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1670293047588.png", class: [ 'not_'+class_title.floor+'_1' ], disabled : true }, "반투명":{ value: 1.05, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1670293047766.png", class: [ 'not_'+class_title.floor+'_1' ], disabled : true }, "투명":{ value: 1.1, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1670293047899.png", class: [ 'not_'+class_title.floor+'_1' ], disabled : true } } }, "조명 방식" : { bts: { "전광":{ value: 1.05, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1667375337526.png" }, "측광":{ value: 1, value2: 1.3, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666854313642.png" }, "전측광":{ value: 1.05, value2: 1.3, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666854313176.png" }, "후광":{ value: 1.3, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666854314056.png" }, "전후광":{ value: 1.3, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666854313433.png" }, "측후광":{ value: 1.3, value2: 1.3, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666854313799.png" } } }, "전면 표면 마감": { comment : "네온아트 / 에폭시 / 아크릴면발광 용", bts:{ "3D 출력물 마감": { value: 0.9, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666854314442.png", class: [ 'not_'+class_title.channel+'_1', 'not_'+class_title.channel+'_3', 'not_'+class_title.channel+'_4' ] }, "아크릴 마감": { value: 1.1, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1670392359047.png", class: [ 'not_'+class_title.channel+'_1', 'not_'+class_title.channel+'_3', 'not_'+class_title.channel+'_4' ] }, "SMART UV 레진": { value: 1, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666854314915.png", class: [ 'not_'+class_title.channel+'_1', 'not_'+class_title.channel+'_3', 'not_'+class_title.channel+'_4' ] }, "SMART UV 레진 + SHINE UV 레진": { value: '2do_resin', size: 2, img: "https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1666854314742.png", class: [ 'not_'+class_title.channel+'_1', 'for_'+class_title.channel+'_3', 'for_'+class_title.channel+'_4' ] } } } }, "추가 선택 사항": { "전면 시트작업": { info:{ text:"기본시트 : 일반시트지\n3M 시트 : 고급시트지 (색상 일관성, 내구성 우수)" }, bts: { "없음":{ value: 1 }, "기본 시트":{ value: 1.2 }, "3M 시트":{ value: 1.5 } } }, "전면부 조색": { info:{ img:"https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1670381887381.jpg" }, bts: { "없음":{ value: 1 }, "적용":{ value: 1.1, class:[ 'setcolor' ] }, setcolor:{ } } }, "외벽 도색": { code: class_title.sidecolor, info:{ img:"https://contents.sixshop.com/uploadedFiles/223847/blogPost/image_1670382128222.png" }, comment: "색상 반투명/투명 선택 시 적용 불가", bts: { "없음":{ value: 1, class:[ `for_${class_title.color1}_1_05`, `for_${class_title.color2}_1_05`, `for_${class_title.color1}_1_1`, `for_${class_title.color2}_1_1` ] }, "적용":{ value: 1.1, class: [ 'setcolor', 'not_'+class_title.color1+'_1_05', 'not_'+class_title.color1+'_1_1', 'not_'+class_title.color2+'_1_05', 'not_'+class_title.color2+'_1_1' ] }, setcolor:{ } } }, "LED 구매":{ code:class_title.led, bts: { "없음":{ value: 1 }, "적용":{ value: 'led' } } }, "LED 작업":{ class:[ 'last', 'last1' ], bts: { "없음(구매만)":{ value: 1, class:[ 'not_'+class_title.led+'_1' ] }, "적용":{ value: 1.1, class:[ 'not_'+class_title.led+'_1' ] } } } }, "수량 및 요청사항": { "글자 수":{ count : 1, class:[ 'quantity', 'single' ] }, "간판 세트 수":{ count : 1, class:[ 'last', 'last2', 'quantity', 'set' ] }, "기타사항":{ textarea : "", class:[ 'last', 'last3' ] } }, "안내사항": { enabled:[ "b2c" ], class:[ "notice" ], comments:[ "납품 업체로 등록하시면 할인된 가격이 적용됩니다.", "대량 구매는 업체에 문의하여 견적을 받아주세요." ], bt:{ title:"거래업체 등록하기", link:"/signup?returnUrl=/home" } }, "혜택 사항": { class:[ "moneytable" ], "업체 혜택":{ enabled:[ "b2b" ], comment : "협력/등록 업체는 할인 혜택 10%가 적용됩니다.", discount : { value : 30, disabled : true }, class:[ "discount" ] }, "50세트 이상":{ enabled:[ "b2b" ], comment : "50세트 이상 주문 시 할인 혜택 10% 추가 적용됩니다.", discount : { value : 10, fixed : true, disabled : true, cutline : { set: 50 } }, class:[ "discount" ] }, "300세트 이상":{ enabled:[ "b2b" ], comment : "300세트(또는 단품 500개) 이상 주문 시 할인 혜택 30% 추가 적용됩니다.", discount : { value : 30, fixed : true, disabled : true, cutline : { set: 300, single: 500 } }, class:[ "discount" ] }, "추가 할인 요청":{ discount : { value : 0 }, class:[ 'discount' ] }, moneytable: { values:[ ] } }, "대리점 수수료 (마진)": { enabled: [ "agency" ], agency_table:{ "B2C 일반 소비자" :{ value: 0.7, comm : "30~50% 마진구조\n(반영: 30%)", checked: true }, "B2B 등록 업체":{ value: 0.85, comm : "15% 마진구조" }, "양산가":{ value: 0.9, comm : "10% 마진구조" }, "부분 생산품":{ value: 0.65, comm : "35% 마진구조" } } }, "대리점 확인 사항":{ enabled:[ 'agency' ], "예상 지급일":{ comment: "협업 업체에게 예상 지급일을 기입하세요.", date: true }, class:[ 'agency' ], comments:[ "5,000,000원(VAT 별도)일 때, 계약금: 30%, 중도금: 70% 입니다.", "납품 견적서와 함께 수수료 표를 협업 업체에게 전송해 주십시오." ], checkbox:{ title: "동의합니다. (필수)", value: 1, func:() =>{ } } }, receipt:{ bts:{ "🖨️ 이미지로": { onclick: function(){ document.querySelector('#calc .show_receipt_checkbox').checked = true; redate(); html2canvas(document.querySelector('#calc .show_receipt_contents')).then(canvas => { let link = document.createElement('a'); link.download = '오성시스템_주 채널 예상견적 ' + document.querySelector('#calc .nowdate').innerText.replace(/\.|\:/gi,'_').replace(/ /gi,''); link.href = canvas.toDataURL('image/png'); link.click(); }); } }, "상담신청": { link: "/cso" } } } }; const dce = (nodeOption, mothernode = document.body) => { const spliter = /\.|\#|\:/gi; nodeOption = nodeOption.replace(spliter, ' $&').split(' '); let obj = {}; for(let i in nodeOption){ let opti = nodeOption[i]; if(i == 0){ if(opti == 'bt'){ obj.nodename = 'input'; obj.type = 'button'; }else if(opti == 'text'){ obj.nodename = 'input'; obj.type = 'text'; }else if(opti == 'number' || opti == 'num'){ obj.nodename = 'input'; obj.type = 'number'; }else if(opti == 'radio'){ obj.nodename = 'input'; obj.type = 'radio'; }else if(opti == 'date'){ obj.nodename = 'input'; obj.type = 'date'; }else if(opti == 'checkbox'){ obj.nodename = 'input'; obj.type = 'checkbox'; }else obj.nodename = opti; }else if(opti.indexOf('.')==0){ if(obj.class) obj.class.push(opti.replace('.','')); else obj.class = [opti.replace('.','')]; }else if(opti.indexOf('#')==0){ obj.id = opti.replace('#',''); }else if(opti.indexOf(':t=')==0){ obj.type = opti.replace(':t=',''); }else if(opti.indexOf(':v=')==0){ obj.value = opti.replace(':v=',''); }else if(opti.indexOf(':disabled')==0){ obj.disabled = true; } } let node = document.createElement(obj.nodename); if(obj.class) obj.class.forEach(c=>node.classList.add(c)); if(obj.id) node.id = obj.id; if(obj.value) node.value = obj.value; if(obj.type) node.type = obj.type; if(obj.disabled) node.disabled = true; mothernode.appendChild(node); return node; } const label_disabled = (label) =>{ if(label.nodeName == 'LABEL'){ label.querySelector('input[type="radio"]').checked = false; label.querySelector('input[type="radio"]').disabled = true; } } const redate = () => { let date = new Date() document.querySelector('#calc .copyright .nowdate').innerText = new Intl.DateTimeFormat('kr',{dateStyle:'medium',timeStyle:'short'}).format(date).toString(); } (()=>{ let calc_photo = document.createElement('div'); calc_photo.id = 'calc_photo'; let photo_table = dce('table', calc_photo); let tr; Object.keys(title_imgs).forEach((key, i) => { if(i == 0 || i == 1 || i == 4){ tr = dce('tr', photo_table); } let td = dce('td', tr); if(i == 0){ td.setAttribute('colspan', '3'); td.classList.add('main'); }else{ td.classList.add('sub'); td.addEventListener('click',function(){ let main = document.querySelector('#calc #calc_photo td.main'); let main_html = main.innerHTML; let clicked_html = this.innerHTML; td.innerHTML = main_html; main.innerHTML = clicked_html; }) } let div_img = dce('div', td); div_img.classList.add('channel_'+title_imgs[key].value); let img = new Image(); img.src = title_imgs[key].img; div_img.appendChild(img); let ul = dce('ul',td); for(let comm of title_imgs[key].comments){ let li = dce('li', ul); li.innerText = comm; } let title = dce('div.title', td); title.innerText = key; }); document.querySelector('.outtd1').appendChild(calc_photo); })(); let calc_cates = document.createElement('div'); calc_cates.id = 'calc_cates'; for(let cate_title of Object.keys(cates)){ if(cates[cate_title].enabled) if (cates[cate_title].enabled.indexOf(user) continue; } if(cate_title == 'receipt'){ let receipt = dce('div.receipt_desk', calc_cates); let show_receipt = dce('div.show_receipt', receipt); let show_receipt_movebox = dce('div.show_receipt_movebox', show_receipt); let show_receipt_bt = dce('label.show_receipt_bt', show_receipt_movebox); show_receipt_bt.innerText = '상세 견적 보기'; let show_receipt_checkbox = dce('checkbox.show_receipt_checkbox', show_receipt_bt); let show_receipt_paper = dce('div.show_receipt_paper', show_receipt_movebox); let show_receipt_contents = dce('div.show_receipt_contents', show_receipt_paper); let desk_contents = dce('div.receipt_desk_contents', receipt); let text1 = dce('span.text1', desk_contents); text1.innerText = "예상 견적가 : "; let final_amount = dce('input:disabled.final_amount', desk_contents); final_amount.type = 'text'; final_amount.value = '0 원'; if(cates[cate_title].bts){ let bts = dce('div.bts', desk_contents) for(let bt_title of Object.keys(cates[cate_title].bts)){ let bt = dce('bt', bts); bt.value = bt_title; if(cates[cate_title].bts[bt_title].link) bt.onclick = () => window.open(cates[cate_title].bts[bt_title].link); if(cates[cate_title].bts[bt_title].onclick) bt.onclick = cates[cate_title].bts[bt_title].onclick; } } let copyright= dce('div.receipt_desk_copyright', calc_cates); copyright.innerText = `본 "3D 채널 간판 제작 자동 견적 시스템"은 한국저작권위원회로부터 "저작권법" 제53조에 따라 저작권이 등록된 소프트웨어입니다.`; }else{ let div_cate_box = dce('div.cate_box', calc_cates); let div_cate_title = dce('div.cate_title', div_cate_box); div_cate_title.innerText = cate_title; let div_cate_contents = dce('div.cate_contents', div_cate_box); for(let option_title of Object.keys(cates[cate_title])){ if(option_title == 'enabled'){ if (cates[cate_title].enabled.indexOf(user) console.log('err'); } }else if(option_title == 'agency_table'){ let div_option = dce('div.option', div_cate_contents); let table = dce('table.agency_table', div_option); ['최종 고객 납품가','',...Object.keys(cates[cate_title].agency_table)].forEach((item, i) => { let tr = dce('tr', table); let td1 = dce('td', tr); let td2 = dce('td', tr); let td3, td4, td5; if(i != 0){ td3 = dce('td', tr); td4 = dce('td', tr); } if(i == 1){ td1.innerText = "선택 항목"; td2.innerText = "마진 구조"; td3.innerText = "파트너 기업 (계약기업)에게\n지불해야되는 금액\n(VAT별도)"; td4.innerText = "우리회사\n수수료 마진\n(VAT별도)"; td2.classList.add('agency_margin'); tr.classList.add('title') }else if(i == 0){ tr.classList.add('total'); td1.innerText = item; td2.setAttribute('colspan', 4); td2.classList.add('total_price'); }else{ let label1 = dce('label', td1); let radio = dce('radio', label1); radio.name = 'agency_table'; radio.id = `agency_table_${i}`; let span = dce('span', label1); span.innerText = item; let label2 = dce('label', td2); td2.classList.add('agency_margin'); let v1 = cates[cate_title].agency_table[item].value.toFixed(2); let v2 = (1 - cates[cate_title].agency_table[item].value).toFixed(2); let label3 = dce('label', td3); label3.setAttribute('value', v1); label3.setAttribute('for',`agency_table_${i}`); let label4 = dce('label', td4); label4.setAttribute('value', v2); label4.setAttribute('for',`agency_table_${i}`); if(cates[cate_title].agency_table[item].checked){ radio.checked = cates[cate_title].agency_table[item].checked; } if(cates[cate_title].agency_table[item].comm){ label2.innerText = cates[cate_title].agency_table[item].comm; label2.setAttribute('for',`agency_table_${i}`); } } }); }else if(option_title == 'class'){ cates[cate_title].class.forEach(c => div_cate_box.classList.add(c)); }else if(option_title == 'comments'){ let comments = dce('ul.comments', div_cate_contents); cates[cate_title].comments.forEach(comment => { let li = dce('li', comments); li.innerHTML = comment; }); }else if(option_title == 'bt'){ let btbox = dce('div.btbox', div_cate_contents); let bt = dce('bt', btbox); if(cates[cate_title].bt.title) bt.value = cates[cate_title].bt.title; if(cates[cate_title].bt.link) bt.onclick = () => window.open(cates[cate_title].bt.link); }else if(option_title == 'checkbox'){ let bt_div = dce('div.opiton_checkbox', div_cate_contents); let bt_label = dce('label.checkbox_label', bt_div); let bt = dce('checkbox', bt_label); let spna = dce('span', bt_label); spna.innerHTML = cates[cate_title].checkbox.title; if(cates[cate_title].checkbox.func) bt.onclick = cates[cate_title].checkbox.func; if(cates[cate_title].checkbox.value) bt.value = cates[cate_title].checkbox.value; }else if(option_title == 'moneytable'){ let table = dce('table.moneytable_contents', div_cate_contents); for(let tr_title of ['title','기본 견적가',...cates[cate_title].moneytable.values,'부가세','합계']){ if(tr_title == 'class' || tr_title == 'moneytable') continue; let tr = dce('tr', table); let td1 = dce('td', tr); let td2 = dce('td.discount_td', tr); let td3 = dce('td.price', tr); let td4 = dce('td.etc', tr); if(tr_title == 'title'){ tr.classList.add('title'); td1.innerText = ''; td2.innerText = '할인율'; td3.innerText = '금액'; td4.innerText = '비고'; }else if(tr_title == '합계'){ td1.innerText = tr_title; tr.classList.add('dctotal'); td2.classList.add('discount_text'); }else{ td1.innerText = tr_title; td2.classList.add('discount_text'); td2.setAttribute('name', tr_title); if(tr_title == '견적가'){ td2.innerText = '-'; } } } }else{ let enabled = true; if(cates[cate_title][option_title].enabled){ enabled = false; if (cates[cate_title][option_title].enabled.indexOf(user)>=0) enabled = true; } if(cates[cate_title].moneytable && enabled){ cates[cate_title].moneytable.values.push(option_title) } if(enabled){ let div_option = dce('div.option', div_cate_contents); let div_option_title = dce('div.option_title', div_option); let Option_Title = option_title.split(',')[0]; div_option_title.innerText = Option_Title; if(cates[cate_title][option_title].code) div_option.setAttribute('code', cates[cate_title][option_title].code); if(cates[cate_title][option_title].addtitle){ div_option_title.innerHTML += cates[cate_title][option_title].addtitle } if(cates[cate_title][option_title].class) cates[cate_title][option_title].class.forEach(c => div_option.classList.add(c)); let div_option_contents = dce('div.option_contents', div_option); for(let option_contents of Object.keys(cates[cate_title][option_title])){ if(option_contents == 'date'){ let date = dce('date', div_option_contents); date.value= new Date().toISOString().slice(0, 10); }else if(option_contents == 'bts'){ let div_option_contents_bts = dce('div.option_contents_bts', div_option_contents); for(let bt_title of Object.keys(cates[cate_title][option_title][option_contents])){ let bt_div = dce('div.bt', div_option_contents_bts); let bt_label = dce('label', bt_div); if(cates[cate_title][option_title][option_contents][bt_title].size){ bt_div.style.width = '290px'; } if(bt_title != 'setcolor') bt_label.innerText = bt_title; if(cates[cate_title][option_title][option_contents][bt_title].class){ bt_label.classList.add('fixed'); if(typeof(cates[cate_title][option_title][option_contents][bt_title].class) == 'string') bt_label.classList.add(cates[cate_title][option_title][option_contents][bt_title].class); else cates[cate_title][option_title][option_contents][bt_title].class.forEach((cla)=>{ bt_label.classList.add(cla); }) }; if(cates[cate_title][option_title][option_contents][bt_title].img){ let img_div = dce('div.hover_img', bt_div); let img = dce('img', img_div); img.src = cates[cate_title][option_title][option_contents][bt_title].img; }; if(cates[cate_title][option_title][option_contents][bt_title].popup){ let popup = dce('div.popup',bt_div); let popup_contents = dce('div.popup_contents',popup); let popup_img = new Image(); popup_img.src = cates[cate_title][option_title][option_contents][bt_title].popup.img; popup_contents.appendChild(popup_img); let popup_txt = dce('div.popup_txt',popup_contents); popup_txt.innerText = bt_title; let bt1_div = dce('div', popup_contents); let bt1 = dce('bt.ok', bt1_div); bt1.value = '문의하기'; bt1.onclick = function(){ window.open(cates[cate_title][option_title][option_contents][bt_title].popup.link) popup.style.display = 'none'; } let bt2_div = dce('div', popup_contents); let bt2 = dce('bt.cancle', bt2_div); bt2.value = '나중에'; bt2.onclick = function(){ popup.style.display = 'none'; } bt_label.onclick = function(){ if(calc.classList.contains('on')) popup.style.display = 'flex'; }; // popup.onclick = function(){ // this.style.display = 'none'; // } }else{ let bt = dce('input', bt_label); if(cates[cate_title][option_title].code){ bt.setAttribute('code', cates[cate_title][option_title].code) } if(bt_title == 'setcolor'){ bt.classList.add('inputext'); bt.type = 'text'; bt.placeholder = '색상을 입력하세요.'; bt.addEventListener('change',function(){ this.closest('.option_contents_bts').querySelector('label.setcolor input').title = `적용 (${this.value})`; }) }else{ bt.type = 'radio'; bt.value = cates[cate_title][option_title][option_contents][bt_title].value; if(cates[cate_title][option_title][option_contents][bt_title].value2) bt.setAttribute('value2', cates[cate_title][option_title][option_contents][bt_title].value2); bt.setAttribute('name', option_title); bt.setAttribute('title', bt_title); bt.addEventListener('change',function(e){ if(!document.querySelector('#calc').classList.contains('on')){ if(this) if(this.nodeName){ if(this.nodeName == 'INPUT' ) this.checked = false; } return false; } const forclick = (label) =>{ if(label.nodeName == 'LABEL'){ label.querySelector('input[type="radio"]').checked=true; } } let calc = document.querySelector('#calc'); let clicked = { value: this.getAttribute('value'), name: this.getAttribute('name'), title: this.getAttribute('title'), code: this.getAttribute('code') }; if(clicked.name == '채널 종류'){ calc.querySelector('#calc_photo .channel_'+clicked.value).click(); calc.querySelectorAll('input:checked:not([name="채널 종류"], [name="agency_table"], .checkbox_label input)').forEach((input)=>{ input.checked = false; }); } if(clicked.code){ let c2 = ""; if(calc.querySelector('input[name="채널 종류"]:checked')) if(clicked.name == '각수' && calc.querySelector('input[name="채널 종류"]:checked').value == 2){ c2 = ':not(label:has([name="외벽두께"]))' } let For = '.for_' + clicked.code + '_' + clicked.value.replace('.','_') + c2; let not = '.not_' + clicked.code + '_' + clicked.value.replace('.','_') + c2; calc.querySelectorAll('[class*="_'+clicked.code+'_"].fixed' + c2).forEach((label)=>{ label.querySelector('input').disabled = false; label.querySelector('input[type="radio"]').disabled = false; }); calc.querySelectorAll(For).forEach(item => forclick(item)); calc.querySelectorAll(not).forEach(item => label_disabled(item)); } }); if(cates[cate_title][option_title][option_contents][bt_title].disabled){ bt_label.classList.add('def_disabled'); label_disabled(bt_label); } } } } }else if(option_contents == 'info'){ let info = dce('label.option_info', div_option_title); info.innerText = 'ℹ️'; if(cates[cate_title][option_title][option_contents].type == 'link'){ info.onclick = ()=>{ window.open(cates[cate_title][option_title][option_contents].link); } }else{ let infoip = dce('input',info); infoip.type = 'checkbox'; infoip.id = option_title; let infobox = dce('div.infobox', info); let boxtitle = dce('label.info_title', infobox); boxtitle.setAttribute('for',option_title); let boxcontents = dce('div.info_contents', infobox); if(cates[cate_title][option_title][option_contents].img){ let img = dce('img', boxcontents); img.src = cates[cate_title][option_title][option_contents].img; } if(cates[cate_title][option_title][option_contents].title){ boxtitle.innerText = cates[cate_title][option_title][option_contents].title; }else{ boxtitle.innerText = Option_Title; } if(cates[cate_title][option_title][option_contents].text){ boxcontents.innerText += cates[cate_title][option_title][option_contents].text; } } }else if(option_contents == 'count'){ let div_option_contents_count = dce('div.option_contents_count', div_option_contents); let bt_down = dce('bt.counter-minus', div_option_contents_count); let count_box = dce('input', div_option_contents_count); let bt_up = dce('bt.counter-plus', div_option_contents_count); bt_down.disabled = true; count_box.type = 'number'; count_box.min = 1; bt_up.value = '+'; bt_down.value = '-'; count_box.value = '1'; let onclick = function(e){ let mom = this.closest('.option_contents_count'); let ip = mom.querySelector('input[type="number"]'); let add = this.classList.contains('counter-minus')? -1 : 1; let new_value = ip.value* 1 + add; mom.querySelector('.counter-minus').disabled = new_value ip.value = new_value }; count_box.addEventListener('change', function(){ this.closest('.option_contents_count').querySelector('.counter-minus').disabled = this.value }); bt_down.addEventListener('click', onclick); bt_up.addEventListener('click', onclick); }else if(option_contents == 'discount'){ let comm1 = dce('span', div_option_contents); let discount = dce('div.option_contents_discount', div_option_contents); let input_num = dce('number.discount_text', discount); input_num.max = 100; input_num.min = 0; input_num.value = cates[cate_title][option_title][option_contents].value; if(cates[cate_title][option_title][option_contents].fixed){ input_num.setAttribute('fixed',cates[cate_title][option_title][option_contents].value); } input_num.name = option_title; if(cates[cate_title][option_title][option_contents].disabled){ input_num.classList.add('fixed'); input_num.disabled = true; } let comm2 = dce('span', discount); comm2.innerText = '%'; if(cates[cate_title][option_title][option_contents].cutline){ div_option_contents.classList.add('dc_disabled'); div_option_contents.classList.add('cutline'); if(cates[cate_title][option_title][option_contents].cutline.set) div_option_contents.setAttribute('cut_set', cates[cate_title][option_title][option_contents].cutline.set); if(cates[cate_title][option_title][option_contents].cutline.single) div_option_contents.setAttribute('cut_single', cates[cate_title][option_title][option_contents].cutline.single); } }else if(option_contents == 'textarea'){ let div_option_contents_textarea = dce('div.option_contents_textarea', div_option_contents); let text = dce('textarea.contents_textarea', div_option_contents_textarea); text.placeholder = '내용을 입력하세요.'; } } if(cates[cate_title][option_title].comment){ let comment_div = dce('div.option_commnet', div_option_contents); comment_div.innerText += cates[cate_title][option_title].comment; } } } } } } document.querySelector('#calc .outtd2').appendChild(calc_cates); (()=>{ let calcon = function(){ if(!document.querySelector('#calc').classList.contains('on')){ if(this) if(this.nodeName){ if(this.nodeName == 'INPUT' ) this.checked = false; } return false; } let values = []; let items = document.querySelectorAll('#calc .outtd2 .option:has(.option_title)'); let size = null; let height = null; let channel; let quantity = {}; items.forEach((item, i)=>{ values[i] = {}; values[i].title = item.querySelector('.option_title').innerText.replace('ℹ️',''); if(item.hasAttribute('code')){ values[i].code = item.getAttribute('code'); } let checked = item.querySelector('.option_contents input[type="radio"]:checked'); let seted = item.querySelector('.option_contents input[type="number"]'); let textarea = item.querySelector('.option_contents textarea'); let date = item.querySelector('.option_contents input[type="date"]'); if(checked){ values[i].value = checked.value; values[i].option = checked.title; if(checked.hasAttribute('value2')){ values[i].value2 = checked.getAttribute('value2'); } }else if(seted){ values[i].value = seted.value; values[i].option = seted.value; values[i].count = true; }else if(textarea){ values[i].value = 1; values[i].textarea = '' + textarea.value; }else if(date){ values[i].value = 1; values[i].date = ' ' + date.value; } if(item.classList.contains('quantity')){ if(item.classList.contains('single')) quantity.single = values[i].value; if(item.classList.contains('set')) quantity.set = values[i].value; } if(item.hasAttribute('code')){ values[i].code = item.getAttribute('code'); if(item.getAttribute('code') == 'channel') channel = values[i].value; } if(item.classList.contains('last')){ item.classList.forEach((value)=>{ if(value.indexOf('last')==0) values[i][value] = true; }) } if(item.classList.contains('discount')){ values[i].discount = true; } }); // agency check; if(calc.querySelector('.agency input[type="checkbox"]')) if(calc.querySelector('.cate_box.agency input[type="checkbox"]').checked) values.push({ title : '대리점 동의사항', value: '1', class: 'client_check_ok', textarea: '동의합니다.' }); else values.push({ title : '대리점 동의사항', value: '1', class: 'client_check_no', textarea: '동의하지 않습니다.' }); // discount document.querySelectorAll('#calc .option.discount .discount_text').forEach(dc=>{ let table_dc = document.querySelector(`#calc .moneytable_contents .discount_text[name="${dc.name}"]`); table_dc.innerText = dc.value + ' %'; }); //cutline document.querySelectorAll('#calc .option .cutline').forEach(cl=>{ let single = false; let set = false; if(cl.hasAttribute('cut_set')){ let cut = cl.getAttribute('cut_set') * 1; if(quantity.set>= cut){ single = true; }else{ single = false; } } if(cl.hasAttribute('cut_single')){ let cut = cl.getAttribute('cut_single') * 1; if((quantity.single*quantity.set)>= cut){ set = true; }else{ set = false; } } if(set || single){ cl.classList.remove('dc_disabled'); cl.querySelector('input').value = cl.querySelector('input').getAttribute('fixed'); }else{ cl.classList.add('dc_disabled'); cl.querySelector('input').value = 0; } }); // let box = document.querySelector('#calc .show_receipt_contents'); let date = new Date(); box.innerHTML =''; let table = document.createElement('table'); let total_price = 0; let copyright = dce('div.copyright', box); copyright.innerText = `Copyright ${date.getFullYear()}. 오성시스템(주) All rights reserved.`; let nowdate = dce('div.nowdate', copyright); let table_title_1 = dce('div.table_title', box); table_title_1.innerText = ` * 기본 계산 금액`; let ledsize = 1; let resinsize = 0; let vat = {}; for(let option of values){ if(!option.discount){ let tr = dce('tr', table); let td1 = dce('td', tr); let td2 = dce('td', tr); td1.innerText = option.title; if(option.class){ tr.classList.add(option.class) } if(option.textarea != undefined){ td2.setAttribute('colspan', 2); td2.classList.add('receipt_textarea'); td2.innerText = option.textarea; }else if(option.date){ td2.setAttribute('colspan', 2); td2.classList.add('receipt_date'); td2.innerText = option.date; }else{ let td3 = dce('td', tr); if(option.value == 'led'){ option.value = '(각수를 선택하세요)'; if(ledsize>1){ option.value = ledsize; } }else if(option.value == '2do_resin'){ option.value = '(각수를 선택하세요)'; if(resinsize>0){ option.value = resinsize; } } if(option.value2 && channel == 4){ option.value = option.value2; } if(option.option){ td2.innerText = option.option; } if(option.code == 'size' && option.value){ size = option.value; if(option.option.indexOf('(소형)')>0){ ledsize = 1.1; resinsize = 3000; }else if(option.option.indexOf('(중형)')>0){ ledsize = 1.2; resinsize = 5000; }else if(option.option.indexOf('(대형)')>0){ ledsize = 1.3; resinsize = 10000; } } if(option.code == 'height' && option.value){ height = option.value; } if(size != null && height != null){ if(option.code == 'height'){ total_price = value_talbe[size][height]; td3.innerText = `기본금: ${total_price.toLocaleString()} 원`; }else if(option.value){ let add_price; if(option.value add_price = (total_price * option.value).toFixed() - total_price; }else{ add_price = (total_price + option.value).toFixed() - total_price; } total_price = total_price + add_price; td3.innerText = (add_price>=0?'+ ':'- ') + Math.abs(add_price).toLocaleString() + ' 원'; } } } } // if(option.value) td2.innerText += ` 「${option.value}」`; if(option.last){ if(option.last1){ vat.one = (total_price * 0.1).toFixed() * 1; let vat_tr = dce('tr.vat', table); let vat_td1 = dce('td', vat_tr); let vat_td2 = dce('td.withoutvat', vat_tr); let vat_td3 = dce('td', vat_tr); vat_td1.innerText = '부가세'; vat_td2.innerText = `(별도: ${total_price.toLocaleString()} 원)`; vat_td3.innerText = '+ ' + vat.one.toLocaleString() + ' 원'; }else if(option.last2){ vat.one = (total_price * 0.1).toFixed() * 1; let vat_tr = dce('tr.vat', table); let vat_td1 = dce('td', vat_tr); let vat_td2 = dce('td.withoutvat', vat_tr); let vat_td3 = dce('td', vat_tr); vat_td1.innerText = '부가세'; vat_td2.innerText = `(별도: ${total_price.toLocaleString()} 원)`; vat_td3.innerText = '+ ' + vat.one.toLocaleString() + ' 원'; let dc_total = total_price; let dc_total_vat = 0; let dc_per = 0; document.querySelectorAll('#calc .moneytable_contents .discount_td.discount_text').forEach((td, n) => { let tr = td.closest('tr'); let dc = td.innerText.replace(' %',''); if(tr.classList.contains('dctotal')){ td.innerText = dc_per + ' %' ; let pricetext_vat = `${(dc_total_vat).toLocaleString()} 원`; let pricetext = `${(dc_total).toLocaleString()} 원`; tr.querySelector('.price').innerText = pricetext_vat; calc.querySelector('.final_amount').value = pricetext_vat; if(calc.querySelector('td.total_price')) calc.querySelector('td.total_price').innerText = `${pricetext} (VAT별도)`; calc.querySelectorAll('.option .agency_table label[value]').forEach(td => { td.innerText = ((td.getAttribute('value') * dc_total).toFixed()* 1).toLocaleString() + ' 원'; }); }else{ if(!isNaN(dc)){ dc = dc * 1; dc_per += dc; }else{ dc = 0; } if(td.getAttribute('name')=='부가세'){ let dcvat = (dc_total / 100 * 10).toFixed() * 1; tr.querySelector('.etc').innerText = `(별도: ${(dc_total).toLocaleString()} 원)`; tr.querySelector('.price').innerText = (dcvat>=0?'+ ':'- ')+`${(Math.abs(dcvat)).toLocaleString()} 원` ; dc_total_vat = dcvat + dc_total; }else{ if(n == 0){ tr.querySelector('.price').innerText = (total_price).toLocaleString() + ' 원'; tr.querySelector('.etc').innerText = `1세트 = ${quantity.single}글자\n(${quantity.set}세트, 총 단품: ${(quantity.single * quantity.set).toLocaleString()}개)` }else{ let dc_price = (total_price / 100 * dc).toFixed() * 1; tr.querySelector('.price').innerText = (dc_price dc_total -= dc_price; } } } }); } let price_tr = dce('tr.last', table); let price_td1 = dce('td', price_tr); let price_td2 = dce('td', price_tr); let price_td3 = dce('td', price_tr); price_td1.innerText = '합계'; price_td3.innerText = Math.abs(total_price + vat.one).toLocaleString() + ' 원'; box.appendChild(table); if(option.last1){ let table_title_2 = dce('div.table_title', box); table_title_2.innerText = ` * 세트 계산 금액`; }else if(option.last2){ let table_title_3 = dce('div.table_title', box); table_title_3.innerText = ` * 기타 사항`; }else if(option.last3){ let table_title_3 = dce('div.table_title', box); table_title_3.innerText = ` * 혜택 사항`; } table = document.createElement('table'); if(option.last3){ table.classList.add('receipt_discount'); table.innerHTML = document.querySelector('#calc .moneytable_contents').innerHTML; if(user == 'agency'){ box.appendChild(table); let table_title_3 = dce('div.table_title', box); table_title_3.innerText = ` * 대리점 수수료 (마진)`; table = document.createElement('table'); table.classList.add('receipt_agency_table'); let agency_total_tr = dce('tr.total', table); agency_total_tr.innerHTML = document.querySelector('#calc .agency_table tr.total').innerHTML; let agency_title_tr = dce('tr.title', table); agency_title_tr.innerHTML = document.querySelector('#calc .agency_table tr.title').innerHTML; let agency_tr = dce('tr.margin', table); agency_tr.innerHTML = document.querySelector('#calc .agency_table tr:has(:checked)').innerHTML; agency_tr.querySelectorAll('td').forEach(td=>{ td.innerText = td.innerText; }) box.appendChild(table); let table_title_4 = dce('div.table_title', box); table_title_4.innerText = ` * 대리점 확인 사항`; table = document.createElement('table'); } } } redate(); } if(user == 'agency' && total_price>=5000000){ let price_tr = dce('tr.payment', table); let price_td1 = dce('td', price_tr); let price_td2 = dce('td', price_tr); let price_td3 = dce('td', price_tr); price_td1.innerText = '계약금'; price_td2.innerText = `계약금(VAT별도)\n${((total_price*0.3).toFixed()*1).toLocaleString()}`; price_td3.innerText = `중도금(VAT별도)\n${(total_price-(total_price*0.3).toFixed()*1).toLocaleString()}`; } box.appendChild(table); let comm = dce('div.receipt_commnet', box); comm.innerText = `*본 견적서는 참고용 전적서로 실제 견적내용과 다를 수 있습니다.본 이미지를 we9009@ohsungsys.com으로 보내주시거나 031-507-4978로 문의주시면 실제 견적을 받으실 수 있습니다.`; // console.log(JSON.stringify(values, null, '\t')); } document.querySelectorAll('.outtd2 input, .outtd2 textarea').forEach(item => { item.addEventListener('change', calcon); }); document.querySelectorAll('.outtd2 input[type="button"]').forEach(item => { item.addEventListener('click', calcon); }); calcon(); window.addEventListener('load', calcon); })(); }))();
