@charset "UTF-8"; /* Explain : MOBTUNE File : idcm_aiJoin.scss Date : 2025.06.24 Version : 1.1.2 */ /* z-index 순서 #. modal, modalDim: 999, 998 #. iMarkHover, userMenu : 800,801 #. selectDiv : 701 #. dimDot, dimCircle : 700 #. 캠페인리스트 : 500-1 #. 날짜(dateList) : 10 */ @font-face { font-family: "NotoSansL"; src: url("../font/notokr-light.eot"); src: url("../font/notokr-light.eot?#iefix") format("embedded-opentype"), url("../font/notokr-light.woff") format("woff"); } @font-face { font-family: "NotoSansR"; src: url("../font/notokr-regular.eot"); src: url("../font/notokr-regular.eot?#iefix") format("embedded-opentype"), url("../font/notokr-regular.woff") format("woff"); } @font-face { font-family: "NotoSansM"; src: url("../font/notokr-medium.eot"); src: url("../font/notokr-medium.eot?#iefix") format("embedded-opentype"), url("../font/notokr-medium.woff") format("woff"); } @font-face { font-family: "NotoSansB"; src: url("../font/notokr-bold.eot"); src: url("../font/notokr-bold.eot?#iefix") format("embedded-opentype"), url("../font/notokr-bold.woff") format("woff"); } @font-face { font-family: "scdreamB"; src: url("../font/scdreamB.eot"); src: url("../font/scdreamB.eot?#iefix") format("embedded-opentype"), url("../font/scdreamB.woff") format("woff"); } @font-face { font-family: "scdreamL"; src: url("../font/scdreamL.eot"); src: url("../font/scdreamL.eot?#iefix") format("embedded-opentype"), url("../font/scdreamL.woff") format("woff"); } @font-face { font-family: "NanumSquareL"; src: url("../font/NanumSquareL.eot"); src: url("../font/NanumSquareL.eot?#iefix") format("embedded-opentype"), url("../font/NanumSquareL.woff") format("woff"); } @font-face { font-family: "NanumSquareR"; src: url("../font/NanumSquareR.eot"); src: url("../font/NanumSquareR.eot?#iefix") format("embedded-opentype"), url("../font/NanumSquareR.woff") format("woff"); } @font-face { font-family: "NanumSquareB"; src: url("../font/NanumSquareB.eot"); src: url("../font/NanumSquareB.eot?#iefix") format("embedded-opentype"), url("../font/NanumSquareB.woff") format("woff"); } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } strong { font-weight: normal; } em { font-style: normal; } a { color: inherit; text-decoration: none; } button { border: none; outline: none; background: none; cursor: pointer; } * { box-sizing: border-box; -webkit-box-sizing: border-box; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } input { outline: none; } input::-ms-clear { display: none; } input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px white inset; } html, body { width: 100%; height: 100%; font-size: 14px; font-family: "NotoSansR"; } button { font-family: inherit; } /* File : color.scss Date : 2025.06.18 */ html { --white: #ffffff; --black: #000000; --red: #ff0000; --red2: #e31737; --B_mainColor: #07e6ff; --C_mainColor: #3c71fd; } html.themeB { --mainColor: #07e6ff; } html.themeC { --mainColor: #3c71fd; } html .typeB { --mainColor: #07e6ff; --ftColor: #ffffff; --subFtColor: #91aed5; --borderColor: #3f7197; --bgColor: #0a072b; --dimFtColor: #ffffff; --dimOpacity: 0.8; --dimShadow: rgba(0, 0, 0, 0.7); --dimBgColor: #000; --dateFtColor2: #778daa; --dateFtColor3: #778daa; --dateFtColor4: #101944; --dateFtColor5: #ffffff; --dateFtColor6: #0a072b; --dateFtColor7: #ffffff; --dateBorderColor: #3b6a90; --dateShadow: 0 0 10px 0 rgba(7, 230, 255, 0.5); --dateBgColor: #101944; --dateBgColor2: #133b6d; --dateBgColor3: #133b6d; --dateIpBorderColor: #3f7197; --dateIpBgColor: #192044; --pointColor: #07e6ff; --pointColor2: #ae6bfb; --pointColor3: #65fbd7; --pointColor4: #ff6767; --pointColor5: #5ab7ff; --pointColor6: #22f486; --pointColor7: #ff6767; --pointColor8: var(--pointColor); --pointColor9: #3c71fd; --issueColor: #ffcf31; --issueColor2: transparent; --issueColor3: var(--issueColor); --issueColor4: #ffcf31; --issueColor5: #fbbe30; --waitColor: #f5a123; --errorColor: #ff6767; --normalColor: var(--pointColor); --normalColor2: var(--pointColor); --normalColor3: #ffffff; --normalColor4: transparent; --noneColor: var(--btnOff_ftColor); --noneColor2: #3f7197; --checkColor: #aaaaaa; --ftColor2: var(--pointColor); --ftColor3: #000000; --ftColor4: #ffffff; --ftColor5: #ffffff; --ftColor6: #ffffff; --ftColor7: #ff6091; --ftColor8: #ff9e2e; --ftColor9: #778daa; --ftColor10: var(--pointColor); --ftColor11: #000000; --ftColor12: #4781cc; --ftColor13: #182152; --ftColor14: var(--pointColor); --ftColor15: var(--bgColor); --ftColor16: #407faa; --ftColor17: #060f3b; --ftColor18: #182152; --ftColor19: var(--pointColor); --ftColor20: var(--pointColor); --upColor: #ff6767; --downColor: #5ab7ff; --border2: none; --borderColor2: #000000; --borderColor3: #2e3765; --borderColor4: #3d4a87; --borderColor5: #3d4a87; --borderColor6: none; --borderColor7: none; --borderColor8: var(--borderColor); --borderColor9: #182152; --borderColor10: #ffffff; --borderColor11: #8441d3; --borderColor12: #2b3671; --borderColor13: transparent; --borderColor14: #407faa; --bgColor2: var(--bgColor); --bgColor3: #5a55e3; --bgColor4: #2b3468; --bgColor5: #060f3b; --bgColor6: #151c4f; --bgColor7: transparnet; --bgColor8: transparnet; --bgColor9: #060f3b; --bgColor10: transparnet; --bgColor11: #182152; --bgColor12: #ffffff; --bgColor13: #ffffff; --bgColor14: #0a072b; --bgColor15: #111a46; --bgColor16: #212a58; --bgColor17: #0f1444; --bgColor18: #070f34; --bgColor19: transparnet; --bgColor20: #192044; --bgColor21: #204177; --bgColor22: #0f163d; --bgColor23: #182152; --scrollbarColor: #ebebeb; --scrollThumbColor: var(--pointColor); --gradient: linear-gradient(to right, rgba(7, 170, 255, 0) 0%, rgba(7, 170, 255, 1) 50%, rgba(7, 170, 255, 0) 100%); --gradient2: radial-gradient(ellipse farthest-corner at, rgba(76, 235, 232, 1) 0%, rgba(76, 235, 232, 1) 50%, rgba(28, 190, 248, 0) 70%, rgba(7, 170, 255, 0) 100%); --gradient3: linear-gradient(to right, rgba(7, 170, 255, 0) 0%, rgba(174, 107, 251, 1) 50%, rgba(7, 170, 255, 0) 100%); --display: block; --shadow: 0 0 20px 0 var(--pointColor); --shadow2: 0 0 20px 0 var(--pointColor); --shadow3: 0 2px 0 0 rgba(0, 0, 0, 0.5), inset 0 0 30px 0 rgba(255, 255, 255, 0.1); --shadow4: 0.8px 0px 5px 0 rgba(0, 0, 0, 0.15); --shadow5: 0 0 20px 0 rgba(0, 0, 0, 0.5), inset 0 0 30px 0 rgba(255, 255, 255, 0.1); --headerFtColor: #778daa; --headerBorderColor: #0c1439; --headerStoreBorderColor: #48527a; --headerUserBgColor: #182152; --headerBgColor: #0c1439; --ico_userInfo: var(--pointColor); --ico_navColor_on: var(--pointColor); --ico_navColor_off: var(--white); --navFtColor: var(--ftColor); --navFtColor2: #ffffff; --navOnFtColor: var(--pointColor); --navBorderGradient: var(--gradient); --navShadow: 0 2px 0 0 rgba(0, 0, 0, 0.5), inset 0 0 15px 0 rgba(255, 255, 255, 0.05); --navCloseBorderColor: #48527a; --navCloseBgColor: #182152; --navBgColor: #0c1439; --navBgColor2: #161e48; --navBgColor3: #161e48; --bubbleBorderColor: #293363; --bubbleBgColor: #293363; --bubbleShadow: 0 0 10px 0 rgba(140, 228, 252, 0.5); --btnMain_ftColor: #182152; --btnMain_bgColor: var(--pointColor); --btnMain_ftColor2: var(--pointColor); --btnMain_border2: 2px solid var(--pointColor); --btnMain_shadow2: 0 0 5px 0 var(--pointColor); --btnMain_bgColor2: #111a46; --btnMain_ftColor4: var(--pointColor); --btnMain_border4: 2px solid var(--pointColor); --btnMain_shadow4: 0 0 5px 0 var(--pointColor); --btnMain_bgColor4: #111a46; --btnOff_ftColor: #80b6d6; --btnOff_BorderColor: #133b6d; --btnOff_BgColor: #133b6d; --btnOff_ftColor2: #80b6d6; --btnOff_BorderColor2: #133b6d; --btnOff_BgColor2: #133b6d; --btnDis_ftColor: #7696aa; --btnDis_BorderColor: #466182; --btnDis_BorderColor2: #7696aa; --btnDis_bgColor: #466182; --btnDlt_ftColor: #ffffff; --btnDlt_BorderColor: #f65a5a; --btnDlt_shadow: 0 0 5px 0 #f65a5a; --btnDlt_bgColor: #f65a5a; --btnFtColor3: #ae6bfb; --btnBorderColor3: #ae6bfb; --btnBgColor3: #111a46; --btnFtColor4: #947ead; --btnBorderColor4: #492c6a; --btnShadow4: 0 0 5px 0 #ae6bfb; --btnBgColor4: #492c6a; --btnFtColor5: var(--white); --btnBorderColor5: var(--white); --btnBgColor5: transparent; --btnFtColor6: var(--ftColor13); --btnBgColor6: var(--pointColor); --btnBorderColor2: #978eff; --btnShadow2: 0 0 20px 0 #978eff; --btnBgColor2: #e3e1ff; --tblBorderColor: #2b3671; --tblBgColor: #0f163d; --tblTheadBgColor: #4559bb; --tblTheadBgColor2: #7689e5; --tblTheadBgColor3: #0a072b; --tblTheadBgColor4: #070f34; --tblTheadBgColor5: #212c67; --tblTheadBgColor6: #182152; --tblTheadBgColor7: #060f3b; --tblTheadBgColor8: #9eb8ff; --tblTheadBgColor9: #0a072b; --tblTheadBgColor10: #0f1444; --tblTheadBgColor11: #4559bb; --tblTheadBgColor12: #2e3765; --tblTheadBgColor13: #212a58; --tblTheadBgColor14: #5360c0; --tblTheadBgColor15: #7689e5; --tblTheadBgColor16: #080430; --tblEmBgColor: #e15b5b; --tblEmBgColor2: #ff8585; --tblBgColor2: #407faa; --tblBgColor3: #3e4aa3; --tblBgColor4: #2e60d1; --tblBgColor5: #4559bb; --tblBgColor6: #0a1133; --tblBgColor7: #192461; --tblBgColor8: #ebf1fe; --tblBgColor9: #abc2ff; --tblBgColor10: #7198ff; --graphFtColor: #407faa; --graphBarColor: #407faa; --graphBgColor: #133b6d; --labelColor: var(--pointColor); --labelColor2: var(--pointColor2); --labelColor3: var(--pointColor3); --labelColor4: #1081f6; --labelColor5: #ff9e2e; --labelColor6: #098a78; --labelColor7: #ffacd0; --labelColor8: #ff7a7a; --labelColor9: #fa859c; --labelColor10: #07e6ff; --labelColor11: #34c38f; --labelColor12: #fce56b; --labelColor13: #5d72ff; --labelColor14: #ae6bfb; --ipBorderColor: #3f7197; --ipBgColor: #192044; --ipFtColor_placeholder: #3f7197; --ipFtColor_disabled: #7696aa; --ipBorderColor_disabled: #5e799a; --ipBgColor_disabled: #466182; --ipToggleFt_off: #407faa; --ipToggleBorder_off: #407faa; --ipToggleDot_off: #407faa; --ipToggleBg_off: #0a072b; --ipToggleFt_on: #ffffff; --ipToggleBorder_on: var(--pointColor); --ipToggleDot_on: var(--pointColor); --ipToggleBg_on: #111a46; --ipToggleFt_disabled: var(--btnDis_ftColor); --ipToggleBorder_disabled: var(--btnDis_BorderColor); --ipToggleDot_disabled: #7696aa; --ipToggleBg_disabled: var(--btnDis_bgColor); --slickDot: #ffffff; --slickDot_active: var(--pointColor2); --tabFtColor: var(--btnOff_ftColor); --tabBorder: var(--btnOff_BorderColor); --tabBgColor: var(--btnOff_BgColor); --tabBorderColor2: #407faa; --tabBgColor2_on: var(--btnOff_BgColor); --tabBorderColor3: #232357; --tabShadow3: inset 0 0 30px 0 rgba(255, 255, 255, 0.1); --tabBgColor3: #111b46; --tabBorderColor3_on: #232357; --tabShadow3_on: 0 2px 0 0 rgba(0, 0, 0, 0.16), inset 0 0 30px 0 rgba(255, 255, 255, 0.1); --tabBgColor3_on: #182152; --tabBgColor3_on2: linear-gradient(to right, rgba(7, 170, 255, 0) 0%, rgba(7, 170, 255, 1) 50%, rgba(7, 170, 255, 0) 100%); --tabZindex3: 0; --tabFtColor4: var(--white); --tabBorderColor4: #3d4a87; --tabBgColor4: #273160; --tabBorder4_on: var(--tabBorder); --tabBgColor_on: var(--btnMain_bgColor); --tabFtColor5: var(--subFtColor); --tabBorderColor5: #2b3671; --tabBgColor5: #0f163d; --tabBorderColor5_on: #2b3671; --tabBorderColor6: #232357; --tabShadow6: inset 0 0 30px 0 rgba(255, 255, 255, 0.1); --tabBgColor6: #111b46; --tabBorder6_on: #111a46; --tabShadow6_on: 0 2px 0 0 rgba(0, 0, 0, 0.16), inset 0 0 30px 0 rgba(255, 255, 255, 0.1); --tabBgColor6_on: #182152; --tabBgColor6_on2: linear-gradient(to right, rgba(7, 170, 255, 0) 0%, rgba(7, 170, 255, 1) 50%, rgba(7, 170, 255, 0) 100%); --tabViewBorder: none; --tabViewBorder2: none; --boxBorderColor: #232357; --boxShadow: 0 2px 0 0 rgba(0, 0, 0, 0.5), inset 0 0 15px 0 rgba(255, 255, 255, 0.05); --boxBgColor: #111a46; --boxBorder2: none; --boxShadow2: 0 2px 0 0 rgba(0, 0, 0, 0.16), inset 0 0 30px 0 rgba(255, 255, 255, 0.1); --boxBgColor2: #182152; --boxBorderColor3: var(--boxBorderColor); --boxShadow3: var(--shadow3); --boxBgColor3: #182152; --boxBorderColor4: var(--boxBorderColor); --boxBorderColor5: #0a072b; --boxBgColor5: #111a46; --boxftColor6: var(--pointColor); --boxBorderColor6: #133b6d; --boxBorderColor6_hover: 1px solid #133b6d; --boxShadow6: 0 2px 0 0 rgba(0, 0, 0, 0.16), inset 0 0 30px 0 rgba(255, 255, 255, 0.1); --boxShadow6_hover: 0 0 5px 0 #07e6ff; --boxBgColor6: #133b6d; --boxBgColor6_hover: #133b6d; --boxBorderColor7: #2b3671; --boxBgColor7: #0f163d; --boxBorderColor8: #3d4a87; --boxBgColor8: #151c4f; --boxBorderColor10: var(--borderColor); --boxBgColor10: var(--bgColor); --boxftColor11: var(--bgColor); --boxBorderColor11: var(--pointColor); --boxBgColor11: var(--pointColor); --boxBorderColor12: #0d9cf4; --boxShadow12: 0 0 10px 0 rgba(7, 230, 255, 0.2); --boxBgColor12: #0e153a; --boxBorderColor13:#978eff; --boxShadow13: 0 0 20px 0 #978eff; --boxBgColor13: #ffffff; --boxBorderColor14:#978eff; --boxShadow14: 0 0 20px 0 #978eff; --boxBgColor14: #e3e1ff; --boxOnColor: #ffffff; --boxOnColor2: #ffffff; --boxOnColor3: #ffffff; --boxOnColor4: var(--upColor); --boxColor1: #bdb6d5; --boxColor2: #d561ba; --boxColor3: #d52f82; --boxColor4: #e950ac; --boxColor5: #8e7bb3; --boxColor6: #744684; --boxColor7: #c562cf; --boxColor8: #473974; --boxColor9: #362f58; --boxColor10: #603578; --boxColor11: #903e88; --boxColor12: #9948b5; --boxColor13: #be4a9f; --boxColor14: #864879; --boxColor2_1: #f2638f; --boxColor2_2: #5a55e3; --boxColor2_3: #2ed1aa; --boxColor2_4: #1081f6; --boxColor2_5: #ae6bfb; --boxColor3_1: #7373be; --boxColor3_2: #529ff8; --boxColor3_3: #cd6fd9; --boxColor3_4: #fc91aa; --boxColor3_5: #ffbd53; --boxColor3_6: #66b298; --boxColor3_7: #c8795a; --boxColor3_8: #7435b2; --boxColor3_9: #a4b494; --boxColor3_10: #52ccda; --boxColor3_11: #ff6363; --boxColor3_12: #3f3351; --zIndex: auto; --ico_color: var(--pointColor); --ico_color2: #ffffff; --ico_color3: #2d5a7d; --ico_color4: var(--pointColor); --ico_color5: #fff; --ico_color6: var(--btnOff_BgColor); --ico_color7: #2e3765; --ico_color8: var(--bgColor); --ico_color9: #0a072b; --ico_color10: var(--subFtColor); --ico_color11: #0a072b; --ico_color12: #7696aa; --ico_color13: #222222; --ico_color14: var(--btnDis_bgColor); --ico_color15: #ffffff; --ico_closeColor: #2d5a7d; --modalBorderColor: var(--pointColor); --modalShadow: 0 0 10px 0 var(--mainColor), inset 0 0 30px 0 rgba(255, 255, 255, 0.1); --modalBgColor: #151c4f; --etcColor: #204177; --etcColor2: var(--pointColor); --etcColor3: #192044; --etcColor4: #0f1444; --etcColor5: #204177; --etcColor6: #0a072b; --etcColor7: #2d5a7d; } html .typeC { --mainColor: #3c71fd; --ftColor: #222222; --subFtColor: #999999; --borderColor: #e6e6e6; --bgColor: #f6f6f6; --dimFtColor: #000000; --dimOpacity: 0.8; --dimShadow: rgba(0, 0, 0, 0.5); --dimBgColor: #fff; --dateFtColor2: #222222; --dateFtColor3: #e5e5e5; --dateFtColor4: #ffffff; --dateFtColor5: #222222; --dateFtColor6: #ffffff; --dateFtColor7: #ffffff; --dateBorderColor: #d6d6d6; --dateShadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1); --dateBgColor: #ffffff; --dateBgColor2: #88a9ff; --dateBgColor3: #c1c8db; --dateIpBorderColor: #d6d6d6; --dateIpBgColor: #ffffff; --pointColor: #3c71fd; --pointColor2: #8c6bfb; --pointColor3: #51ca9e; --pointColor4: #ff6767; --pointColor5: #39a8ff; --pointColor6: #23bc85; --pointColor7: #ff6767; --pointColor8: #07e6ff; --pointColor9: #3c71fd; --issueColor: #ffcf31; --issueColor2: var(--issueColor); --issueColor3: var(--white); --issueColor4: var(--ftColor); --issueColor5: #fbbe30; --waitColor: #f5a123; --errorColor: #ff6767; --normalColor: var(--pointColor); --normalColor2: #07e6ff; --normalColor3: var(--pointColor); --normalColor4: var(--pointColor); --noneColor: #80b6d6; --noneColor2: #3f7197; --checkColor: #aaaaaa; --ftColor2: var(--ftColor); --ftColor3: #ffffff; --ftColor4: #ffffff; --ftColor5: var(--pointColor); --ftColor6: #222222; --ftColor7: #ff6091; --ftColor8: #ff9e2e; --ftColor9: #222222; --ftColor10: #ffffff; --ftColor11: #000000; --ftColor12: var(--pointColor); --ftColor13: #182152; --ftColor14: var(--pointColor8); --ftColor15: var(--bgColor); --ftColor16: #c4c4c4; --ftColor17: #ffffff; --ftColor18: var(--white); --ftColor19: var(--white); --ftColor20: var(--pointColor); --upColor: #ff5353; --downColor: #1081f6; --border2: 1px solid var(--borderColor); --borderColor2: #e6e6e6; --borderColor3: #e6e6e6; --borderColor4: #ffffff; --borderColor5: #ebebeb; --borderColor6: #aaaaaa; --borderColor7: #e5e5e5; --borderColor8: var(--pointColor); --borderColor9: var(--borderColor); --borderColor10: #000000; --borderColor11: #8441d3; --borderColor12: var(--pointColor); --borderColor13: #f9f9f9; --borderColor14: #a2bdf3; --bgColor2: var(--mainColor); --bgColor3: var(--mainColor); --bgColor4: var(--bgColor); --bgColor5: #f9f9f9; --bgColor6: #ffffff; --bgColor7: var(--btnOff_BgColor); --bgColor8: var(--pointColor); --bgColor9: #ffffff; --bgColor10: #ffffff; --bgColor11: #ffffff; --bgColor12: var(--btnOff_BgColor); --bgColor13: var(--pointColor); --bgColor14: #ffffff; --bgColor15: var(--pointColor); --bgColor16: #f6f6f6; --bgColor17: #ffffff; --bgColor18: #ffffff; --bgColor19: #f9f9f9; --bgColor20: #ffffff; --bgColor21: #ebebeb; --bgColor22: #f9f9f9; --bgColor23: #f9f9f9; --scrollbarColor: #ebebeb; --scrollThumbColor: var(--mainColor); --gradient: none; --gradient2: none; --gradient3: none; --display: none; --shadow: 0 0 20px 0 var(--pointColor); --shadow2: none; --shadow3: none; --shadow4: none; --shadow5: none; --headerFtColor: #777777; --headerBorderColor: #e9e9e9; --headerStoreBorderColor: #d1d1d1; --headerUserBgColor: #ffffff; --headerBgColor: #ffffff; --ico_userInfo: var(--pointColor); --ico_navColor_on: var(--white); --ico_navColor_off: #777777; --navBorderColor: #ffffff; --navFtColor: #777777; --navFtColor2: #777777; --navOnFtColor: var(--white); --navShadow: none; --navCloseBorderColor: #d1d1d1; --navCloseBgColor: var(--mainColor); --navBgColor: var(--white); --navBgColor2: var(--mainColor); --navBgColor3: #f6f6f6; --bubbleBorderColor: #ffffff; --bubbleBgColor: #ffffff; --bubbleShadow: 0 5px 10px 0 rgba(34, 34, 34, 0.1); --btnMain_ftColor: var(--white); --btnMain_bgColor: var(--pointColor); --btnMain_ftColor2: var(--pointColor); --btnMain_border2: 1px solid var(--pointColor); --btnMain_shadow2: none; --btnMain_bgColor2: #e9f6ff; --btnMain_ftColor4: var(--ftColor4); --btnMain_border4: 1px solid var(--pointColor); --btnMain_shadow4: none; --btnMain_bgColor4: var(--pointColor); --btnOff_ftColor: var(--white); --btnOff_BorderColor: #c1c8db; --btnOff_BgColor: #c1c8db; --btnOff_ftColor2: var(--ftColor); --btnOff_BorderColor2: var(--borderColor); --btnOff_BgColor2: var(--white); --btnDis_ftColor: #c4c4c4; --btnDis_BorderColor: #eceff1; --btnDis_BorderColor2: #c4c4c4; --btnDis_bgColor: #eceff1; --btnDlt_ftColor: #ffffff; --btnDlt_BorderColor: #f65a5a; --btnDlt_shadow: none; --btnDlt_bgColor: #f65a5a; --btnFtColor3: #ffffff; --btnBorderColor3: #8c6bfb; --btnBgColor3: #8c6bfb; --btnFtColor4: #ffffff; --btnBorderColor4: #ccc6d8; --btnShadow4: none; --btnBgColor4: #ccc6d8; --btnFtColor5: var(--pointColor); --btnBorderColor5: var(--pointColor); --btnBgColor5: #ffffff; --btnFtColor6: var(--ftColor13); --btnBgColor6: var(--pointColor8); --btnBorderColor2: #978eff; --btnShadow2: 0 0 20px 0 #978eff; --btnBgColor2: #e3e1ff; --tblBorderColor: #e6e6e6; --tblBgColor: #ffffff; --tblEmBgColor: #e15b5b; --tblEmBgColor2: #ff8585; --tblTheadBgColor: #3c71fd; --tblTheadBgColor2: #6d95ff; --tblTheadBgColor3: #9eb8ff; --tblTheadBgColor4: #f6f6f6; --tblTheadBgColor5: #f6f6f6; --tblTheadBgColor6: #ffffff; --tblTheadBgColor7: #3c71fd; --tblTheadBgColor8: #9eb8ff; --tblTheadBgColor9: #f6f6f6; --tblTheadBgColor10: #f6f6f6; --tblTheadBgColor11: #f6f6f6; --tblTheadBgColor12: #6d95ff; --tblTheadBgColor13: #f6f6f6; --tblTheadBgColor14: #3c71fd; --tblTheadBgColor15: #f6f6f6; --tblTheadBgColor16: #6a92fc; --tblBgColor2: #a2bdf3; --tblBgColor3: #6368ef; --tblBgColor4: #71aaff; --tblBgColor5: #ffffff; --tblBgColor6: #ffffff; --tblBgColor7: #e9f6ff; --tblBgColor8: #ebf1fe; --tblBgColor9: #abc2ff; --tblBgColor10: #7198ff; --graphFtColor: #c1c8db; --graphBarColor: #c1c8db; --graphBgColor: #e4e4e5; --labelColor: #38ddff; --labelColor2: #8c6bfb; --labelColor3: #51ca9e; --labelColor4: #1081f6; --labelColor5: #ff9e2e; --labelColor6: #098a78; --labelColor7: #f588b7; --labelColor8: #ff7a7a; --labelColor9: #fa859c; --labelColor10: #07e6ff; --labelColor11: #34c38f; --labelColor12: #fce56b; --labelColor13: #5d72ff; --labelColor14: #ae6bfb; --ipBorderColor: #d6d6d6; --ipBgColor: #ffffff; --ipFtColor_placeholder: #bbbbbb; --ipFtColor_disabled: #c4c4c4; --ipBorderColor_disabled: #d6d6d6; --ipBgColor_disabled: #eceff1; --ipToggleFt_off: #ffffff; --ipToggleBorder_off: var(--btnOff_BorderColor); --ipToggleDot_off: #ffffff; --ipToggleBg_off: var(--btnOff_BgColor); --ipToggleFt_on: #ffffff; --ipToggleBorder_on: var(--pointColor); --ipToggleDot_on: #ffffff; --ipToggleBg_on: var(--pointColor); --ipToggleFt_disabled: #c4c4c4; --ipToggleBorder_disabled: var(--btnDis_BorderColor); --ipToggleDot_disabled: #c4c4c4; --ipToggleBg_disabled: var(--btnDis_bgColor); --slickDot: #cecece; --slickDot_active: var(--pointColor2); --tabFtColor: var(--btnOff_ftColor); --tabBorder: var(--btnOff_BorderColor); --tabBgColor: var(--btnOff_BgColor); --tabBorderColor2: var(--btnOff_BorderColor); --tabBgColor2_on: var(--white); --tabBorderColor3: var(--borderColor); --tabShadow3: none; --tabBgColor3: var(--white); --tabBorderColor3_on: var(--pointColor); --tabShadow3_on: none; --tabBgColor3_on: #ffffff; --tabBgColor3_on2: none; --tabZindex3: 1; --tabFtColor4: var(--white); --tabBorderColor4: var(--white); --tabBgColor4: var(--btnOff_BgColor); --tabBorder4_on: var(--tabBorder); --tabBgColor_on: var(--btnMain_bgColor); --tabFtColor5: var(--subFtColor); --tabBorderColor5: var(--btnOff_BorderColor); --tabBgColor5: #ffffff; --tabBorderColor5_on: var(--pointColor); --tabBorderColor6: #e5e5e5; --tabShadow6: none; --tabBgColor6: #ffffff; --tabBorder6_on: var(--pointColor); --tabShadow6_on: none; --tabBgColor6_on: #ffffff; --tabBgColor6_on2: none; --tabViewBorder: 1px solid var(--pointColor); --tabViewBorder2: 1px solid var(--borderColor); --boxBorderColor: var(--borderColor); --boxShadow: none; --boxBgColor: var(--white); --boxBorder2: 1px solid var(--borderColor); --boxShadow2: none; --boxBgColor2: var(--white); --boxBorderColor3: var(--borderColor); --boxShadow3: none; --boxBgColor3: var(--white); --boxBorderColor4: var(--borderColor); --boxBorderColor5: var(--borderColor); --boxBgColor5: var(--white); --boxftColor6: var(--pointColor); --boxBorderColor6: var(--pointColor); --boxBorderColor6_hover: 1px solid var(--pointColor); --boxShadow6: none; --boxShadow6_hover: none; --boxBgColor6: var(--white); --boxBgColor6_hover: var(--pointColor); --boxBorderColor7: var(--borderColor); --boxBgColor7: var(--white); --boxBorderColor8: #ebebeb; --boxBgColor8: #ffffff; --boxBorderColor10: var(--borderColor); --boxBgColor10: var(--bgColor); --boxftColor11: var(--bgColor); --boxBorderColor11: var(--pointColor); --boxBgColor11: var(--pointColor); --boxBorderColor12: var(--borderColor); --boxShadow12: none; --boxBgColor12: var(--bgColor); --boxBorderColor13:#978eff; --boxShadow13: 0 0 20px 0 #978eff; --boxBgColor13: #ffffff; --boxBorderColor14:#978eff; --boxShadow14: 0 0 20px 0 #978eff; --boxBgColor14: #e3e1ff; --boxOnColor: rgba(255, 0, 0, 1); --boxOnColor2: #ee00ff; --boxOnColor3: var(--pointColor); --boxOnColor4: #ff6767; --boxColor1: #a2bdf3; --boxColor2: #6368ef; --boxColor3: #4074ff; --boxColor4: #9d48ff; --boxColor5: #71aaff; --boxColor6: #3633a5; --boxColor7: #3cd5fd; --boxColor8: #26c0e1; --boxColor9: #202c6e; --boxColor10: #3c31e1; --boxColor11: #536ef1; --boxColor12: #1e9af9; --boxColor13: #6f0ae3; --boxColor14: #32006e; --boxColor2_1: #f2638f; --boxColor2_2: #5a55e3; --boxColor2_3: #2ed1aa; --boxColor2_4: #1081f6; --boxColor2_5: #ae6bfb; --boxColor3_1: #a2bdf3; --boxColor3_2: #6368ef; --boxColor3_3: #26c0e1; --boxColor3_4: #9d48ff; --boxColor3_5: #71aaff; --boxColor3_6: #3cd5fd; --boxColor3_7: #202c6e; --boxColor3_8: #6f0ae3; --boxColor3_9: #3633a5; --boxColor3_10: #1e9af9; --boxColor3_11: #6f0ae3; --boxColor3_12: #32006e; --zIndex: 1; --ico_color: var(--pointColor); --ico_color2: #222222; --ico_color3: #aaaaaa; --ico_color4: #ffffff; --ico_color5: var(--pointColor); --ico_color6: var(--btnOff_BgColor); --ico_color7: var(--borderColor); --ico_color8: var(--white); --ico_color9: var(--pointColor); --ico_color10: var(--subFtColor); --ico_color11: #ffffff; --ico_color12: #c4c4c4; --ico_color13: #ffffff; --ico_color14: var(--btnDis_bgColor); --ico_color15: #ffffff; --ico_closeColor: #222222; --modalBorderColor: var(--borderColor); --modalShadow: 0 0 10px 0 var(--borderColor), inset 0 0 30px 0 rgba(255, 255, 255, 0.1); --modalBgColor: #ffffff; --etcColor: var(--pointColor2); --etcColor2: #f2638f; --etcColor3: #f6f6f6; --etcColor4: #f5faff; --etcColor5: #ebebeb; --etcColor6: var(--pointColor); --etcColor7: #aaaaaa; } html .grid_contents_wrap { --ftColor20: var(--pointColor); } /* File : image.scss Date : 2025.06.18 */ .typeB { --logo_tune: url(../image_v3/logo/logoB_tune720.svg) no-repeat center; --logo_isend: url(../image_v3/logo/logo_isend_wht.svg) no-repeat center; --logo_mobon: url(../image_v3/logo/logo_mobon_wht.svg) no-repeat center; --logo_mobwith: url(../image_v3/logo/logo_mobwith_wht.svg) no-repeat center; --logo_items: url(../image_v3/logo/logo_items_wht.svg) no-repeat center; --logo_mobi: url(../image_v3/logo/logo_mobi_wht.svg) no-repeat center; --logo_kakaoPM: url(../image_v3/logo/logo_kakaoPersonalMessage_wht.png) no-repeat center; --logo_makeTApp: url(../image_v3/logo/logo_makeTApp_wht.png) no-repeat center; --logo_ADHub: url(../image_v3/logo/logo_ADHub_wht.png) no-repeat center; --logo_criteo2: url(../image_v3/logo/logo_criteo_wht.png) no-repeat center; --logo_googleAds: url(../image_v3/logo/logo_googleAds_wht.png) no-repeat center; --header_ai: url(../image_v3/menu/icoB_ai.svg) no-repeat center; --nav_reportPlus_on: url(../image_v3/menu/icoB_reportPlus_on.svg) no-repeat center; --nav_reportPlus_off: url(../image_v3/menu/icoB_reportPlus_off.svg) no-repeat center; --ico_widget: url(../image_v3/component/icoB_widget.svg) no-repeat center; --ico_widgetAdd2: url(../image_v3/component/icoB_widgetAdd2.svg) no-repeat center; --ico_checkbox_on: url(../image_v3/component/icoB_checkbox_on.svg) no-repeat center; --ico_checkbox_off: url(../image_v3/component/icoB_checkbox_off.svg) no-repeat center; --ico_checkbox_disabled: url(../image_v3/component/icoB_checkbox_disabled.svg) no-repeat center; --ico_radio_on: url(../image_v3/component/icoB_radio_on.svg) no-repeat center; --ico_radio_off: url(../image_v3/component/icoB_radio_off.svg) no-repeat center; --ico_radio_disabled: url(../image_v3/component/icoB_radio_disabled.svg) no-repeat center; --ico_select: url(../image_v3/component/icoB_select.svg) no-repeat center; --ico_searchBox: url(../image_v3/component/icoB_searchBox.svg) no-repeat center; --ico_paperAirplain: url(../image_v3/component/ico_paperAirplain.svg) no-repeat center; --ico_send_on: url(../image_v3/component/icoB_send_on.png) no-repeat center; --ico_send_off: url(../image_v3/component/icoB_send_off.png) no-repeat center; --ico_noty_on: url(../image_v3/component/icoB_noty_on.svg) no-repeat center; --ico_noty_off: url(../image_v3/component/icoB_noty_off.png) no-repeat center; --ico_i: url(../image_v3/component/ico_i_wht.svg) no-repeat center; --ico_i_wht: url(../image_v3/component/ico_i_wht.svg) no-repeat center; --ico_sign: url(../image_v3/component/icoB_sign.svg) no-repeat center; --ico_check: url(../image_v3/component/icoB_check.svg) no-repeat center; --ico_siteNotFound: url(../image_v3/component/icoB_siteNotFound.svg) no-repeat center; --ico_inflow: url(../image_v3/component/icoB_inflow.svg) no-repeat center; --ico_inflowMoney: url(../image_v3/component/icoB_inflowMoney.svg) no-repeat center; --ico_arrowRightS: url(../image_v3/component/icoB_arrowRightS.svg) no-repeat center; --ico_arrowRightS_t2: url(../image_v3/component/ico_arrowRightS_wht.svg) no-repeat center; --ico_star_on: url(../image_v3/component/icoB_star_on.svg) no-repeat center; --ico_star_off: url(../image_v3/component/icoB_star_off.svg) no-repeat center; --ico_arrowRight: url(../image_v3/component/icoB_arrowRight.svg) no-repeat center; --ico_purchaseRate_on: url(../image_v3/component/icoB_purchaseRate.svg) no-repeat center; --ico_purchaseRate_off: url(../image_v3/component/icoB_purchaseRate.svg) no-repeat center; --ico_leaveRate_on: url(../image_v3/component/icoB_leaveRate.svg) no-repeat center; --ico_leaveRate_off: url(../image_v3/component/icoB_leaveRate.svg) no-repeat center; --ico_visitCount_on: url(../image_v3/component/icoB_visitCount.svg) no-repeat center; --ico_visitCount_off: url(../image_v3/component/icoB_visitCount.svg) no-repeat center; --ico_basketSearch_on: url(../image_v3/component/icoB_basketSearch.svg) no-repeat center; --ico_basketSearch_off: url(../image_v3/component/icoB_basketSearch.svg) no-repeat center; --ico_basketPlus_on: url(../image_v3/component/icoB_basketPlus.svg) no-repeat center; --ico_basketPlus_off: url(../image_v3/component/icoB_basketPlus.svg) no-repeat center; --ico_customerPrice_on: url(../image_v3/component/icoB_customerPrice.svg) no-repeat center; --ico_customerPrice_off: url(../image_v3/component/icoB_customerPrice.svg) no-repeat center; --ico_monthPurchase_on: url(../image_v3/component/icoB_monthPurchase.svg) no-repeat center; --ico_monthPurchase_off: url(../image_v3/component/icoB_monthPurchase.svg) no-repeat center; --ico_basketCheck_on: url(../image_v3/component/icoB_basketCheck.svg) no-repeat center; --ico_basketCheck_off: url(../image_v3/component/icoB_basketCheck.svg) no-repeat center; --ico_monthCheck_on: url(../image_v3/component/icoB_monthCheck.svg) no-repeat center; --ico_monthCheck_off: url(../image_v3/component/icoB_monthCheck.svg) no-repeat center; --ico_visitNumber: url(../image_v3/component/icoB_visitNumber.svg) no-repeat center; --ico_prodInquiry: url(../image_v3/component/icoB_prodInquiry.svg) no-repeat center; --ico_basketNumber: url(../image_v3/component/icoB_basketNumber.svg) no-repeat center; --ico_buyFrequency: url(../image_v3/component/icoB_buyFrequency.svg) no-repeat center; --ico_unitPrice: url(../image_v3/component/icoB_unitPrice.svg) no-repeat center; --ico_dataMonitor: url(../image_v3/etc/icoB_dataMonitor.svg) no-repeat center; --ico_provide: url(../image_v3/component/icoB_provide.svg) no-repeat center; --ico_data: url(../image_v3/etc/icoB_data.svg) no-repeat center; --ico_monitor: url(../image_v3/etc/icoB_monitor.svg) no-repeat center; --ico_calendarChart: url(../image_v3/etc/icoB_calendarChart.svg) no-repeat center; --ico_dataCalendar: url(../image_v3/etc/icoB_dataCalendar.svg) no-repeat center; --ico_calendarMonth: url(../image_v3/etc/icoB_calendarMonth.svg) no-repeat center; --ico_calendarDay: url(../image_v3/etc/icoB_calendarDay.svg) no-repeat center; --ico_prepare: url(../image_v3/etc/icoB_prepare.svg) no-repeat center; --ico_write_off: url(../image_v3/component/icoB_write_off.svg) no-repeat center; --ico_analysis: url(../image_v3/component/icoB_analysis.svg) no-repeat center; --ico_script: url(../image_v3/component/icoB_script.svg) no-repeat center; --img_myReport: url(../image_v3/etc/img_myReportB.png) no-repeat center; --ico_ai: url(../image_v3/component/icoB_ai.svg) no-repeat center; } .typeC { --logo_tune: url(../image_v3/logo/logo_tune720.svg) no-repeat center; --logo_isend: url(../image_v3/logo/logo_isend.svg) no-repeat center; --logo_mobon: url(../image_v3/logo/logo_mobon.svg) no-repeat center; --logo_mobwith: url(../image_v3/logo/logo_mobwith.svg) no-repeat center; --logo_items: url(../image_v3/logo/logo_items.svg) no-repeat center; --logo_mobi: url(../image_v3/logo/logo_mobi.svg) no-repeat center; --logo_kakaoPM: url(../image_v3/logo/logo_kakaoPersonalMessage.png) no-repeat center; --logo_makeTApp: url(../image_v3/logo/logo_makeTApp.png) no-repeat center; --logo_ADHub: url(../image_v3/logo/logo_ADHub.png) no-repeat center; --logo_criteo2: url(../image_v3/logo/logo_criteo.png) no-repeat center; --logo_googleAds: url(../image_v3/logo/logo_googleAds.png) no-repeat center; --header_ai: url(../image_v3/menu/ico_ai.svg) no-repeat center; --nav_reportPlus_on: url(../image_v3/menu/ico_reportPlus_on.svg) no-repeat center; --nav_reportPlus_off: url(../image_v3/menu/ico_reportPlus_off.svg) no-repeat center; --ico_widget: url(../image_v3/component/ico_widget.svg) no-repeat center; --ico_widgetAdd2: url(../image_v3/component/ico_widgetAdd2.svg) no-repeat center; --ico_checkbox_on: url(../image_v3/component/ico_checkbox_on.svg) no-repeat center; --ico_checkbox_off: url(../image_v3/component/ico_checkbox_off.svg) no-repeat center; --ico_checkbox_disabled: url(../image_v3/component/ico_checkbox_disabled.svg) no-repeat center; --ico_radio_on: url(../image_v3/component/ico_radio_on.svg) no-repeat center; --ico_radio_off: url(../image_v3/component/ico_radio_off.svg) no-repeat center; --ico_radio_disabled: url(../image_v3/component/ico_radio_disabled.svg) no-repeat center; --ico_select: url(../image_v3/component/ico_select.svg) no-repeat center; --ico_searchBox: url(../image_v3/component/ico_searchBox.svg) no-repeat center; --ico_paperAirplain: url(../image_v3/component/ico_paperAirplain_blue.svg) no-repeat center; --ico_send_on: url(../image_v3/component/ico_send_on.svg) no-repeat center; --ico_send_off: url(../image_v3/component/ico_send_off.svg) no-repeat center; --ico_noty_on: url(../image_v3/component/ico_noty_on.svg) no-repeat center; --ico_noty_off: url(../image_v3/component/ico_noty_off.svg) no-repeat center; --ico_i: url(../image_v3/component/ico_i.svg) no-repeat center; --ico_i_wht: url(../image_v3/component/ico_i_wht.svg) no-repeat center; --ico_sign: url(../image_v3/component/ico_sign.svg) no-repeat center; --ico_check: url(../image_v3/component/ico_check.svg) no-repeat center; --ico_siteNotFound: url(../image_v3/component/ico_siteNotFound.svg) no-repeat center; --ico_inflow: url(../image_v3/component/ico_inflow.svg) no-repeat center; --ico_inflowMoney: url(../image_v3/component/ico_inflowMoney.svg) no-repeat center; --ico_arrowRightS: url(../image_v3/component/ico_arrowRightS.svg) no-repeat center; --ico_arrowRightS_t2: url(../image_v3/component/ico_arrowRightS_gry.svg) no-repeat center; --ico_star_on: url(../image_v3/component/ico_star_on.svg) no-repeat center; --ico_star_off: url(../image_v3/component/ico_star_off.svg) no-repeat center; --ico_arrowRight: url(../image_v3/component/ico_arrowRight.svg) no-repeat center; --ico_purchaseRate_on: url(../image_v3/component/ico_purchaseRate_on.svg) no-repeat center; --ico_purchaseRate_off: url(../image_v3/component/ico_purchaseRate_off.svg) no-repeat center; --ico_leaveRate_on: url(../image_v3/component/ico_leaveRate_on.svg) no-repeat center; --ico_leaveRate_off: url(../image_v3/component/ico_leaveRate_off.svg) no-repeat center; --ico_visitCount_on: url(../image_v3/component/ico_visitCount_on.svg) no-repeat center; --ico_visitCount_off: url(../image_v3/component/ico_visitCount_off.svg) no-repeat center; --ico_basketSearch_on: url(../image_v3/component/ico_basketSearch_on.svg) no-repeat center; --ico_basketSearch_off: url(../image_v3/component/ico_basketSearch_off.svg) no-repeat center; --ico_basketPlus_on: url(../image_v3/component/ico_basketPlus_on.svg) no-repeat center; --ico_basketPlus_off: url(../image_v3/component/ico_basketPlus_off.svg) no-repeat center; --ico_customerPrice_on: url(../image_v3/component/ico_customerPrice_on.svg) no-repeat center; --ico_customerPrice_off: url(../image_v3/component/ico_customerPrice_off.svg) no-repeat center; --ico_monthPurchase_on: url(../image_v3/component/ico_monthPurchase_on.svg) no-repeat center; --ico_monthPurchase_off: url(../image_v3/component/ico_monthPurchase_off.svg) no-repeat center; --ico_basketCheck_on: url(../image_v3/component/ico_basketCheck_on.svg) no-repeat center; --ico_basketCheck_off: url(../image_v3/component/ico_basketCheck_off.svg) no-repeat center; --ico_monthCheck_on: url(../image_v3/component/ico_monthCheck_on.svg) no-repeat center; --ico_monthCheck_off: url(../image_v3/component/ico_monthCheck_off.svg) no-repeat center; --ico_visitNumber: url(../image_v3/component/ico_visitNumber.svg) no-repeat center; --ico_prodInquiry: url(../image_v3/component/ico_prodInquiry.svg) no-repeat center; --ico_basketNumber: url(../image_v3/component/ico_basketNumber.svg) no-repeat center; --ico_buyFrequency: url(../image_v3/component/ico_buyFrequency.svg) no-repeat center; --ico_unitPrice: url(../image_v3/component/ico_unitPrice.svg) no-repeat center; --ico_dataMonitor: url(../image_v3/etc/ico_dataMonitor.svg) no-repeat center; --ico_provide: url(../image_v3/component/ico_provide.svg) no-repeat center; --ico_data: url(../image_v3/etc/ico_data.svg) no-repeat center; --ico_monitor: url(../image_v3/etc/ico_monitor.svg) no-repeat center; --ico_calendarChart: url(../image_v3/etc/ico_calendarChart.svg) no-repeat center; --ico_dataCalendar: url(../image_v3/etc/ico_dataCalendar.svg) no-repeat center; --ico_calendarMonth: url(../image_v3/etc/ico_calendarMonth.svg) no-repeat center; --ico_calendarDay: url(../image_v3/etc/ico_calendarDay.svg) no-repeat center; --ico_prepare: url(../image_v3/etc/ico_prepare.svg) no-repeat center; --ico_write_off: url(../image_v3/component/ico_write_off.svg) no-repeat center; --ico_analysis: url(../image_v3/component/ico_analysis.svg) no-repeat center; --ico_script: url(../image_v3/component/ico_script.svg) no-repeat center; --img_myReport: url(../image_v3/etc/img_myReportC.png) no-repeat center; --ico_ai: url(../image_v3/component/ico_ai.svg) no-repeat center; } /* File : mixin.scss Date : 2025.01.20 */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* File : layout.scss Date : 2025.01.21 */ html { min-height: -webkit-fill-available; color: var(--fontColor); } html.themeB ::-webkit-scrollbar, html.themeC ::-webkit-scrollbar { width: 10px; } html.themeB ::-webkit-scrollbar-thumb, html.themeC ::-webkit-scrollbar-thumb { border-radius: 10px; background-color: var(--mainColor); } html.themeB .container ::-webkit-scrollbar, html.themeC .container ::-webkit-scrollbar { width: 10px; } html.themeB .container ::-webkit-scrollbar-thumb, html.themeC .container ::-webkit-scrollbar-thumb { border-radius: 5px; } .wrap { position: relative; width: 100%; min-width: 1900px; color: var(--ftColor); background-color: var(--bgColor); } .header { position: relative; width: 100%; height: 70px; padding: 0 30px 0 22px; border-bottom: 1px solid var(--headerBorderColor); background-color: var(--headerBgColor); z-index: 20; } .header:after { display: block; content: ""; width: 100%; clear: both; } .header h1 { display: block; float: left; margin: 18px 0 0 0; } .header h1 a { text-indent: -999999px; font-size: 0; background: var(--logo_tune); display: block; width: 200px; height: 28px; background-position: center left; background-size: contain; } .header .mainNav { position: relative; display: block; height: 100%; float: left; margin: 0px 0 0 40px; } .header .mainNav ul { font-size: 0; height: 100%; } .header .mainNav ul li { display: inline-block; vertical-align: middle; height: -webkit-fill-available; margin-left: 30px; } .header .mainNav ul li:first-child { margin-left: 0; } .header .mainNav ul li:hover a, .header .mainNav ul li.on a { position: relative; color: var(--pointColor); } .header .mainNav ul li.aiStudio a { position: relative; padding-left: 38px; } .header .mainNav ul li.aiStudio a:before { content: ""; position: absolute; display: inline-block; background-position: 0px 0px; font-size: 0; font-style: normal; background: var(--ico_ai); left: 5px; margin-top: -3px; width: 27px; height: 25px; } .header .mainNav ul li a { font-family: "NotoSansB"; transition: all 0.2s ease-in-out; display: block; height: -webkit-fill-available; padding: 26px 12px 0; font-size: 18px; color: var(--headerFtColor); } .header .userinfo { float: right; position: relative; display: inline-flex; align-items: center; height: 100%; } .header .userinfo > div { display: inline-block; margin-left: 30px; } .header .userinfo .store a { font-family: "NotoSansB"; position: relative; top: -1px; font-size: 18px; color: var(--ftColor); } .header .userinfo .store:after { content: ""; position: relative; display: inline-block; width: 1px; height: 20px; top: 2px; padding-left: 26px; border-right: 1px solid var(--headerStoreBorderColor); } .header .userinfo .moveMobon button { color: var(--btnMain_ftColor4); border: var(--btnMain_border4); box-shadow: var(--btnMain_shadow4); background-color: var(--btnMain_bgColor4); font-family: "NotoSansM"; font-weight: normal; width: 140px; height: 36px; border-radius: 18px; } .header .userinfo .name { display: inline-flex; align-items: center; justify-content: center; color: var(--pointColor); } .header .userinfo .name strong { font-family: "NotoSansB"; display: -webkit-box; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: normal; word-break: break-all; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 120px; margin-right: 5px; line-height: 1.2; } .header .userinfo .userMenu { position: relative; margin-left: 30px; } .header .userinfo .userMenu .btns { display: inline-block; position: relative; width: 35px; height: 20px; text-align: left; } .header .userinfo .userMenu .btns span { text-indent: -999999px; font-size: 0; } .header .userinfo .userMenu .btns i { mask: url("../image_v3/component/ico_userInfo.svg") no-repeat right; background: var(--ico_userInfo); position: relative; display: inline-block; width: 35px; height: 20px; background-size: cover; background-size: 50px 50px; background-position-x: -15px; } .header .userinfo .userMenu ul { display: none; position: absolute; top: 30px; right: 0; width: 130px; border: 1px solid var(--borderColor); border-radius: 5px; background-color: var(--headerUserBgColor); z-index: 801; } .header .userinfo .userMenu ul li button { font-family: "NotoSansR"; width: 100%; padding: 10px; text-align: left; color: var(--ftColor6); transition: all 0.2s ease-in-out; } .header .userinfo .userMenu ul li button:hover { color: var(--pointColor); } .header .userinfo .theme { position: relative; } .header .userinfo .theme input[type="checkbox"] { font-family: "NotoSansR"; position: relative; display: inline-block; -webkit-appearance: none; width: 54px; height: 26px; font-size: 13px; border-radius: 50px; border: 1px solid var(--ipToggleBorder_off); background-color: var(--ipToggleBg_off); -webkit-transition: all .3s ease; transition: all .3s ease; cursor: pointer; /* on dot */ /* on bg */ } .header .userinfo .theme input[type="checkbox"]::before { content: 'OFF'; position: absolute; right: 13px; color: var(--ipToggleFt_off); transform: translateY(-50%); top: 50%; } .header .userinfo .theme input[type="checkbox"]::after { content: ''; display: inline-block; width: 20px; height: 20px; border-radius: 50px; position: absolute; top: 50%; left: 3px; margin-top: -10px; -webkit-transition: all .3s ease; transition: all .3s ease; background-color: var(--ipToggleDot_on); } .header .userinfo .theme input[type="checkbox"]:checked { -webkit-transition: all .3s ease; transition: all .3s ease; border: 1px solid var(--ipToggleBorder_on); background-color: var(--ipToggleBg_on); } .header .userinfo .theme input[type="checkbox"]:checked::before { content: 'ON'; right: auto; left: 20px; color: var(--ftColor4); } .header .userinfo .theme input[type="checkbox"]:checked::after { left: 46px; -webkit-transition: all .3s ease; transition: all .3s ease; background-color: var(--ipToggleDot_on); } .header .userinfo .theme input[type="checkbox"]:disabled { -webkit-transition: all .3s ease; transition: all .3s ease; border: 1px solid var(--ipToggleBorder_disabled); background-color: var(--ipToggleBg_disabled); cursor: default; } .header .userinfo .theme input[type="checkbox"]:disabled::before { content: 'ON'; right: auto; left: 20px; color: var(--ipToggleFt_disabled); } .header .userinfo .theme input[type="checkbox"]:disabled::after { left: 46px; -webkit-transition: all .3s ease; transition: all .3s ease; background-color: var(--ipToggleDot_disabled); } .header .userinfo .theme input[type="checkbox"] + label { position: absolute; display: inline-block; width: 54px; height: 26px; } .header .userinfo .theme input[type="checkbox"] + label:before { background: none; } .header .userinfo .theme input[type="checkbox"] { border: 1px solid var(--B_mainColor); background-color: #000000; } .header .userinfo .theme input[type="checkbox"]:before { content: ""; position: relative; display: inline-block; background-position: 0px 0px; font-size: 0; font-style: normal; background: url("../image_v3/component/ico_blue.svg") no-repeat center; width: 11px; height: 11px; background-size: 100%; position: absolute; right: 9px; content: ""; } .header .userinfo .theme input[type="checkbox"]:after { background-color: var(--B_mainColor); } .header .userinfo .theme input[type="checkbox"]:checked { border: 1px solid #e5e5e5; background-color: #f6f6f6; } .header .userinfo .theme input[type="checkbox"]:checked:before { content: ""; position: relative; display: inline-block; background-position: 0px 0px; font-size: 0; font-style: normal; background: url("../image_v3/component/ico_white.svg") no-repeat center; width: 16px; height: 16px; background-size: 100%; position: absolute; left: 6px; content: ""; } .header .userinfo .theme input[type="checkbox"]:checked:after { left: 30px; background-color: var(--C_mainColor); } .header .userinfo .theme input[type="checkbox"] + label { left: 0; } .navigation { width: 250px; min-height: calc(100% - 70px); position: absolute; top: 70px; left: 0; background-color: var(--navBgColor); box-shadow: 3.5px 3.5px 5px 0 rgba(0, 0, 0, 0.1); z-index: 100; } .navigation .authTitle { width: 100%; height: 55px; position: relative; padding: 18px 0 0 20px; border-bottom: 1px solid var(--navBorderColor); } .navigation .authTitle h2, .navigation .authTitle h4 { font-family: "NotoSansM"; font-weight: normal; font-size: 20px; color: var(--ftColor); } .navigation .authTitle .hamburger { position: absolute; top: 50%; right: 20px; width: 20px; height: 20px; margin: -10px 0 0 0; cursor: pointer; } .navigation .authTitle .hamburger > div { width: 20px; height: 2px; border-radius: 1px; background: var(--ftColor); transition: 0.3s; } .navigation .authTitle .hamburger > div:nth-of-type(1) { transform: translateY(9px) rotate(45deg); } .navigation .authTitle .hamburger > div:nth-of-type(2) { opacity: 0; } .navigation .authTitle .hamburger > div:nth-of-type(3) { transform: translateY(5px) rotate(-45deg); } .navigation > ul { display: block; width: 100%; height: calc(100% - 55px); } .navigation > ul > li { border-bottom: 1px solid var(--navBorderColor); } .navigation > ul > li > a { transition: all 0.2s ease-in-out; position: relative; display: block; width: 100%; padding: 19px 20px 19px 20px; color: var(--navFtColor); background-color: var(--navBgColor); } .navigation > ul > li > a i, .navigation > ul > li > a span { display: inline-block; vertical-align: middle; transition: all 0.2s ease-in-out; } .navigation > ul > li > a span { font-size: 16px; color: var(--ftColor); } .navigation > ul > li > a i { width: 24px; height: 24px; margin: 0 7px 0 0; background-position: center center; background-size: 100% 100%; background-repeat: no-repeat; /* 데이터 매니저 - 데이터 통계 */ } .navigation > ul > li > a i.vip { mask: url("../image_v3/menu/ico_vip.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.prospectiveCustomer { mask: url("../image_v3/menu/ico_prospectiveCustomer.svg") no-repeat center; background: var(--ico_navColor_off); background-size: 20px 20px; } .navigation > ul > li > a i.refundCustomer { mask: url("../image_v3/menu/ico_refundCustomer.svg") no-repeat center; background: var(--ico_navColor_off); background-size: 20px 20px; } .navigation > ul > li > a i.riskCustomer { mask: url("../image_v3/menu/ico_riskCustomer.svg") no-repeat center; background: var(--ico_navColor_off); background-size: 20px 20px; } .navigation > ul > li > a i.repurchaseCustomer { mask: url("../image_v3/menu/ico_repurchaseCustomer.svg") no-repeat center; background: var(--ico_navColor_off); background-size: 20px 20px; } .navigation > ul > li > a i.coverage, .navigation > ul > li > a i.fraudSet { mask: url("../image_v3/menu/ico_coverage.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.salesForecst { mask: url("../image_v3/menu/ico_salesForecst.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.categoryAnalysis { mask: url("../image_v3/menu/ico_category.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.prodAnalysis { mask: url("../image_v3/menu/ico_product.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.recommendProdList { mask: url("../image_v3/menu/ico_productList.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.recommendEngine { mask: url("../image_v3/menu/ico_engine.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.tracking { mask: url("../image_v3/menu/ico_graph.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.dashboard { mask: url("../image_v3/menu/ico_dashboard.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.userInfo, .navigation > ul > li > a i.newCustomer { mask: url("../image_v3/menu/ico_userInfo.svg") no-repeat center; background: var(--ico_navColor_off); background-size: 20px 20px; } .navigation > ul > li > a i.coreUserAnalysis { mask: url("../image_v3/menu/ico_coreUserAnalysis.svg") no-repeat center; background: var(--ico_navColor_off); background-size: 20px 20px; } .navigation > ul > li > a i.campaignList { mask: url("../image_v3/menu/ico_campaignList.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.campaignCreate { mask: url("../image_v3/menu/ico_campaignCreate.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.refundAnalysis { mask: url("../image_v3/menu/ico_refundAnalysis.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.notice { mask: url("../image_v3/menu/ico_notice.svg") no-repeat center; background: var(--ico_navColor_off); background-size: 19px 17px; } .navigation > ul > li > a i.dataLink, .navigation > ul > li > a i.tagSet, .navigation > ul > li > a i.trackingLink { mask: url("../image_v3/menu/ico_dataLink.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.rfmAnalysis { mask: url("../image_v3/menu/ico_rfmAnalysis.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.userValueAnalysis { mask: url("../image_v3/menu/ico_userValueAnalysis.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.businessAnalysis { mask: url("../image_v3/menu/ico_businessAnalysis.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.userActivity { mask: url("../image_v3/menu/ico_userActivity.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.customerAnalysis { mask: url("../image_v3/menu/ico_customerAnalysis.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.riskAnalysis { mask: url("../image_v3/menu/ico_riskAnalysis.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.rankAnalysis { mask: url("../image_v3/menu/ico_rank.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.productTrend { mask: url("../image_v3/menu/ico_productTrend.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.keywordAnalysis { mask: url("../image_v3/menu/ico_keywordAnalysis.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.mediaAnalysis { mask: url("../image_v3/menu/ico_mediaAnalysis.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.opinionAnalysis, .navigation > ul > li > a i.purchaseAnalysis { mask: url("../image_v3/menu/ico_opinionAnalysis.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.keywordStats, .navigation > ul > li > a i.dataSet { mask: url("../image_v3/menu/ico_stats.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.keywordProposal { mask: url("../image_v3/menu/ico_proposal.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.keywordManage { mask: url("../image_v3/menu/ico_manage.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.report { mask: url("../image_v3/menu/ico_report.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.createURL { mask: url("../image_v3/menu/ico_createURL.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.reportAD { mask: url("../image_v3/menu/ico_reportAD.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.setting { mask: url("../image_v3/menu/ico_setting.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.dataCollect { mask: url("../image_v3/menu/ico_folderPlus.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.dataProvide, .navigation > ul > li > a i.adTrend { mask: url("../image_v3/menu/ico_dataSet.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.dataMonitor, .navigation > ul > li > a i.adTracking, .navigation > ul > li > a i.mydata { mask: url("../image_v3/menu/ico_dataMonitor.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.dataStats { mask: url("../image_v3/menu/ico_dataStats.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.scriptSDK { mask: url("../image_v3/menu/ico_scriptSDK.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.fraudReport { background: var(--nav_reportPlus_off); } .navigation > ul > li > a i.fraudDetail { mask: url("../image_v3/menu/ico_chartDetail.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.purchaseChange { mask: url("../image_v3/menu/ico_userSearch.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.siteAnalysis { mask: url("../image_v3/menu/ico_site.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.home { mask: url("../image_v3/menu/ico_home.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.message { mask: url("../image_v3/menu/ico_message.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.ai { mask: url("../image_v3/menu/ico_ai.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > a i.storage { mask: url("../image_v3/menu/ico_storage.svg") no-repeat center; background: var(--ico_navColor_off); } .navigation > ul > li > ul { display: none; width: 100%; background-color: var(--navBgColor3); } .navigation > ul > li > ul.active { display: block; } .navigation > ul > li > ul li a { display: block; padding: 18px 0 18px 50px; font-size: 14px; color: var(--navFtColor2); transition: all 0.2s ease-in-out; } .navigation > ul > li > ul li a:hover { color: var(--pointColor); } .navigation > ul > li > ul li.on a { color: var(--pointColor); } .navigation > ul > li.has-list > a:before { content: ""; position: absolute; display: block; width: 10px; height: 6px; background-size: 100% 100%; top: 50%; right: 20px; } .navigation > ul > li.active > a { box-shadow: var(--navShadow); background-color: var(--navBgColor2); overflow: hidden; } .navigation > ul > li.active > a::before { position: absolute; content: ''; top: -105px; left: 0%; width: 100%; height: 120px; background: radial-gradient(ellipse farthest-corner at, var(--mainColor) 0%, var(--mainColor) 50%, rgba(28, 190, 248, 0) 70%, rgba(7, 170, 255, 0) 100%); opacity: 0.16; } .navigation > ul > li.active > a::after { position: absolute; content: ''; top: 0px; left: 0; width: 100%; height: 1px; background: linear-gradient(to right, rgba(7, 170, 255, 0) 0%, #07aaff 50%, rgba(7, 170, 255, 0) 100%); } .navigation > ul > li.active > a span { color: var(--navOnFtColor); } .navigation > ul > li.active > a i { /* 데이터 매니저 - 데이터 통계 */ } .navigation > ul > li.active > a i.vip { mask: url("../image_v3/menu/ico_vip.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.prospectiveCustomer { mask: url("../image_v3/menu/ico_prospectiveCustomer.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.refundCustomer { mask: url("../image_v3/menu/ico_refundCustomer.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.riskCustomer { mask: url("../image_v3/menu/ico_riskCustomer.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.repurchaseCustomer { mask: url("../image_v3/menu/ico_repurchaseCustomer.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.coverage, .navigation > ul > li.active > a i.fraudSet { mask: url("../image_v3/menu/ico_coverage.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.salesForecst { mask: url("../image_v3/menu/ico_salesForecst.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.categoryAnalysis { mask: url("../image_v3/menu/ico_category.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.prodAnalysis { mask: url("../image_v3/menu/ico_product.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.recommendProdList { mask: url("../image_v3/menu/ico_productList.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.recommendEngine { mask: url("../image_v3/menu/ico_engine.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.tracking { mask: url("../image_v3/menu/ico_graph.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.dashboard { mask: url("../image_v3/menu/ico_dashboard.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.dashboard { mask: url("../image_v3/menu/ico_dashboard.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.userInfo, .navigation > ul > li.active > a i.newCustomer { mask: url("../image_v3/menu/ico_userInfo.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.coreUserAnalysis { mask: url("../image_v3/menu/ico_coreUserAnalysis.svg") no-repeat center; background: var(--ico_navColor_on); background-size: 20px 20px; } .navigation > ul > li.active > a i.campaignList { mask: url("../image_v3/menu/ico_campaignList.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.campaignCreate { mask: url("../image_v3/menu/ico_campaignCreate.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.refundAnalysis { mask: url("../image_v3/menu/ico_refundAnalysis.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.notice { mask: url("../image_v3/menu/ico_notice.svg") no-repeat center; background: var(--ico_navColor_on); background-size: 19px 17px; } .navigation > ul > li.active > a i.dataLink, .navigation > ul > li.active > a i.tagSet, .navigation > ul > li.active > a i.trackingLink { mask: url("../image_v3/menu/ico_dataLink.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.rfmAnalysis { mask: url("../image_v3/menu/ico_rfmAnalysis.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.userValueAnalysis { mask: url("../image_v3/menu/ico_userValueAnalysis.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.businessAnalysis { mask: url("../image_v3/menu/ico_businessAnalysis.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.userActivity { mask: url("../image_v3/menu/ico_userActivity.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.customerAnalysis { mask: url("../image_v3/menu/ico_customerAnalysis.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.riskAnalysis { mask: url("../image_v3/menu/ico_riskAnalysis.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.rankAnalysis { mask: url("../image_v3/menu/ico_rank.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.productTrend { mask: url("../image_v3/menu/ico_productTrend.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.keywordAnalysis { mask: url("../image_v3/menu/ico_keywordAnalysis.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.mediaAnalysis { mask: url("../image_v3/menu/ico_mediaAnalysis.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.opinionAnalysis, .navigation > ul > li.active > a i.purchaseAnalysis { mask: url("../image_v3/menu/ico_opinionAnalysis.svg") no-repeat center; background: var(--ico_navColor_on); background-size: 20px 20px; } .navigation > ul > li.active > a i.keywordStats, .navigation > ul > li.active > a i.dataSet { mask: url("../image_v3/menu/ico_stats.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.keywordProposal { mask: url("../image_v3/menu/ico_proposal.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.keywordManage { mask: url("../image_v3/menu/ico_manage.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.report { mask: url("../image_v3/menu/ico_report.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.createURL { mask: url("../image_v3/menu/ico_createURL.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.reportAD { mask: url("../image_v3/menu/ico_reportAD.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.setting { mask: url("../image_v3/menu/ico_setting.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.dataMonitoring { mask: url("../image_v3/menu/ico_dataSet.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.dataCollect { mask: url("../image_v3/menu/ico_folderPlus.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.dataProvide, .navigation > ul > li.active > a i.adTrend { mask: url("../image_v3/menu/ico_dataSet.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.dataMonitor, .navigation > ul > li.active > a i.adTracking, .navigation > ul > li.active > a i.mydata { mask: url("../image_v3/menu/ico_dataMonitor.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.dataStats { mask: url("../image_v3/menu/ico_dataStats.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.scriptSDK { mask: url("../image_v3/menu/ico_scriptSDK.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.fraudReport { background: var(--nav_reportPlus_on); } .navigation > ul > li.active > a i.fraudDetail { mask: url("../image_v3/menu/ico_chartDetail.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.purchaseChange { mask: url("../image_v3/menu/ico_userSearch.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.siteAnalysis { mask: url("../image_v3/menu/ico_site.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.home { mask: url("../image_v3/menu/ico_home.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.message { mask: url("../image_v3/menu/ico_message.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.ai { mask: url("../image_v3/menu/ico_ai.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a i.storage { mask: url("../image_v3/menu/ico_storage.svg") no-repeat center; background: var(--ico_navColor_on); } .navigation > ul > li.active > a:before { filter: brightness(100); } .navigation.closed .authTitle { padding: 0; width: 70px; height: 70px; } .navigation.closed .authTitle h2 { display: none; } .navigation.closed .authTitle .hamburger { right: 24px; margin: -10px 0 0 0; } .navigation.closed .authTitle .hamburger > div:nth-of-type(1) { transform: translateY(0) rotate(0deg); } .navigation.closed .authTitle .hamburger > div:nth-of-type(2) { opacity: 1; transform: translateY(5px); } .navigation.closed .authTitle .hamburger > div:nth-of-type(3) { transform: translateY(10px) rotate(0deg); } .navigation.closed > ul > li { position: relative; } .navigation.closed > ul > li > a { width: 70px; height: 60px; text-align: center; } .navigation.closed > ul > li > a span { display: none; } .navigation.closed > ul > li > a i { margin: 0; width: 20px; height: 20px; } .navigation.closed > ul > li > a:before { display: none; } .navigation.closed > ul > li > ul { position: absolute; display: none; top: 0; left: 75px; z-index: 10; width: 200px; box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1); border-radius: 5px; border: 1px solid var(--navCloseBorderColor); background: var(--navCloseBgColor); } .navigation.closed > ul > li > ul li a { padding: 13px; } .container { width: calc(100% - 250px); min-height: 1000px; margin: 0 0 45px 250px; padding: 30px; position: relative; transition: all 0.2s ease-in-out; } .container:after { display: block; content: ""; width: 100%; clear: both; } .container.wide-view { width: calc(100% - 70px); margin-left: 70px; } .footer { width: 100%; text-align: center; margin: 45px 0 0 0; } .footer p { font-size: 13px; color: #9e9bb6; line-height: 150%; } .footer p span { position: relative; padding: 0 10px; } .footer p span:before { display: block; content: ""; width: 1px; height: 10px; background: var(--subFtColor); position: absolute; top: 4px; left: 0; } .footer p span:first-child:before { display: none; } /* File : content.scss Date : 2025.01.22 */ ::selection { color: var(--ftColor); background: var(--pointColor); } .hide { text-indent: -999999px; font-size: 0; } .hidden { position: fixed; top: 0; left: -999em; } .clear { clear: both; } .disNone, .dis_none { display: none !important; } .ft_r { float: right; } .ft_l { float: left; } .pointColor { color: var(--pointColor); } .elHvrVsbl:hover, .elHvrVsbl2:hover, .elHvrVsbl3:hover, .elHvrVsbl4:hover { white-space: normal !important; overflow: visible !important; word-break: break-all !important; } .elHvrVsbl { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .elHvrVsbl2 { display: -webkit-box; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: normal; word-break: break-all; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .elHvrVsbl4 { display: -webkit-box; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: normal; word-break: break-all; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } #loadingBg { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: var(--dimShadow); z-index: 9999; } #loadingBg.complete { display: none; opacity: 0; z-index: -999; } #loadingBg .loader { --cell-size: 24px; --cell-spacing: 1px; --border-width: 1px; --cells: 4; --total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing))); position: relative; display: flex; flex-wrap: wrap; width: var(--total-size); height: var(--total-size); top: 50%; left: 50%; transform: translate(-50%, -50%); } #loadingBg .loader > .cell { --cell-color: white; flex: 0 0 var(--cell-size); margin: var(--cell-spacing); background-color: transparent; box-sizing: border-box; border: var(--border-width) solid var(--cell-color); animation: 1.5s ripple ease infinite; } #loadingBg .loader > .cell.d-1 { animation-delay: 100ms; } #loadingBg .loader > .cell.d-2 { animation-delay: 200ms; } #loadingBg .loader > .cell.d-3 { animation-delay: 300ms; } #loadingBg .loader > .cell.d-4 { animation-delay: 400ms; } #loadingBg .loader > .cell.d-5 { animation-delay: 500ms; } #loadingBg .loader > .cell.d-6 { animation-delay: 600ms; } #loadingBg .loader > .cell:nth-child(1) { --cell-color: #6ef0ff; } #loadingBg .loader > .cell:nth-child(2) { --cell-color: #0fa5be; } #loadingBg .loader > .cell:nth-child(3) { --cell-color: #06697b; } #loadingBg .loader > .cell:nth-child(4) { --cell-color: #3f0684; } #loadingBg .loader > .cell:nth-child(5) { --cell-color: #0fa5be; } #loadingBg .loader > .cell:nth-child(6) { --cell-color: #06697b; } #loadingBg .loader > .cell:nth-child(7) { --cell-color: #3f0684; } #loadingBg .loader > .cell:nth-child(8) { --cell-color: #7f1eed; } #loadingBg .loader > .cell:nth-child(9) { --cell-color: #06697b; } #loadingBg .loader > .cell:nth-child(10) { --cell-color: #3f0684; } #loadingBg .loader > .cell:nth-child(11) { --cell-color: #7f1eed; } #loadingBg .loader > .cell:nth-child(12) { --cell-color: #ac64ff; } #loadingBg .loader > .cell:nth-child(13) { --cell-color: #3f0684; } #loadingBg .loader > .cell:nth-child(14) { --cell-color: #7f1eed; } #loadingBg .loader > .cell:nth-child(15) { --cell-color: #ac64ff; } #loadingBg .loader > .cell:nth-child(16) { --cell-color: #e0c4ff; } @keyframes ripple { 0% { background-color: transparent; } 30% { background-color: var(--cell-color); } 60% { background-color: transparent; } 100% { background-color: transparent; } } .dimCircle { position: relative; top: 0; width: auto; z-index: 700; } .dimCircle:before { content: ""; position: relative; display: inline-block; background-position: 0px 0px; font-size: 0; font-style: normal; background: url("../image_v3/loading/icoB_loadingCircle.gif") no-repeat center; background-size: 100px 100px; position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; border-radius: inherit; background-size: 70px 70px; transform: translate(-50%, -50%); background-color: var(--dimBgColor); opacity: var(--dimOpacity); z-index: 700; } .dimDot { position: relative; top: 0; width: auto; z-index: 700; } .dimDot:before { content: ""; position: relative; display: inline-block; background-position: 0px 0px; font-size: 0; font-style: normal; background: url("../image_v3/loading/icoB_loadingDot.gif") no-repeat center; background-size: 44px 44px; position: absolute; background-size: contain; width: 100%; height: 100%; background-size: 44px 44px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--dimBgColor); opacity: var(--dimOpacity); z-index: 700; } .dimText { position: relative; top: 0; width: auto; z-index: 700; } .dimText > p.dText { position: absolute; display: inline-flex; justify-content: center; align-items: center; width: 100%; height: 100%; top: 50%; left: 50%; color: var(--dimFtColor); transform: translate(-50%, -50%); background-color: var(--dimBgColor); opacity: var(--dimOpacity); z-index: 700; } .iBox { position: relative; display: inline-block; } .iMark { content: ""; position: relative; display: inline-block; background-position: 0px 0px; font-size: 0; font-style: normal; background: var(--ico_i); width: 15px; height: 15px; background-size: 15px 15px; } .iMarkHover { font-family: "NotoSansR"; display: none; position: absolute; width: 300px; min-width: 200px; height: auto; min-height: 70px; left: -26px; bottom: 28px; padding: 15px; color: var(--ftColor); font-size: 13px; text-align: left; font-style: normal; line-height: 18px; white-space: normal; border-radius: 20px; border: 1px solid var(--pointColor); background-color: var(--bubbleBgColor); box-shadow: var(--bubbleShadow); cursor: default; z-index: 800; } .iMarkHover:after, .iMarkHover:before { content: ""; position: absolute; width: 0; height: 0; top: 100%; left: 12%; border: solid transparent; pointer-events: none; } .iMarkHover:after { border-color: rgba(255, 255, 255, 0); border-top-color: var(--bubbleBorderColor); border-width: 10px; margin-left: -10px; } .iMarkHover:before { border-color: rgba(133, 183, 78, 0); border-top-color: var(--pointColor); border-width: 11px; margin-left: -11px; } .map .mapHover { font-family: "NotoSansR"; display: none; position: absolute; width: auto; min-width: 250px; height: auto; left: -26px; bottom: 28px; padding: 15px; color: var(--ftColor); font-size: 13px; text-align: left; font-style: normal; line-height: 18px; white-space: normal; border-radius: 10px; border: 1px solid var(--pointColor); background-color: var(--bubbleBgColor); box-shadow: var(--bubbleShadow); cursor: default; z-index: 800; top: 36px; bottom: auto; right: auto; left: -22px; } .map .mapHover:after, .map .mapHover:before { content: ""; position: absolute; width: 0; height: 0; top: 100%; left: 12%; border: solid transparent; pointer-events: none; } .map .mapHover:after { border-color: rgba(255, 255, 255, 0); border-top-color: var(--bubbleBorderColor); border-width: 10px; margin-left: -10px; } .map .mapHover:before { border-color: rgba(133, 183, 78, 0); border-top-color: var(--pointColor); border-width: 11px; margin-left: -11px; } .map .mapHover:after, .map .mapHover:before { left: 36px; right: auto; border-top: none; border-bottom-color: var(--bubbleBorderColor); } .map .mapHover:before { top: -11px; border-bottom-color: var(--pointColor); } .map .mapHover:after { top: -9px; border-width: 10px; margin-left: -10px; } input { display: inline-block; vertical-align: middle; font-family: "NotoSansR"; height: 40px; padding: 6px 10px; font-size: 14px; color: var(--ftColor); border-radius: 5px; box-sizing: border-box; border: 1px solid var(--ipBorderColor); background-color: var(--ipBgColor); } input:disabled, input.disabled { border: 1px solid var(--ipBorderColor_disabled); background: var(--ipBgColor_disabled); } input:focus { outline: none; } input::placeholder { font-size: 14px; color: var(--ipFtColor_placeholder); } textarea { font-family: "NotoSansR"; position: relative; width: 100%; padding: 0 10px 0 0; border-radius: 5px; color: var(--ftColor); box-sizing: border-box; border: 20px solid transparent; background-color: var(--ipBgColor); } textarea:focus { outline: none; } textarea::placeholder, textarea::-webkit-input-placeholder { color: var(--ipFtColor_placeholder); } select { background: var(--ico_select); background-size: 11px 5px; font-family: "NotoSansR"; min-width: 150px; height: 40px; padding: 4px 30px 4px 15px; appearance: none; font-size: 14px; color: var(--ftColor); line-height: 1; border-radius: 5px; border: 1px solid var(--ipBorderColor); box-shadow: none; background-color: var(--ipBgColor); background-position-x: calc(100% - 15px); outline: none; cursor: pointer; } select option { background-color: var(--ipBgColor); } select:disabled { color: var(--ipFtColor_disabled); border: 1px solid var(--ipBorderColor_disabled); background-color: var(--ipBgColor_disabled); opacity: 1; } input[type="checkbox"] { display: none; } input[type="checkbox"] + label { position: relative; display: block; color: var(--ftColor); cursor: pointer; } input[type="checkbox"] + label:before { content: ""; position: relative; display: inline-block; background-position: 0px 0px; font-size: 0; font-style: normal; background: var(--ico_checkbox_off); content: ""; width: 16px; height: 16px; margin-right: 6px; top: -1px; vertical-align: middle; background-size: contain; } input[type="checkbox"]:checked + label:before { content: ""; position: relative; display: inline-block; background-position: 0px 0px; font-size: 0; font-style: normal; background: var(--ico_checkbox_on); width: 16px; height: 16px; vertical-align: middle; background-size: contain; } input[type="checkbox"]:disabled + label:before { content: ""; position: relative; display: inline-block; background-position: 0px 0px; font-size: 0; font-style: normal; background: var(--ico_checkbox_disabled); width: 16px; height: 16px; vertical-align: middle; background-size: contain; cursor: default; } input[type="radio"] { display: none; } input[type="radio"] + label { position: relative; display: inline-block; margin: 0 0 0 30px; cursor: pointer; } input[type="radio"] + label:before { content: ""; position: relative; display: inline-block; background-position: 0px 0px; font-size: 0; font-style: normal; background: var(--ico_radio_off); content: ""; width: 18px; height: 18px; margin-right: 6px; top: -1px; vertical-align: middle; background-size: auto; } input[type="radio"]:first-child + label { margin: 0; } input[type="radio"]:checked + label:before { content: ""; position: relative; display: inline-block; background-position: 0px 0px; font-size: 0; font-style: normal; background: var(--ico_radio_on); width: 18px; height: 18px; vertical-align: middle; background-size: auto; } input[type="radio"]:disabled + label { color: var(--btnDis_ftColor); cursor: default; } input[type="radio"]:disabled + label:before { content: ""; position: relative; display: inline-block; background-position: 0px 0px; font-size: 0; font-style: normal; background: var(--ico_radio_disabled); width: 18px; height: 18px; vertical-align: middle; background-size: auto; } .daterangepicker { padding: 4px 4px 4px 4px; box-shadow: var(--dateShadow); border: 1px solid var(--dateBorderColor); background-color: var(--dateBgColor); right: 65px !important; } .daterangepicker ::-webkit-scrollbar { width: 10px; } .daterangepicker ::selection { color: #ffffff; background-color: var(--mainColor); } .daterangepicker:before, .daterangepicker:after { display: none; } .daterangepicker.show-ranges .drp-calendar.left { padding: 4px; border-left: none; } .daterangepicker.show-ranges .drp-calendar.right { padding: 4px; } .daterangepicker .calendar-table { background-color: transparent; border: 1px solid transparent; } .daterangepicker .calendar-table .prev span, .daterangepicker .calendar-table .next span { border-color: var(--mainColor); } .daterangepicker .calendar-table table thead tr th.available:hover { border: none; background-color: transparent; } .daterangepicker .calendar-table table thead tr:nth-child(1) th { font-family: "NotoSansM"; font-weight: normal; padding: 0px 0 5px 0px; font-weight: normal; font-size: 13px; color: var(--dateFtColor5); } .daterangepicker .calendar-table table thead tr:nth-child(2) th { color: var(--dateFtColor2); border-bottom: none; } .daterangepicker .calendar-table table tbody td { position: relative; height: 26px; color: var(--dateFtColor5); font-size: 12px; border: none; } .daterangepicker .calendar-table table tbody td.off { color: var(--dateFtColor3); background-color: transparent; } .daterangepicker .calendar-table table tbody td:hover { color: var(--dateFtColor4); border-radius: 5px; background-color: var(--mainColor); } .daterangepicker .calendar-table table tbody td.in-range { color: #ffffff; background-color: var(--dateBgColor2); } .daterangepicker .calendar-table table tbody td.in-range:hover { border-radius: 0; background-color: var(--mainColor); } .daterangepicker .calendar-table table tbody td.start-date:hover { border-radius: 4px 0 0 4px; } .daterangepicker .calendar-table table tbody td.active, .daterangepicker .calendar-table table tbody td.end-date { color: var(--dateFtColor6); background-color: var(--mainColor); } .daterangepicker .calendar-table table tbody td.end-date:hover { border-radius: 0 4px 4px 0; } .daterangepicker .calendar-time { text-align: right; } .daterangepicker .calendar-time select.hourselect, .daterangepicker .calendar-time select.minuteselect, .daterangepicker .calendar-time select.ampmselect, .daterangepicker .calendar-time select.secondselect { min-width: 50px; height: 26px; padding: 2px 6px; border: 1px solid var(--dateIpBorderColor); background-color: var(--dateIpBgColor); } .daterangepicker .ranges { padding-left: 6px; overflow-x: hidden !important; } .daterangepicker .ranges ul li { color: var(--dateFtColor5); } .daterangepicker .ranges ul li:hover { color: var(--dateFtColor7); background-color: var(--dateBgColor3); } .daterangepicker .ranges ul li.active { color: var(--dateFtColor6); background-color: var(--mainColor); } .daterangepicker .drp-buttons { border-color: var(--dateBorderColor); } .daterangepicker .drp-buttons button.cancelBtn, .daterangepicker .drp-buttons button.applyBtn { font-family: "NotoSansR"; position: relative; text-align: center; color: var(--dateFtColor7); border: 2px solid var(--mainColor); border-radius: 2px; background-color: var(--mainColor); cursor: pointer; } .daterangepicker.single { width: fit-content; } .daterangepicker.single .ranges { display: none; } .tableArea.tableAreaDataNone { height: auto; border-bottom: none; } .tableArea.tableAreaDataNone .tableDataNone { display: block; height: 100%; min-height: 300px; border: none; } .tableArea.tableAreaDataNone .tableDataNone > div { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; text-align: center; min-height: 300px; } .tableArea.tableAreaDataNone .tableDataNone > div p { display: block; font-size: 14px; line-height: 1.5; } .tableArea.tableAreaDataNone .tableDataNone + .paging { display: none; } .tableArea.tableAreaDataNone .tableBox { display: none; } .tableArea.tableAreaDataNone .paging { display: none; } .tableArea.tableAreaDataNone2 { height: auto; border-bottom: none; } .tableArea.tableAreaDataNone2 .tableDataNone { display: block; height: calc(100% - 40px); min-height: 300px; border: none; } .tableArea.tableAreaDataNone2 .tableDataNone > div { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 300px; text-align: center; } .tableArea.tableAreaDataNone2 .tableDataNone > div p { display: block; font-size: 14px; line-height: 1.5; } .tableArea.tableAreaDataNone2 .tableBox { height: auto !important; overflow: clip; } .tableArea.tableAreaDataNone2 .tableBox tbody, .tableArea.tableAreaDataNone2 .tableBox tfoot { display: none; } .tableArea.tableAreaDataNone2 .paging { display: none; } .tableArea .tableDataNone { display: none; } .dataNone { display: none; } .paging { position: relative; text-align: center; } .paging > ul { margin: 30px auto; text-align: center; } .paging > ul:after { content: ""; display: block; clear: both; } .paging > ul > li { display: inline-block; vertical-align: top; min-width: 18px; height: 18px; margin: 0 2px; line-height: 18px; text-align: center; font-size: 12px; color: var(--subFtColor); background-color: transparent; cursor: pointer; } .paging > ul > li:hover { color: var(--pointColor); } .paging > ul > li > a { display: block; width: 100%; height: 100%; } .paging > ul > li.on { font-family: "NotoSansB"; line-height: 1.4; color: var(--pointColor); } .paging > ul > li.prev-list { background: url("../image_v3/component/ico_pagingPrevList.svg") no-repeat center; } .paging > ul > li.prev { background: url("../image_v3/component/ico_pagingPrev.svg") no-repeat center; } .paging > ul > li.next-list { background: url("../image_v3/component/ico_pagingPrevList.svg") no-repeat center; transform: rotate(180deg); } .paging > ul > li.next { background: url("../image_v3/component/ico_pagingPrev.svg") no-repeat center; transform: rotate(180deg); } .btnArea { margin: 40px 0 0 0; font-size: 0; text-align: center; } .btnArea button { position: relative; min-width: 140px; padding: 0 10px; height: 40px; border-radius: 20px; font-size: 15px; color: var(--btnMain_ftColor); border: 2px solid var(--btnMain_bgColor); background-color: var(--btnMain_bgColor); box-shadow: none; display: inline-block; min-width: 140px; height: 44px; font-size: 15px; margin-left: 12px; } .btnArea button:disabled { color: var(--btnDis_ftColor); border-color: var(--btnDis_BorderColor); background-color: var(--btnDis_bgColor); box-shadow: none; cursor: default; } .btnArea button:first-child { margin-left: 0; } /* File : id_aiJoin.scss Date : 2025.06.24 menu : AI 스튜디오 */ .wrap.tune_aiJoin { min-width: 100%; } .wrap.tune_aiJoin video.bg_video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .wrap.tune_aiJoin header, .wrap.tune_aiJoin .container { max-width: 1024px; margin: 0 auto; } .wrap.tune_aiJoin header.header { height: auto; padding: 30px 20px 20px; background: none; border: none; } .wrap.tune_aiJoin header.header::before { position: absolute; content: ''; bottom: 0px; left: 0%; width: 100%; height: 120px; background: var(--gradient2); opacity: 0.16; z-index: -1; } .wrap.tune_aiJoin header.header::after { position: absolute; content: ''; bottom: 0px; left: 0; width: 100%; height: 1px; background: var(--gradient); } .wrap.tune_aiJoin header h1 { display: flex; flex-direction: initial; justify-content: space-between; align-items: center; gap: 10px; float: none; margin: 0; } .wrap.tune_aiJoin header h1 a { width: 107px; height: 18px; text-indent: -999999px; font-size: 0; background: var(--logo_tune); display: block; width: 200px; height: 28px; background-position: center left; background-size: contain; } .wrap.tune_aiJoin header h1 span { font-family: "NotoSansB"; display: inline-flex; flex-direction: initial; justify-content: space-between; align-items: center; gap: 0; position: relative; padding-left: 28px; font-size: 13px; color: #07e6ff; margin-left: 13px; letter-spacing: -0.3px; line-height: 1.2; } .wrap.tune_aiJoin header h1 span:before { content: ""; position: relative; display: inline-block; background-position: 0px 0px; font-size: 0; font-style: normal; background: var(--ico_ai); position: absolute; left: 0; width: 21px; height: 20px; background-size: contain; vertical-align: middle; } .wrap.tune_aiJoin header p { display: flex; flex-wrap: wrap; flex-direction: initial; justify-content: center; align-items: center; gap: 4px; margin: 20px 0 0 0; font-size: 14px; text-align: center; line-height: 1.2; } .wrap.tune_aiJoin .container { width: 100%; min-height: 100vh; padding: 40px 20px 50px 20px; } .wrap.tune_aiJoin .container .tune_aiJoin.t1 section.sec_complete { display: none; } .wrap.tune_aiJoin .container .tune_aiJoin.t2 section.sec_aiJoin { display: none; } .wrap.tune_aiJoin .container .tune_aiJoin { width: 100%; z-index: 1; } .wrap.tune_aiJoin .container .tune_aiJoin .title { text-indent: -999999px; font-size: 0; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin { position: relative; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li:nth-child(n+2) { margin: 35px 0 0 0; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .tit { display: flex; flex-direction: initial; justify-content: start; align-items: center; gap: 16px; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .tit p:first-child:before { content: ""; position: relative; display: inline-block; background-position: 0px 0px; font-size: 0; font-style: normal; background: var(--ico_ai); margin: 0 5px 0 0; padding: 9px; border: 1px solid var(--pointColor); border-radius: 30px; background-size: 14px 14px; vertical-align: middle; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .tit p:nth-child(1) { color: var(--ftColor14); } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .tit p:nth-child(1) span.star:after { content: "*"; position: relative; display: inline-block; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont { margin: 10px 0 0 0; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont select { height: 42px; border-color: #3c71fd; background-color: rgba(2, 22, 97, 0.8); } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont input[type="text"], .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont input[type="tel"] { height: 42px; border-color: #3c71fd; background-color: rgba(2, 22, 97, 0.8); } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont input[type="text"] { width: 100%; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont textarea { height: 100px; padding: 10px 15px; font-size: 14px; line-height: 26px; border: 1px solid #3c71fd; background-color: rgba(2, 22, 97, 0.8); resize: none; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont input:focus, .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont select:focus, .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont textarea:focus { border-color: #07e6ff; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont button { font-family: "NotoSansR"; position: relative; text-align: center; border-radius: 2px; cursor: pointer; color: #ffffff; min-width: 80px; padding: 10px; font-size: 14px; border-radius: 8px; height: 42px; line-height: 1; background-color: #7f96c4; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont button:disabled { color: var(--btnDis_ftColor); border-color: var(--btnDis_BorderColor); background-color: var(--btnDis_bgColor); box-shadow: none; cursor: default; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont button:focus, .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont button:hover, .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont button.on { background-color: #978eff; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont p.alarm { margin: 10px 0 0 0; font-size: 12px; color: #ff6767; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont .radioBox { margin: 20px 0 0 0; display: flex; flex-wrap: wrap; flex-direction: initial; justify-content: start; align-items: center; gap: 10px 30px; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont .radioBox input[type="radio"] + label:nth-of-type(n+2) { margin: 0; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont .telBox { display: flex; flex-direction: initial; justify-content: start; align-items: center; gap: 10px; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont .telBox input[type="tel"], .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont .telBox input[type="text"] { flex: 3 1 auto; min-width: 70%; width: auto; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont .telBox button { flex: 1 1 80px; min-width: auto; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont .telBox:nth-of-type(2) { margin: 10px 0 0 0; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont .emailBox { display: flex; flex-wrap: wrap; flex-direction: initial; justify-content: start; align-items: center; gap: 10px; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont .emailBox input[type="text"] { flex: 3 1 auto; width: auto; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont .emailBox select { flex: 1 1 120px; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont .emailBox select option:disabled { color: #7f96c4; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_apply .checkBox { margin: 30px 0 0 0; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_apply .checkBox input[type="checkbox"] + label { font-size: 14px; line-height: 22px; padding-left: 30px; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_apply .checkBox input[type="checkbox"] + label:before { position: absolute; width: 20px; height: 20px; top: 2px; left: 0; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_apply .buttonBox { margin: 30px 0 0 0; text-align: center; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_apply .buttonBox button.apply { font-family: "NotoSansR"; position: relative; text-align: center; border-radius: 2px; cursor: pointer; width: calc(100% - 60px); font-size: 18px; color: #ffffff; min-height: 60px; text-align: center; border-radius: 5px; background-color: #7f96c4; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_apply .buttonBox button.apply:disabled { color: var(--btnDis_ftColor); border-color: var(--btnDis_BorderColor); background-color: var(--btnDis_bgColor); box-shadow: none; cursor: default; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_apply .buttonBox button:focus, .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_apply .buttonBox button:hover, .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_apply .buttonBox button.on { background-color: #978eff; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_complete .box_complete .tit { display: flex; flex-direction: initial; justify-content: start; align-items: center; gap: 16px; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_complete .box_complete .tit p:first-child { display: inline-flex; flex-direction: initial; justify-content: start; align-items: center; gap: 5px; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_complete .box_complete .tit p:first-child:before { content: ""; position: relative; display: inline-block; background-position: 0px 0px; font-size: 0; font-style: normal; background: var(--ico_ai); padding: 9px; border: 1px solid var(--pointColor); border-radius: 30px; background-size: 14px 14px; vertical-align: middle; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_complete .box_complete .tit p:nth-child(2) { color: var(--ftColor14); } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_complete .box_complete .tit p:nth-child(2) span.star:after { content: "*"; position: relative; display: inline-block; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_complete .box_complete .cont { margin: 10px 0 0 0; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_complete .box_complete .cont .readyBox { display: flex; flex-direction: initial; justify-content: center; align-items: center; gap: 10px; position: relative; width: 100%; min-height: 120px; padding: 20px; border-radius: 8px; text-align: center; border: 1px solid #07e6ff; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_complete .box_complete .cont .readyBox p { font-size: 18px; line-height: 26px; color: #ffffff; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_complete .box_complete .cont .contactBox { margin: 25px 0 0 0; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_complete .box_complete .cont .contactBox > p { font-size: 14px; text-align: center; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_complete .box_complete .cont .contactBox .emailBox { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; margin: 30px 0 0 0; border: 1px solid #978eff; position: relative; width: 100%; min-height: 120px; padding: 20px; border-radius: 8px; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_complete .box_complete .cont .contactBox .emailBox .emailForm input[type="email"] { display: none; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_complete .box_complete .cont .contactBox .emailBox .emailForm input[type="email"] + label { color: #07e6ff; font-size: 14px; cursor: pointer; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_complete .box_complete .cont .contactBox .emailBox p { font-size: 12px; } .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_complete .box_complete .cont .contactBox .emailBox a { color: #07e6ff; } @media (max-width: 540px) { .wrap.tune_aiJoin .container .tune_aiJoin .content section.sec_aiJoin .box_input ul li .cont .emailBox input[type="text"] { flex: 3 1 100%; } } /*# sourceMappingURL=idcm_aiJoin.css.map */