/* font face */ /* @font-face { font-family:'Roboto'; font-style:normal; font-display:swap; font-weight:100; src:url('../font/roboto/Roboto-Thin.woff') format('woff'), url('../font/roboto/Roboto-Thin.woff2') format('woff2') } @font-face { font-family:'Roboto'; font-style:normal; font-display:swap; font-weight:300; src:url('../font/roboto/Roboto-Light.woff') format('woff'), url('../font/roboto/Roboto-Light.woff2') format('woff2') } @font-face { font-family:'Roboto'; font-style:normal; font-display:swap; font-weight:400; src:url('../font/roboto/Roboto-Regular.woff') format('woff'), url('../font/roboto/Roboto-Regular.woff2') format('woff2') } @font-face { font-family:'Roboto'; font-style:normal; font-display:swap; font-weight:500; src:url('../font/roboto/Roboto-Medium.woff') format('woff'), url('../font/roboto/Roboto-Medium.woff2') format('woff2') } @font-face { font-family:'Roboto'; font-style:normal; font-display:swap; font-weight:700; src:url('../font/roboto/Roboto-Bold.woff') format('woff'), url('../font/roboto/Roboto-Bold.woff2') format('woff2') } @font-face { font-family:'NotoSansCJKKR'; font-style:normal; font-display:swap; font-weight:300; src:url('../font/notosanscjkkr/NotoSansCJKKR-Light.woff') format('woff'), url('../font/notosanscjkkr/NotoSansCJKKR-Light.woff2') format('woff2') } @font-face { font-family:'NotoSansCJKKR'; font-style:normal; font-display:swap; font-weight:400; src:url('../font/notosanscjkkr/NotoSansCJKKR-Regular.woff') format('woff'), url('../font/notosanscjkkr/NotoSansCJKKR-Regular.woff2') format('woff2') } @font-face { font-family:'NotoSansCJKKR'; font-style:normal; font-display:swap; font-weight:500; src:url('../font/notosanscjkkr/NotoSansCJKKR-Medium.woff') format('woff'), url('../font/notosanscjkkr/NotoSansCJKKR-Medium.woff2') format('woff2') } @font-face { font-family:'NotoSansCJKKR'; font-style:normal; font-display:swap; font-weight:700; src:url('../font/notosanscjkkr/NotoSansCJKKR-Bold.woff') format('woff'), url('../font/notosanscjkkr/NotoSansCJKKR-Bold.woff2') format('woff2') } */ @font-face { font-family:'Pretendard'; font-style:normal; font-display:swap; font-weight:100; src:url('../font/pretendard/Pretendard-Thin.woff2') format('woff2'), url('../font/pretendard/Pretendard-Thin.woff') format('woff'); } @font-face { font-family:'Pretendard'; font-style:normal; font-display:swap; font-weight:200; src:url('../font/pretendard/Pretendard-ExtraLight.woff2') format('woff2'), url('../font/pretendard/Pretendard-ExtraLight.woff') format('woff'); } @font-face { font-family:'Pretendard'; font-style:normal; font-display:swap; font-weight:300; src:url('../font/pretendard/Pretendard-Light.woff2') format('woff2'), url('../font/pretendard/Pretendard-Light.woff') format('woff'); } @font-face { font-family:'Pretendard'; font-style:normal; font-display:swap; font-weight:400; src:url('../font/pretendard/Pretendard-Regular.woff2') format('woff2'), url('../font/pretendard/Pretendard-Regular.woff') format('woff'); } @font-face { font-family:'Pretendard'; font-style:normal; font-display:swap; font-weight:500; src:url('../font/pretendard/Pretendard-Medium.woff2') format('woff2'), url('../font/pretendard/Pretendard-Medium.woff') format('woff'); } @font-face { font-family:'Pretendard'; font-style:normal; font-display:swap; font-weight:600; src:url('../font/pretendard/Pretendard-SemiBold.woff2') format('woff2'), url('../font/pretendard/Pretendard-SemiBold.woff') format('woff'); } @font-face { font-family:'Pretendard'; font-style:normal; font-display:swap; font-weight:700; src:url('../font/pretendard/Pretendard-Bold.woff2') format('woff2'), url('../font/pretendard/Pretendard-Bold.woff') format('woff'); } @font-face { font-family:'Pretendard'; font-style:normal; font-display:swap; font-weight:800; src:url('../font/pretendard/Pretendard-ExtraBold.woff2') format('woff2'), url('../font/pretendard/Pretendard-ExtraBold.woff') format('woff'); } @font-face { font-family:'Pretendard'; font-style:normal; font-display:swap; font-weight:900; src:url('../font/pretendard/Pretendard-Black.woff2') format('woff2'), url('../font/pretendard/Pretendard-Black.woff') format('woff'); } /* @font-face { font-family:'GmarketSans'; font-style:normal; font-display:swap; font-weight:300; src:url('../font/gmarketsans/GmarketSansLight.woff2') format('woff2'),url('../font/gmarketsans/GmarketSansLight.woff') format('woff'); } @font-face { font-family:'GmarketSans'; font-style:normal; font-display:swap; font-weight:500; src:url('../font/gmarketsans/GmarketSansMedium.woff2') format('woff2'),url('../font/gmarketsans/GmarketSansMedium.woff') format('woff'); } @font-face { font-family:'GmarketSans'; font-style:normal; font-display:swap; font-weight:700; src:url('../font/gmarketsans/GmarketSansBold.woff2') format('woff2'),url('../font/gmarketsans/GmarketSansBold.woff') format('woff'); } */ @font-face { font-family:'Material Symbols Outlined'; src: url('../font/materialicon/MaterialSymbolsOutlined-VariableFont_FILL,GRAD,opsz,wght.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family:'Material Symbols Rounded'; src: url('../font/materialicon/MaterialSymbolsRounded-VariableFont_FILL,GRAD,opsz,wght.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family:'Material Symbols Sharp'; src: url('../font/materialicon/MaterialSymbolsSharp-VariableFont_FILL,GRAD,opsz,wght.ttf') format('truetype'); font-weight: normal; font-style: normal; } :root { --color-brand:#FD4D00; --color-brand-50:#FFF2E6; --color-brand-100:#FFD9B3; --color-brand-200:#FFB266; --color-brand-300:#FF8C1A; --color-brand-400:#FD7400; --color-brand-500:#FD4D00; --color-brand-600:#E64500; --color-brand-700:#B93700; --color-brand-800:#8A2900; --color-brand-900:#5C1B00; --color-brand-950:#3B1200; --color-sub-brand-01:#FF7A00; --color-sub-brand-02:#FF5F00; --color-sub-brand-03:#FF9933; --color-sub-brand-04:#FF6600; --color-cancel: #6B7280; --color-delete: #DC2626; --color-gd-brand:linear-gradient(135deg, #FFB300, #FD4D00); --color-gd-cyan-blue: linear-gradient(45deg, var(--color-cyan-500), var(--color-blue-500)); } /* base */ html { width:100%; min-height:100dvh; box-sizing:border-box; } body { width:100%; min-height:100dvh; overflow-x:hidden; font-family:'Pretendard'; font-weight:400; } *, ::after, ::before { box-sizing:inherit; } a, a:focus, a:hover { text-decoration:none; } a, button { cursor:pointer; } a, button { cursor: pointer; } /* width */ .w_4 { width: 4px !important; } .w_8 { width: 8px !important; } .w_12 { width: 12px !important; } .w_16 { width: 16px !important; } .w_20 { width: 20px !important; } .w_24 { width: 24px !important; } .w_28 { width: 28px !important; } .w_32 { width: 32px !important; } .w_36 { width: 36px !important; } .w_40 { width: 40px !important; } .w_44 { width: 44px !important; } .w_48 { width: 48px !important; } .w_52 { width: 52px !important; } .w_56 { width: 56px !important; } .w_60 { width: 60px !important; } .w_64 { width: 64px !important; } .w_68 { width: 68px !important; } .w_72 { width: 72px !important; } .w_76 { width: 76px !important; } .w_80 { width: 80px !important; } .w_84 { width: 84px !important; } .w_88 { width: 88px !important; } .w_92 { width: 92px !important; } .w_96 { width: 96px !important; } .w_100 { width: 100px !important; } .w_104 { width: 104px !important; } .w_108 { width: 108px !important; } .w_112 { width: 112px !important; } .w_116 { width: 116px !important; } .w_120 { width: 120px !important; } .w_124 { width: 124px !important; } .w_128 { width: 128px !important; } .w_160 { width: 160px !important; } .w_200 { width: 200px !important; } .w_240 { width: 240px !important; } .w_1_16 { width: 6.25% !important; } .w_1_12 { width: 8.3333% !important; } .w_1_8 { width: 12.5% !important; } .w_1_6 { width: 16.6667% !important; } .w_5_6 { width: 83.3333% !important; } .w_7_8 { width: 87.5% !important; } .w_11_12 { width: 91.6667% !important; } .w_15_16 { width: 93.75% !important; } .w_5p { width: 5% !important; } .w_10p { width: 10% !important; } .w_15p { width: 15% !important; } .w_20p { width: 20% !important; } .w_25p { width: 25% !important; } .w_30p { width: 30% !important; } .w_35p { width: 35% !important; } .w_40p { width: 40% !important; } .w_45p { width: 45% !important; } .w_50p { width: 50% !important; } .w_55p { width: 55% !important; } .w_60p { width: 60% !important; } .w_65p { width: 65% !important; } .w_70p { width: 70% !important; } .w_75p { width: 75% !important; } .w_80p { width: 80% !important; } .w_85p { width: 85% !important; } .w_90p { width: 90% !important; } .w_95p { width: 95% !important; } .w_100p { width: 100% !important; } .w_33p { width: 33.3333% !important; } .w_66p { width: 66.6667% !important; } /* height */ .h_100p { height:100% !important; } /* padding */ .pd_t0 { padding-top:0 !important } .pd_t4 { padding-top: 4px !important; } .pd_t8 { padding-top: 8px !important; } .pd_t12 { padding-top: 12px !important; } .pd_t16 { padding-top: 16px !important; } .pd_t20 { padding-top: 20px !important; } .pd_t24 { padding-top: 24px !important; } .pd_t28 { padding-top: 28px !important; } .pd_t32 { padding-top: 32px !important; } .pd_t36 { padding-top: 36px !important; } .pd_t40 { padding-top: 40px !important; } .pd_t44 { padding-top: 44px !important; } .pd_t48 { padding-top: 48px !important; } .pd_t52 { padding-top: 52px !important; } .pd_t56 { padding-top: 56px !important; } .pd_t60 { padding-top: 60px !important; } .pd_t64 { padding-top: 64px !important; } .pd_t68 { padding-top: 68px !important; } .pd_t72 { padding-top: 72px !important; } .pd_t76 { padding-top: 76px !important; } .pd_t80 { padding-top: 80px !important; } .pd_t84 { padding-top: 84px !important; } .pd_t88 { padding-top: 88px !important; } .pd_t92 { padding-top: 92px !important; } .pd_t96 { padding-top: 96px !important; } .pd_t100 { padding-top: 100px !important; } .pd_t104 { padding-top: 104px !important; } .pd_t108 { padding-top: 108px !important; } .pd_t112 { padding-top: 112px !important; } .pd_t116 { padding-top: 116px !important; } .pd_t120 { padding-top: 120px !important; } .pd_t124 { padding-top: 124px !important; } .pd_t128 { padding-top: 128px !important; } .pd_b0 { padding-bottom: 0 !important; } .pd_b4 { padding-bottom: 4px !important; } .pd_b8 { padding-bottom: 8px !important; } .pd_b12 { padding-bottom: 12px !important; } .pd_b16 { padding-bottom: 16px !important; } .pd_b20 { padding-bottom: 20px !important; } .pd_b24 { padding-bottom: 24px !important; } .pd_b28 { padding-bottom: 28px !important; } .pd_b32 { padding-bottom: 32px !important; } .pd_b36 { padding-bottom: 36px !important; } .pd_b40 { padding-bottom: 40px !important; } .pd_b44 { padding-bottom: 44px !important; } .pd_b48 { padding-bottom: 48px !important; } .pd_b52 { padding-bottom: 52px !important; } .pd_b56 { padding-bottom: 56px !important; } .pd_b60 { padding-bottom: 60px !important; } .pd_b64 { padding-bottom: 64px !important; } .pd_b68 { padding-bottom: 68px !important; } .pd_b72 { padding-bottom: 72px !important; } .pd_b76 { padding-bottom: 76px !important; } .pd_b80 { padding-bottom: 80px !important; } .pd_b84 { padding-bottom: 84px !important; } .pd_b88 { padding-bottom: 88px !important; } .pd_b92 { padding-bottom: 92px !important; } .pd_b96 { padding-bottom: 96px !important; } .pd_b100 { padding-bottom: 100px !important; } .pd_b104 { padding-bottom: 104px !important; } .pd_b108 { padding-bottom: 108px !important; } .pd_b112 { padding-bottom: 112px !important; } .pd_b116 { padding-bottom: 116px !important; } .pd_b120 { padding-bottom: 120px !important; } .pd_b124 { padding-bottom: 124px !important; } .pd_b128 { padding-bottom: 128px !important; } .pd_r4 { padding-right: 4px !important; } .pd_r8 { padding-right: 8px !important; } .pd_r12 { padding-right: 12px !important; } .pd_r16 { padding-right: 16px !important; } .pd_r20 { padding-right: 20px !important; } .pd_r24 { padding-right: 24px !important; } .pd_r28 { padding-right: 28px !important; } .pd_r32 { padding-right: 32px !important; } .pd_r36 { padding-right: 36px !important; } .pd_r40 { padding-right: 40px !important; } .pd_r44 { padding-right: 44px !important; } .pd_r48 { padding-right: 48px !important; } .pd_r52 { padding-right: 52px !important; } .pd_r56 { padding-right: 56px !important; } .pd_r60 { padding-right: 60px !important; } .pd_r64 { padding-right: 64px !important; } .pd_r68 { padding-right: 68px !important; } .pd_r72 { padding-right: 72px !important; } .pd_r76 { padding-right: 76px !important; } .pd_r80 { padding-right: 80px !important; } .pd_r84 { padding-right: 84px !important; } .pd_r88 { padding-right: 88px !important; } .pd_r92 { padding-right: 92px !important; } .pd_r96 { padding-right: 96px !important; } .pd_r100 { padding-right: 100px !important; } .pd_r104 { padding-right: 104px !important; } .pd_r108 { padding-right: 108px !important; } .pd_r112 { padding-right: 112px !important; } .pd_r116 { padding-right: 116px !important; } .pd_r120 { padding-right: 120px !important; } .pd_r124 { padding-right: 124px !important; } .pd_r128 { padding-right: 128px !important; } .pd_l4 { padding-left: 4px !important; } .pd_l8 { padding-left: 8px !important; } .pd_l12 { padding-left: 12px !important; } .pd_l16 { padding-left: 16px !important; } .pd_l20 { padding-left: 20px !important; } .pd_l24 { padding-left: 24px !important; } .pd_l28 { padding-left: 28px !important; } .pd_l32 { padding-left: 32px !important; } .pd_l36 { padding-left: 36px !important; } .pd_l40 { padding-left: 40px !important; } .pd_l44 { padding-left: 44px !important; } .pd_l48 { padding-left: 48px !important; } .pd_l52 { padding-left: 52px !important; } .pd_l56 { padding-left: 56px !important; } .pd_l60 { padding-left: 60px !important; } .pd_l64 { padding-left: 64px !important; } .pd_l68 { padding-left: 68px !important; } .pd_l72 { padding-left: 72px !important; } .pd_l76 { padding-left: 76px !important; } .pd_l80 { padding-left: 80px !important; } .pd_l84 { padding-left: 84px !important; } .pd_l88 { padding-left: 88px !important; } .pd_l92 { padding-left: 92px !important; } .pd_l96 { padding-left: 96px !important; } .pd_l100 { padding-left: 100px !important; } .pd_l104 { padding-left: 104px !important; } .pd_l108 { padding-left: 108px !important; } .pd_l112 { padding-left: 112px !important; } .pd_l116 { padding-left: 116px !important; } .pd_l120 { padding-left: 120px !important; } .pd_l124 { padding-left: 124px !important; } .pd_l128 { padding-left: 128px !important; } .pd_0 { padding: 0px !important; } .pd_4 { padding: 4px !important; } .pd_8 { padding: 8px !important; } .pd_12 { padding: 12px !important; } .pd_16 { padding: 16px !important; } .pd_20 { padding: 20px !important; } .pd_24 { padding: 24px !important; } .pd_28 { padding: 28px !important; } .pd_32 { padding: 32px !important; } .pd_36 { padding: 36px !important; } .pd_40 { padding: 40px !important; } .pd_44 { padding: 44px !important; } .pd_48 { padding: 48px !important; } .pd_52 { padding: 52px !important; } .pd_56 { padding: 56px !important; } .pd_60 { padding: 60px !important; } .pd_64 { padding: 64px !important; } .pd_68 { padding: 68px !important; } .pd_72 { padding: 72px !important; } .pd_76 { padding: 76px !important; } .pd_80 { padding: 80px !important; } .pd_84 { padding: 84px !important; } .pd_88 { padding: 88px !important; } .pd_92 { padding: 92px !important; } .pd_96 { padding: 96px !important; } .pd_100 { padding: 100px !important; } .pd_104 { padding: 104px !important; } .pd_108 { padding: 108px !important; } .pd_112 { padding: 112px !important; } .pd_116 { padding: 116px !important; } .pd_120 { padding: 120px !important; } .pd_124 { padding: 124px !important; } .pd_128 { padding: 128px !important; } /* margin */ .mg_t0 { margin-top: 0px !important; } .mg_t4 { margin-top: 4px !important; } .mg_t8 { margin-top: 8px !important; } .mg_t12 { margin-top: 12px !important; } .mg_t16 { margin-top: 16px !important; } .mg_t20 { margin-top: 20px !important; } .mg_t24 { margin-top: 24px !important; } .mg_t28 { margin-top: 28px !important; } .mg_t32 { margin-top: 32px !important; } .mg_t36 { margin-top: 36px !important; } .mg_t40 { margin-top: 40px !important; } .mg_t44 { margin-top: 44px !important; } .mg_t48 { margin-top: 48px !important; } .mg_t52 { margin-top: 52px !important; } .mg_t56 { margin-top: 56px !important; } .mg_t60 { margin-top: 60px !important; } .mg_t64 { margin-top: 64px !important; } .mg_t68 { margin-top: 68px !important; } .mg_t72 { margin-top: 72px !important; } .mg_t76 { margin-top: 76px !important; } .mg_t80 { margin-top: 80px !important; } .mg_t84 { margin-top: 84px !important; } .mg_t88 { margin-top: 88px !important; } .mg_t92 { margin-top: 92px !important; } .mg_t96 { margin-top: 96px !important; } .mg_t100 { margin-top: 100px !important; } .mg_t104 { margin-top: 104px !important; } .mg_t108 { margin-top: 108px !important; } .mg_t112 { margin-top: 112px !important; } .mg_t116 { margin-top: 116px !important; } .mg_t120 { margin-top: 120px !important; } .mg_t124 { margin-top: 124px !important; } .mg_t128 { margin-top: 128px !important; } .mg_b4 { margin-bottom: 4px !important; } .mg_b8 { margin-bottom: 8px !important; } .mg_b12 { margin-bottom: 12px !important; } .mg_b16 { margin-bottom: 16px !important; } .mg_b20 { margin-bottom: 20px !important; } .mg_b24 { margin-bottom: 24px !important; } .mg_b28 { margin-bottom: 28px !important; } .mg_b32 { margin-bottom: 32px !important; } .mg_b36 { margin-bottom: 36px !important; } .mg_b40 { margin-bottom: 40px !important; } .mg_b44 { margin-bottom: 44px !important; } .mg_b48 { margin-bottom: 48px !important; } .mg_b52 { margin-bottom: 52px !important; } .mg_b56 { margin-bottom: 56px !important; } .mg_b60 { margin-bottom: 60px !important; } .mg_b64 { margin-bottom: 64px !important; } .mg_b68 { margin-bottom: 68px !important; } .mg_b72 { margin-bottom: 72px !important; } .mg_b76 { margin-bottom: 76px !important; } .mg_b80 { margin-bottom: 80px !important; } .mg_b84 { margin-bottom: 84px !important; } .mg_b88 { margin-bottom: 88px !important; } .mg_b92 { margin-bottom: 92px !important; } .mg_b96 { margin-bottom: 96px !important; } .mg_b100 { margin-bottom: 100px !important; } .mg_b104 { margin-bottom: 104px !important; } .mg_b108 { margin-bottom: 108px !important; } .mg_b112 { margin-bottom: 112px !important; } .mg_b116 { margin-bottom: 116px !important; } .mg_b120 { margin-bottom: 120px !important; } .mg_b124 { margin-bottom: 124px !important; } .mg_b128 { margin-bottom: 128px !important; } .mg_r0 { margin-right: 0 !important; } .mg_r4 { margin-right: 4px !important; } .mg_r8 { margin-right: 8px !important; } .mg_r12 { margin-right: 12px !important; } .mg_r16 { margin-right: 16px !important; } .mg_r20 { margin-right: 20px !important; } .mg_r24 { margin-right: 24px !important; } .mg_r28 { margin-right: 28px !important; } .mg_r32 { margin-right: 32px !important; } .mg_r36 { margin-right: 36px !important; } .mg_r40 { margin-right: 40px !important; } .mg_r44 { margin-right: 44px !important; } .mg_r48 { margin-right: 48px !important; } .mg_r52 { margin-right: 52px !important; } .mg_r56 { margin-right: 56px !important; } .mg_r60 { margin-right: 60px !important; } .mg_r64 { margin-right: 64px !important; } .mg_r68 { margin-right: 68px !important; } .mg_r72 { margin-right: 72px !important; } .mg_r76 { margin-right: 76px !important; } .mg_r80 { margin-right: 80px !important; } .mg_r84 { margin-right: 84px !important; } .mg_r88 { margin-right: 88px !important; } .mg_r92 { margin-right: 92px !important; } .mg_r96 { margin-right: 96px !important; } .mg_r100 { margin-right: 100px !important; } .mg_r104 { margin-right: 104px !important; } .mg_r108 { margin-right: 108px !important; } .mg_r112 { margin-right: 112px !important; } .mg_r116 { margin-right: 116px !important; } .mg_r120 { margin-right: 120px !important; } .mg_r124 { margin-right: 124px !important; } .mg_r128 { margin-right: 128px !important; } .mg_l4 { margin-left: 4px !important; } .mg_l8 { margin-left: 8px !important; } .mg_l12 { margin-left: 12px !important; } .mg_l16 { margin-left: 16px !important; } .mg_l20 { margin-left: 20px !important; } .mg_l24 { margin-left: 24px !important; } .mg_l28 { margin-left: 28px !important; } .mg_l32 { margin-left: 32px !important; } .mg_l36 { margin-left: 36px !important; } .mg_l40 { margin-left: 40px !important; } .mg_l44 { margin-left: 44px !important; } .mg_l48 { margin-left: 48px !important; } .mg_l52 { margin-left: 52px !important; } .mg_l56 { margin-left: 56px !important; } .mg_l60 { margin-left: 60px !important; } .mg_l64 { margin-left: 64px !important; } .mg_l68 { margin-left: 68px !important; } .mg_l72 { margin-left: 72px !important; } .mg_l76 { margin-left: 76px !important; } .mg_l80 { margin-left: 80px !important; } .mg_l84 { margin-left: 84px !important; } .mg_l88 { margin-left: 88px !important; } .mg_l92 { margin-left: 92px !important; } .mg_l96 { margin-left: 96px !important; } .mg_l100 { margin-left: 100px !important; } .mg_l104 { margin-left: 104px !important; } .mg_l108 { margin-left: 108px !important; } .mg_l112 { margin-left: 112px !important; } .mg_l116 { margin-left: 116px !important; } .mg_l120 { margin-left: 120px !important; } .mg_l124 { margin-left: 124px !important; } .mg_l128 { margin-left: 128px !important; } .mg_4 { margin: 4px !important; } .mg_8 { margin: 8px !important; } .mg_12 { margin: 12px !important; } .mg_16 { margin: 16px !important; } .mg_20 { margin: 20px !important; } .mg_24 { margin: 24px !important; } .mg_28 { margin: 28px !important; } .mg_32 { margin: 32px !important; } .mg_36 { margin: 36px !important; } .mg_40 { margin: 40px !important; } .mg_44 { margin: 44px !important; } .mg_48 { margin: 48px !important; } .mg_52 { margin: 52px !important; } .mg_56 { margin: 56px !important; } .mg_60 { margin: 60px !important; } .mg_64 { margin: 64px !important; } .mg_68 { margin: 68px !important; } .mg_72 { margin: 72px !important; } .mg_76 { margin: 76px !important; } .mg_80 { margin: 80px !important; } .mg_84 { margin: 84px !important; } .mg_88 { margin: 88px !important; } .mg_92 { margin: 92px !important; } .mg_96 { margin: 96px !important; } .mg_100 { margin: 100px !important; } .mg_104 { margin: 104px !important; } .mg_108 { margin: 108px !important; } .mg_112 { margin: 112px !important; } .mg_116 { margin: 116px !important; } .mg_120 { margin: 120px !important; } .mg_124 { margin: 124px !important; } .mg_128 { margin: 128px !important; } /* overflow hidden */ .of_h { overflow:hidden; } .of_x_h { overflow-x:hidden; } .of_y_h { overflow-y:hidden !important; } /* hide */ .hdn { position:absolute; left:0; top:0; width:0; height:0; overflow:hidden; } /* text-align */ .ta_l { text-align:left !important; } .ta_c { text-align:center !important; } .ta_r { text-align:right !important; } /* align items */ .ai_top { align-items:flex-start !important; } /* layout common */ .d_t { display:table; table-layout:fixed; width:100%; } .d_t > div { display:table-cell; vertical-align:middle; } .d_s_f { display:flex; align-items: center; } .d_s_f .auto { flex:1; } .d_s_b, .d_s_c { display:flex; justify-content: space-between; align-items: center; font-size:0; line-height:0; } .d_s_b *, .d_s_c * { vertical-align:middle } .d_s_c :not(.center) { flex:1; } .d_s_c .center { flex:0 0 auto; white-space:nowrap; padding:0 8px; } .d_g { display:flex; flex-flow:wrap; } .d_g > div { flex-grow:0; flex-basis:auto; } .d_g.d_g_h { height:100%; flex-direction: column; } .d_g.d_g_h > div { flex:1 0 50%; } .d_g.d_g_4 { margin:-4px -2px 0; } .d_g.d_g_4 > div { padding:4px 2px 0; } .d_g.d_g_8 { margin:-8px -4px 0; } .d_g.d_g_8 > div { padding:8px 4px 0; } .d_g.d_g_12 { margin:-12px -6px 0; } .d_g.d_g_12 > div { padding:12px 6px 0; } .d_g.d_g_16 { margin:-16px -8px 0; } .d_g.d_g_16 > div { padding:16px 8px 0; } .d_g.d_g_20 { margin:-20px -10px 0; } .d_g.d_g_20 > div { padding:20px 10px 0; } .d_g.d_g_24 { margin:-24px -12px 0; } .d_g.d_g_24 > div { padding:24px 12px 0; } .d_g.d_g_28 { margin:-28px -14px 0; } .d_g.d_g_28 > div { padding:28px 14px 0; } .d_g.d_g_32 { margin:-32px -16px 0; } .d_g.d_g_32 > div { padding:32px 16px 0; } .d_g.d_g_36 { margin:-36px -18px 0; } .d_g.d_g_36 > div { padding:36px 18px 0; } .d_g.d_g_40 { margin:-40px -20px 0; } .d_g.d_g_40 > div { padding:40px 20px 0; } .d_g.d_g_44 { margin:-44px -22px 0; } .d_g.d_g_44 > div { padding:44px 22px 0; } .d_g.d_g_48 { margin:-48px -24px 0; } .d_g.d_g_48 > div { padding:48px 24px 0; } .d_g.d_g_52 { margin:-52px -26px 0; } .d_g.d_g_52 > div { padding:52px 26px 0; } .d_g.d_g_56 { margin:-56px -28px 0; } .d_g.d_g_56 > div { padding:56px 28px 0; } .d_g.d_g_60 { margin:-60px -30px 0; } .d_g.d_g_60 > div { padding:60px 30px 0; } .d_g.d_g_64 { margin:-64px -32px 0; } .d_g.d_g_64 > div { padding:64px 32px 0; } .g_l { display:grid; } .g_l.g_l_g4 { grid-gap: 4px; } .g_l.g_l_g8 { grid-gap: 8px; } .g_l.g_l_g12 { grid-gap: 12px; } .g_l.g_l_g16 { grid-gap: 16px; } .g_l.g_l_g20 { grid-gap: 20px; } .g_l.g_l_g24 { grid-gap: 24px; } .g_l.g_l_g28 { grid-gap: 28px; } .g_l.g_l_g32 { grid-gap: 32px; } .g_l.g_l_g36 { grid-gap: 36px; } .g_l.g_l_g40 { grid-gap: 40px; } .g_l.g_l_g44 { grid-gap: 44px; } .g_l.g_l_g48 { grid-gap: 48px; } .g_l.g_l_g52 { grid-gap: 52px; } .g_l.g_l_g56 { grid-gap: 56px; } .g_l.g_l_g60 { grid-gap: 60px; } .g_l.g_l_g64 { grid-gap: 64px; } .g_l.g_l_c1 { grid-template-columns: repeat(1, 1fr); } .g_l.g_l_c2 { grid-template-columns: repeat(2, 1fr); } .g_l.g_l_c3 { grid-template-columns: repeat(3, 1fr); } .g_l.g_l_c4 { grid-template-columns: repeat(4, 1fr); } .g_l.g_l_c5 { grid-template-columns: repeat(5, 1fr); } .g_l.g_l_c6 { grid-template-columns: repeat(6, 1fr); } .g_l.g_l_c7 { grid-template-columns: repeat(7, 1fr); } .g_l.g_l_c8 { grid-template-columns: repeat(8, 1fr); } .g_l.g_l_c9 { grid-template-columns: repeat(9, 1fr); } .g_l.g_l_c10 { grid-template-columns: repeat(10, 1fr); } .g_l.g_l_c11 { grid-template-columns: repeat(11, 1fr); } .g_l.g_l_c12 { grid-template-columns: repeat(12, 1fr); } .g_l.g_l_c13 { grid-template-columns: repeat(13, 1fr); } .g_l.g_l_c14 { grid-template-columns: repeat(14, 1fr); } .g_l.g_l_c15 { grid-template-columns: repeat(15, 1fr); } .g_l.g_l_c16 { grid-template-columns: repeat(16, 1fr); } /* responsive - show, hide */ .dp_n { display:none; } @media (min-width:1400px){ .dp_n_l { display:none; } } @media (min-width:1200px) and (max-width:1399px){ .dp_n_p { display:none; } } @media (min-width:768px) and (max-width:1199px){ .dp_n_t { display:none; } } @media (max-width:767px){ .dp_n_m { display:none; } } /* Material Icon */ .ms_o { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: normal; font-size: 24px; display: inline-block; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; } .ms_r { font-family: 'Material Symbols Rounded'; font-style: normal; font-weight: normal; font-size: 24px; display: inline-block; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; } .ms_s { font-family: 'Material Symbols Sharp'; font-style: normal; font-weight: normal; font-size: 24px; display: inline-block; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; } .ms_o_spinner { animation: spin 1s linear infinite; } /* Text */ /* font family */ .ff_notosans { font-family:'NotoSansCJKKR' } .ff_pretendard { font-family:'Pretendard' } .ff_gmarketsans { font-family:'GmarketSans' } .ff_roboto { font-family:'Roboto' } /* font weight*/ .fw_100 { font-weight:100; } .fw_200 { font-weight:200; } .fw_300 { font-weight:300; } .fw_400 { font-weight:400; } .fw_500 { font-weight:500; } .fw_600 { font-weight:600; } .fw_700 { font-weight:700; } .fw_800 { font-weight:800; } .fw_900 { font-weight:900; } /* font size */ [class^='fs_'] { line-height:calc(1em + 8px); vertical-align:middle; } .fs_10 { font-size:10px; } .fs_11 { font-size:11px; } .fs_12 { font-size:12px; } .fs_13 { font-size:13px; } .fs_14 { font-size:14px; } .fs_15 { font-size:15px; } .fs_16 { font-size:16px; } .fs_17 { font-size:17px; } .fs_18 { font-size:18px; } .fs_19 { font-size:19px; } .fs_20 { font-size:20px; } .fs_21 { font-size:21px; } .fs_22 { font-size:22px; } .fs_23 { font-size:23px; } .fs_24 { font-size:24px; } .fs_25 { font-size:25px; } .fs_26 { font-size:26px; } .fs_27 { font-size:27px; } .fs_28 { font-size:28px; } .fs_29 { font-size:29px; } .fs_30 { font-size:30px; } .fs_31 { font-size:31px; } .fs_32 { font-size:32px; } .fs_33 { font-size:33px; } .fs_34 { font-size:34px; } .fs_35 { font-size:35px; } .fs_36 { font-size:36px; } .fs_37 { font-size:37px; } .fs_38 { font-size:38px; } .fs_39 { font-size:39px; } .fs_40 { font-size:40px; } .fs_41 { font-size:41px; } .fs_42 { font-size:42px; } .fs_43 { font-size:43px; } .fs_44 { font-size:44px; } .fs_45 { font-size:45px; } .fs_46 { font-size:46px; } .fs_47 { font-size:47px; } .fs_48 { font-size:48px; } .fs_49 { font-size:49px; } .fs_50 { font-size:50px; } .fs_51 { font-size:51px; } .fs_52 { font-size:52px; } .fs_53 { font-size:53px; } .fs_54 { font-size:54px; } .fs_55 { font-size:55px; } .fs_56 { font-size:56px; } .fs_57 { font-size:57px; } .fs_58 { font-size:58px; } .fs_59 { font-size:59px; } .fs_60 { font-size:60px; } .fs_61 { font-size:61px; } .fs_62 { font-size:62px; } .fs_63 { font-size:63px; } .fs_64 { font-size:64px; } /* font color */ .fc-brand-50 { color:#FFF2E6; } .fc-brand-100 { color:#FFD9B3; } .fc-brand-200 { color:#FFB266; } .fc-brand-300 { color:#FF8C1A; } .fc-brand-400 { color:#FD7400; } .fc-brand-500 { color:#FD4D00; } .fc-brand-600 { color:#E64500; } .fc-brand-700 { color:#B93700; } .fc-brand-800 { color:#8A2900; } .fc-brand-900 { color:#5C1B00; } .fc-brand-950 { color:#3B1200; } /* Button */ .btn { font-size:0; line-height:0; display:inline-flex; vertical-align:middle; justify-content:center; align-items:center; text-align:center; border:1px solid transparent; font-size:0; line-height:0; font-weight:600; transition:all 0.25s ease-out; } .btn:hover { opacity:0.8; } .btn:active { opacity:0.6; } .btn[disabled] { background:var(--color-gray-300) !important; border-color:transparent !important; } .btn[disabled]:hover { opacity:1; } .btn[disabled]:active { opacity:1; } .btn[disabled] > i, .btn[disabled] > span { color:var(--color-white) !important; } .btn_xs { min-width:24px; height:24px; padding:0 6px; border-radius:3px; } .btn_sm { min-width:28px; height:28px; padding:0 8px; border-radius:4px; } .btn_md { min-width:32px; height:32px; padding:0 10px; border-radius:4px; } .btn_lg { min-width:40px; height:40px; padding:0 14px; border-radius:5px; } .btn_xl { min-width:44px; height:44px; padding:0 16px; border-radius:6px; } .btn_xs > i { width:16px; font-size:16px; margin-right:3px; } .btn_sm > i { width:16px; font-size:16px; margin-right:4px; } .btn_md > i { width:18px; font-size:18px; margin-right:4px; } .btn_lg > i { width:18px; font-size:18px; margin-right:5px; } .btn_xl > i { width:20px; font-size:20px; margin-right:5px; } .btn_xs > span { font-size:10px; } .btn_sm > span { font-size:10px; } .btn_md > span { font-size:12px; } .btn_lg > span { font-size:12px; } .btn_xl > span { font-size:14px; } .btn_xs > span + i { margin-left:3px; margin-right:0 !important; } .btn_sm > span + i { margin-left:4px; margin-right:0 !important; } .btn_md > span + i { margin-left:4px; margin-right:0 !important; } .btn_lg > span + i { margin-left:5px; margin-right:0 !important; } .btn_xl > span + i { margin-left:5px; margin-right:0 !important; } .btn_xs.btn_round { border-radius:12px; } .btn_sm.btn_round { border-radius:14px; } .btn_md.btn_round { border-radius:16px; } .btn_lg.btn_round { border-radius:20px; } .btn_xl.btn_round { border-radius:22px; } .btn.btn_square { padding:0 !important; } .btn.btn_square > i { margin:0; } .btn_brand { background:var(--color-brand-500); color:var(--color-white) } .btn_red { background:var(--color-red-600); color:var(--color-white) } .btn_orange { background:var(--color-orange-600); color:var(--color-white) } .btn_amber { background:var(--color-amber-600); color:var(--color-white) } .btn_yellow { background:var(--color-yellow-600); color:var(--color-white) } .btn_lime { background:var(--color-lime-600); color:var(--color-white) } .btn_green { background:var(--color-green-600); color:var(--color-white) } .btn_emerald { background:var(--color-emerald-600); color:var(--color-white) } .btn_teal { background:var(--color-teal-600); color:var(--color-white) } .btn_cyan { background:var(--color-cyan-600); color:var(--color-white) } .btn_sky { background:var(--color-sky-600); color:var(--color-white) } .btn_blue { background:var(--color-blue-600); color:var(--color-white) } .btn_indigo { background:var(--color-indigo-600); color:var(--color-white) } .btn_violet { background:var(--color-violet-600); color:var(--color-white) } .btn_purple { background:var(--color-purple-600); color:var(--color-white) } .btn_fuchsia { background:var(--color-fuchsia-600); color:var(--color-white) } .btn_pink { background:var(--color-pink-600); color:var(--color-white) } .btn_rose { background:var(--color-rose-600); color:var(--color-white) } .btn_slate { background:var(--color-slate-600); color:var(--color-white) } .btn_gray_50 { background:var(--color-gray-50); color:var(--color-white) } .btn_gray_100 { background:var(--color-gray-100); color:var(--color-white) } .btn_gray_200 { background:var(--color-gray-200); color:var(--color-white) } .btn_gray_300 { background:var(--color-gray-300); color:var(--color-white) } .btn_gray_400 { background:var(--color-gray-400); color:var(--color-white) } .btn_gray_500 { background:var(--color-gray-500); color:var(--color-white) } .btn_gray_600 { background:var(--color-gray-600); color:var(--color-white) } .btn_gray_700 { background:var(--color-gray-700); color:var(--color-white) } .btn_gray_800 { background:var(--color-gray-800); color:var(--color-white) } .btn_gray_900 { background:var(--color-gray-900); color:var(--color-white) } .btn_gray_950 { background:var(--color-gray-950); color:var(--color-white) } .btn_zinc { background:var(--color-zinc-600); color:var(--color-white) } .btn_neutral { background:var(--color-neutral-600); color:var(--color-white) } .btn_stone { background:var(--color-stone-600); color:var(--color-white) } .btn_black { background:var(--color-black); color:var(--color-white) } .btn_gd_brand { background:var(--color-gd-brand); color:var(--color-white) } .btn_gd_cyan_blue { background:linear-gradient(45deg, var(--color-cyan-500), var(--color-blue-500)); color:var(--color-white) } .btn_l_brand { border-color:var(--color-brand-500); color:var(--color-brand-500); } .btn_l_red { border-color:var(--color-red-600); color:var(--color-red-600); } .btn_l_orange { border-color:var(--color-orange-600); color:var(--color-orange-600); } .btn_l_amber { border-color:var(--color-amber-600); color:var(--color-amber-600); } .btn_l_yellow { border-color:var(--color-yellow-600); color:var(--color-yellow-600); } .btn_l_lime { border-color:var(--color-lime-600); color:var(--color-lime-600); } .btn_l_green { border-color:var(--color-green-600); color:var(--color-green-600); } .btn_l_emerald { border-color:var(--color-emerald-600); color:var(--color-emerald-600); } .btn_l_teal { border-color:var(--color-teal-600); color:var(--color-teal-600); } .btn_l_cyan { border-color:var(--color-cyan-600); color:var(--color-cyan-600); } .btn_l_sky { border-color:var(--color-sky-600); color:var(--color-sky-600); } .btn_l_blue { border-color:var(--color-blue-600); color:var(--color-blue-600); } .btn_l_indigo { border-color:var(--color-indigo-600); color:var(--color-indigo-600); } .btn_l_violet { border-color:var(--color-violet-600); color:var(--color-violet-600); } .btn_l_purple { border-color:var(--color-purple-600); color:var(--color-purple-600); } .btn_l_fuchsia { border-color:var(--color-fuchsia-600); color:var(--color-fuchsia-600); } .btn_l_pink { border-color:var(--color-pink-600); color:var(--color-pink-600); } .btn_l_rose { border-color:var(--color-rose-600); color:var(--color-rose-600); } .btn_l_slate { border-color:var(--color-slate-600); color:var(--color-slate-600); } .btn_l_gray { border-color:var(--color-gray-300); color:var(--color-gray-600); } .btn_l_gray_50 { border-color:var(--color-gray-50); color:var(--color-gray-50); } .btn_l_gray_100 { border-color:var(--color-gray-100); color:var(--color-gray-100); } .btn_l_gray_200 { border-color:var(--color-gray-200); color:var(--color-gray-200); } .btn_l_gray_300 { border-color:var(--color-gray-300); color:var(--color-gray-300); } .btn_l_gray_400 { border-color:var(--color-gray-400); color:var(--color-gray-400); } .btn_l_gray_500 { border-color:var(--color-gray-500); color:var(--color-gray-500); } .btn_l_gray_600 { border-color:var(--color-gray-600); color:var(--color-gray-600); } .btn_l_gray_700 { border-color:var(--color-gray-700); color:var(--color-gray-700); } .btn_l_gray_800 { border-color:var(--color-gray-800); color:var(--color-gray-800); } .btn_l_gray_900 { border-color:var(--color-gray-900); color:var(--color-gray-900); } .btn_l_gray_950 { border-color:var(--color-gray-950); color:var(--color-gray-950); } .btn_l_zinc { border-color:var(--color-zinc-600); color:var(--color-zinc-600); } .btn_l_neutral { border-color:var(--color-neutral-600); color:var(--color-neutral-600); } .btn_l_stone { border-color:var(--color-stone-600); color:var(--color-stone-600); } .btn_l_black { border-color:var(--color-black); color:var(--color-black); } .btn_l_gray_200_400 { border-color:var(--color-gray-200); color:var(--color-gray-400); } .btn_l_gray_200_600 { border-color:var(--color-gray-200); color:var(--color-gray-600); } [class*="btn_w_"]:hover { background:var(--color-gray-100); opacity:1; } [class*="btn_w_"]:active { background:var(--color-gray-100); opacity:0.8; } .btn_w_gray_50 { color:var(--color-gray-50) } .btn_w_gray_100 { color:var(--color-gray-100) } .btn_w_gray_200 { color:var(--color-gray-200) } .btn_w_gray_300 { color:var(--color-gray-300) } .btn_w_gray_400 { color:var(--color-gray-400) } .btn_w_gray_500 { color:var(--color-gray-500) } .btn_w_gray_600 { color:var(--color-gray-600) } .btn_w_gray_700 { color:var(--color-gray-700) } .btn_w_gray_800 { color:var(--color-gray-800) } .btn_w_gray_900 { color:var(--color-gray-900) } .btn_w_black { color:var(--color-black) } .btn.btn_left { justify-content:flex-start; } .btn.btn_left > span { flex:1 } .btn_chatgpt > i { width:18px; height:18px; background:url(../image/common/ico_chatgpt.png) no-repeat center center / 80%; } .btn_deepl > i { width:18px; height:18px; background:url(../image/common/ico_deepl.svg) no-repeat center center / 72%; } /* Badge */ .badge { font-size:0; line-height:0; display:inline-flex; border:1px solid transparent; justify-content:center; align-items:center; vertical-align:middle; text-align:center; } .badge > * { display:inline-flex; justify-content:center; align-items:center; vertical-align:middle; } .badge_xs { min-width:16px; height:16px; padding:0 4px; border-radius:2px; } .badge_sm { min-width:20px; height:20px; padding:0 6px; border-radius:3px; } .badge_md { min-width:24px; height:24px; padding:0 8px; border-radius:4px; } .badge_lg { min-width:28px; height:28px; padding:0 10px; border-radius:5px; } .badge_xl { min-width:32px; height:32px; padding:0 12px; border-radius:6px; } .badge_round.badge_xs { border-radius:8px; } .badge_round.badge_sm { border-radius:10px; } .badge_round.badge_md { border-radius:12px; } .badge_round.badge_lg { border-radius:14px; } .badge_round.badge_xl { border-radius:16px; } .badge > span { line-height:calc(1em + 8px); font-weight:600; } .badge_xs > span { font-size:8px; } .badge_sm > span { font-size:10px; } .badge_md > span { font-size:12px; } .badge_lg > span { font-size:14px; } .badge_xl > span { font-size:14px; } .badge > i { line-height:1; text-align:center; } .badge_xs > i { width:10px; height:10px; font-size:10px; margin-right:1px; } .badge_sm > i { width:12px; height:12px; font-size:12px; margin-right:2px; } .badge_md > i { width:14px; height:14px; font-size:14px; margin-right:3px; } .badge_lg > i { width:16px; height:16px; font-size:16px; margin-right:4px; } .badge_xl > i { width:18px; height:18px; font-size:18px; margin-right:5px; } .badge_xs > span + i { margin-left:1px; margin-right:0 !important; } .badge_sm > span + i { margin-left:2px; margin-right:0 !important; } .badge_md > span + i { margin-left:3px; margin-right:0 !important; } .badge_lg > span + i { margin-left:4px; margin-right:0 !important; } .badge_xl > span + i { margin-left:5px; margin-right:0 !important; } .badge.badge_square { padding:0 !important; } .badge.badge_square > i { margin:0; } .badge_brand { background:var(--color-brand-100); color:var(--color-brand-500); } .badge_red { background:var(--color-red-100); color:var(--color-red-600); } .badge_orange { background:var(--color-orange-100); color:var(--color-orange-600); } .badge_amber { background:var(--color-amber-100); color:var(--color-amber-600); } .badge_yellow { background:var(--color-yellow-100); color:var(--color-yellow-600); } .badge_lime { background:var(--color-lime-100); color:var(--color-lime-600); } .badge_green { background:var(--color-green-100); color:var(--color-green-600); } .badge_emerald { background:var(--color-emerald-100); color:var(--color-emerald-600); } .badge_teal { background:var(--color-teal-100); color:var(--color-teal-600); } .badge_cyan { background:var(--color-cyan-100); color:var(--color-cyan-600); } .badge_sky { background:var(--color-sky-100); color:var(--color-sky-600); } .badge_blue { background:var(--color-blue-100); color:var(--color-blue-600); } .badge_indigo { background:var(--color-indigo-100); color:var(--color-indigo-600); } .badge_violet { background:var(--color-violet-100); color:var(--color-violet-600); } .badge_purple { background:var(--color-purple-100); color:var(--color-purple-600); } .badge_fuchsia { background:var(--color-fuchsia-100); color:var(--color-fuchsia-600); } .badge_pink { background:var(--color-pink-100); color:var(--color-pink-600); } .badge_rose { background:var(--color-rose-100); color:var(--color-rose-600); } .badge_slate { background:var(--color-slate-100); color:var(--color-slate-600); } .badge_gray { background:var(--color-gray-100); color:var(--color-gray-600); } .badge_zinc { background:var(--color-zinc-100); color:var(--color-zinc-600); } .badge_neutral { background:var(--color-neutral-100); color:var(--color-neutral-600); } .badge_stone { background:var(--color-stone-100); color:var(--color-stone-600); } .badge_l_brand { background:var(--color-brand-100); color:var(--color-brand-500); border-color:var(--color-brand-300); } .badge_l_red { background:var(--color-red-100); color:var(--color-red-600); border-color:var(--color-red-400); } .badge_l_orange { background:var(--color-orange-100); color:var(--color-orange-600); border-color:var(--color-orange-400); } .badge_l_amber { background:var(--color-amber-100); color:var(--color-amber-600); border-color:var(--color-amber-400); } .badge_l_yellow { background:var(--color-yellow-100); color:var(--color-yellow-600); border-color:var(--color-yellow-400); } .badge_l_lime { background:var(--color-lime-100); color:var(--color-lime-600); border-color:var(--color-lime-400); } .badge_l_green { background:var(--color-green-100); color:var(--color-green-600); border-color:var(--color-green-400); } .badge_l_emerald { background:var(--color-emerald-100); color:var(--color-emerald-600); border-color:var(--color-emerald-400); } .badge_l_teal { background:var(--color-teal-100); color:var(--color-teal-600); border-color:var(--color-teal-400); } .badge_l_cyan { background:var(--color-cyan-100); color:var(--color-cyan-600); border-color:var(--color-cyan-400); } .badge_l_sky { background:var(--color-sky-100); color:var(--color-sky-600); border-color:var(--color-sky-400); } .badge_l_blue { background:var(--color-blue-100); color:var(--color-blue-600); border-color:var(--color-blue-400); } .badge_l_indigo { background:var(--color-indigo-100); color:var(--color-indigo-600); border-color:var(--color-indigo-400); } .badge_l_violet { background:var(--color-violet-100); color:var(--color-violet-600); border-color:var(--color-violet-400); } .badge_l_purple { background:var(--color-purple-100); color:var(--color-purple-600); border-color:var(--color-purple-400); } .badge_l_fuchsia { background:var(--color-fuchsia-100); color:var(--color-fuchsia-600); border-color:var(--color-fuchsia-400); } .badge_l_pink { background:var(--color-pink-100); color:var(--color-pink-600); border-color:var(--color-pink-400); } .badge_l_rose { background:var(--color-rose-100); color:var(--color-rose-600); border-color:var(--color-rose-400); } .badge_l_slate { background:var(--color-slate-100); color:var(--color-slate-600); border-color:var(--color-slate-400); } .badge_l_gray { background:var(--color-gray-100); color:var(--color-gray-600); border-color:var(--color-gray-400); } .badge_l_zinc { background:var(--color-zinc-100); color:var(--color-zinc-600); border-color:var(--color-zinc-400); } .badge_l_neutral { background:var(--color-neutral-100); color:var(--color-neutral-600); border-color:var(--color-neutral-400); } .badge_l_stone { background:var(--color-stone-100); color:var(--color-stone-600); border-color:var(--color-stone-400); } [class*="badge_w_"] { background:var(--color-white); } .badge_w_brand { color:var(--color-brand-800); border-color:var(--color-brand-400); } .badge_w_red { color:var(--color-red-800); border-color:var(--color-red-400); } .badge_w_orange { color:var(--color-orange-800); border-color:var(--color-orange-400); } .badge_w_amber { color:var(--color-amber-800); border-color:var(--color-amber-400); } .badge_w_yellow { color:var(--color-yellow-800); border-color:var(--color-yellow-400); } .badge_w_lime { color:var(--color-lime-800); border-color:var(--color-lime-400); } .badge_w_green { color:var(--color-green-800); border-color:var(--color-green-400); } .badge_w_emerald { color:var(--color-emerald-800); border-color:var(--color-emerald-400); } .badge_w_teal { color:var(--color-teal-800); border-color:var(--color-teal-400); } .badge_w_cyan { color:var(--color-cyan-800); border-color:var(--color-cyan-400); } .badge_w_sky { color:var(--color-sky-800); border-color:var(--color-sky-400); } .badge_w_blue { color:var(--color-blue-800); border-color:var(--color-blue-400); } .badge_w_indigo { color:var(--color-indigo-800); border-color:var(--color-indigo-400); } .badge_w_violet { color:var(--color-violet-800); border-color:var(--color-violet-400); } .badge_w_purple { color:var(--color-purple-800); border-color:var(--color-purple-400); } .badge_w_fuchsia { color:var(--color-fuchsia-800); border-color:var(--color-fuchsia-400); } .badge_w_pink { color:var(--color-pink-800); border-color:var(--color-pink-400); } .badge_w_rose { color:var(--color-rose-800); border-color:var(--color-rose-400); } .badge_w_slate { color:var(--color-slate-800); border-color:var(--color-slate-400); } .badge_w_gray { color:var(--color-gray-800); border-color:var(--color-gray-400); } .badge_w_zinc { color:var(--color-zinc-800); border-color:var(--color-zinc-400); } .badge_w_neutral { color:var(--color-neutral-800); border-color:var(--color-neutral-400); } .badge_w_stone { color:var(--color-stone-800); border-color:var(--color-stone-400); } /* Form Input Textarea Select */ .f_input { position: relative; } .f_input > input, .f_input > textarea, .f_input > select { display: block; width: 100%; line-height:calc(1em + 8px); font-weight:500; border: 1px solid #d1d5db; appearance: none; outline: none; } .f_input > input:focus, .f_input > textarea:focus, .f_input > select:focus { border-color:var(--color-brand-500); box-shadow: none; } .f_input_xs > input, .f_input_xs > select, .f_input_xs > textarea { font-size:10px; padding:2px 8px; border-radius:3px; } .f_input_sm > input, .f_input_sm > select, .f_input_sm > textarea { font-size:10px; padding:4px 10px; border-radius:4px; } .f_input_md > input, .f_input_md > select, .f_input_md > textarea { font-size:12px; padding:5px 12px; border-radius:4px; } .f_input_lg > input, .f_input_lg > select, .f_input_lg > textarea { font-size:12px; padding:10px 16px; border-radius:5px; } .f_input_xl > input, .f_input_xl > select, .f_input_xl > textarea { font-size:14px; padding:10px 18px; border-radius:5px; } .f_input_xs > input, .f_input_xs > select { height:24px; } .f_input_sm > input, .f_input_sm > select { height:28px; } .f_input_md > input, .f_input_md > select { height:32px; } .f_input_lg > input, .f_input_lg > select { height:40px; } .f_input_xl > input, .f_input_xl > select { height:44px; } .f_input_xs > select { padding-right:24px; } .f_input_sm > select { padding-right:28px; } .f_input_md > select { padding-right:32px; } .f_input_lg > select { padding-right:40px; } .f_input_xl > select { padding-right:44px; } .f_input > label { position: absolute; line-height:calc(1em + 8px); font-weight:500; top:0; left:6px; padding:0 4px; color: #6b7280; background:var(--color-white); transform-origin: 0 0; z-index: 10; transition: all 0.25s ease-out; } .f_input_xs > label { font-size:10px; transform:translateY(-6.75px) scale(0.75); } .f_input_sm > label { font-size:10px; transform:translateY(-6.75px) scale(0.75); } .f_input_md > label { font-size:12px; transform:translateY(-7.5px) scale(0.75); } .f_input_lg > label { font-size:12px; transform:translateY(-7.5px) scale(0.75); } .f_input_xl > label { font-size:14px; transform:translateY(-8.25px) scale(0.75); } .f_input > input:placeholder-shown + label, .f_input > select:placeholder-shown + label, .f_input > textarea:placeholder-shown + label { top:50%; transform:translateY(-50%) scale(1); } .f_input > input:focus + label, .f_input > select:focus + label, .f_input > textarea:focus + label, .f_input.f_input_label_fix > input + label, .f_input.f_input_label_fix > select + label, .f_input.f_input_label_fix > textarea + label { top:0; } .f_input > input:focus + label, .f_input > select:focus + label, .f_input > textarea:focus + label { color:var(--color-brand-500); } .f_input_xs > input:focus + label, .f_input_xs > select:focus + label, .f_input_xs > textarea:focus + label, .f_input_xs.f_input_label_fix > input + label, .f_input_xs.f_input_label_fix > select + label, .f_input_xs.f_input_label_fix > textarea + label { transform:translateY(-6.75px) scale(0.75); } .f_input_sm > input:focus + label, .f_input_sm > select:focus + label, .f_input_sm > textarea:focus + label, .f_input_sm.f_input_label_fix > input + label, .f_input_sm.f_input_label_fix > select + label, .f_input_sm.f_input_label_fix > textarea + label { transform:translateY(-6.75px) scale(0.75); } .f_input_md > input:focus + label, .f_input_md > select:focus + label, .f_input_md > textarea:focus + label, .f_input_md.f_input_label_fix > input + label, .f_input_md.f_input_label_fix > select + label, .f_input_md.f_input_label_fix > textarea + label { transform:translateY(-7.5px) scale(0.75); } .f_input_lg > input:focus + label, .f_input_lg > select:focus + label, .f_input_lg > textarea:focus + label, .f_input_lg.f_input_label_fix > input + label, .f_input_lg.f_input_label_fix > select + label, .f_input_lg.f_input_label_fix > textarea + label { transform:translateY(-7.5px) scale(0.75); } .f_input_xl > input:focus + label, .f_input_xl > select:focus + label, .f_input_xl > textarea:focus + label, .f_input_xl.f_input_label_fix > input + label, .f_input_xl.f_input_label_fix > select + label, .f_input_xl.f_input_label_fix > textarea + label { transform:translateY(-8.25px) scale(0.75); } .f_input > input:disabled, .f_input > input:read-only, .f_input > select:disabled, .f_input > textarea:disabled, .f_input > textarea:read-only { background-color: #f3f4f6 !important; border: 1px solid #d1d5db !important; color: #111827 !important; cursor: not-allowed !important; } .f_input > input:disabled:focus, .f_input > input:read-only:focus, .f_input > select:disabled:focus, .f_input > textarea:disabled:focus, .f_input > textarea:read-only:focus { outline: none !important; border-color: #3b82f6 !important; box-shadow: 0 0 0 1px #3b82f6 !important; } .f_input > input:required + label::after, .f_input > select:required + label::after, .f_input > textarea:required + label::after { content: ' *'; color:var(--color-red-600); } .f_input > .f_input_unit { position:absolute; right:0; top:50%; transform:translateY(-50%); line-height:calc(1em + 8px); font-weight:600; color:#888; } .f_input_xs > .f_input_unit { font-size:10px; padding:2px 8px; padding-left:2px; } .f_input_sm > .f_input_unit { font-size:10px; padding:4px 10px; padding-left:2px; } .f_input_md > .f_input_unit { font-size:12px; padding:5px 12px; padding-left:3px; } .f_input_lg > .f_input_unit { font-size:12px; padding:10px 16px; padding-left:3px; } .f_input_xl > .f_input_unit { font-size:14px; padding:10px 18px; padding-left:4px; } .f_input_label_none > label { display:none; } .f_input > input[datepicker] { background:var(--color-white); cursor: pointer; } .f_input > input[datepicker]:read-only { background-color: var(--color-white) !important; cursor: pointer !important; } /* Form Checkbox */ .f_chk { display:inline-flex; vertical-align:middle; align-items: center; } .f_chk input[type="checkbox"] { background-color: #f3f4f6; border: 1px solid #d1d5db; border-radius: 2px; color: var(--color-brand-500); appearance: none; -webkit-appearance: none; -moz-appearance: none; display: inline-block; vertical-align: middle; cursor: pointer; } .f_chk input[type="checkbox"]:checked { background-color: var(--color-brand-500); border-color: var(--color-brand-500); } .f_chk input[type="checkbox"]:focus { outline: none; box-shadow: 0 0 0 2px var(--color-brand-500); } .f_chk label { line-height:calc(1em + 8px); font-weight:600; color: #111827; } .f_chk input[type="checkbox"]:disabled { background-color: #f9fafb; border-color: #d1d5db; cursor: not-allowed; } .f_chk input[type="checkbox"]:disabled + label { color:var(--color-gray-300); } .f_chk_xs { height:24px; } .f_chk_sm { height:28px; } .f_chk_md { height:32px; } .f_chk_lg { height:40px; } .f_chk_xl { height:44px; } .f_chk_xs input[type="checkbox"] { width: 12px; height: 12px; } .f_chk_sm input[type="checkbox"] { width: 14px; height: 14px; } .f_chk_md input[type="checkbox"] { width: 16px; height: 16px; } .f_chk_lg input[type="checkbox"] { width: 20px; height: 20px; } .f_chk_xl input[type="checkbox"] { width: 24px; height: 24px; } .f_chk_xs input[type="checkbox"]:checked { background-size:6px; } .f_chk_sm input[type="checkbox"]:checked { background-size:7px; } .f_chk_md input[type="checkbox"]:checked { background-size:9px; } .f_chk_lg input[type="checkbox"]:checked { background-size:11px; } .f_chk_xl input[type="checkbox"]:checked { background-size:13px; } .f_chk_xs label { font-size:10px; margin-left:6px; } .f_chk_sm label { font-size:10px; margin-left:6px; } .f_chk_md label { font-size:12px; margin-left:7px; } .f_chk_lg label { font-size:12px; margin-left:7px; } .f_chk_xl label { font-size:14px; margin-left:8px; } .f_chk_label_none label { display:none !important; } /* Form Radio */ .f_rdo { display: inline-flex; vertical-align: middle; align-items: center; } .f_rdo input[type="radio"] { position:relative; background-color: #f3f4f6; border: 1px solid #d1d5db; border-radius: 50%; color: var(--color-brand-500); appearance: none; -webkit-appearance: none; -moz-appearance: none; display: inline-block; vertical-align: middle; cursor: pointer; position: relative; } .f_rdo input[type="radio"]:checked { background:var(--color-brand-500); } .f_rdo input[type="radio"]:checked::before { content: ''; position: absolute; border-radius: 50%; background:var(--color-white); transform:translate(-50%, -50%); position:absolute; left:50%; top:50%; } .f_rdo input[type="radio"]:focus { outline: none; box-shadow: 0 0 0 2px var(--color-brand-500); } .f_rdo label { line-height: calc(1em + 8px); font-weight: 600; color: #111827; } .f_rdo input[type="radio"]:disabled { background-color: #f9fafb; border-color: #d1d5db; cursor: not-allowed; } .f_rdo input[type="radio"]:disabled + label { color:var(--color-gray-300); } .f_rdo_xs { height:24px; } .f_rdo_sm { height:28px; } .f_rdo_md { height:32px; } .f_rdo_lg { height:40px; } .f_rdo_xl { height:44px; } .f_rdo_xs input[type="radio"] { width: 12px; height: 12px; } .f_rdo_sm input[type="radio"] { width: 14px; height: 14px; } .f_rdo_md input[type="radio"] { width: 16px; height: 16px; } .f_rdo_lg input[type="radio"] { width: 20px; height: 20px; } .f_rdo_xl input[type="radio"] { width: 24px; height: 24px; } .f_rdo_xs input[type="radio"]:checked::before { width: 4px; height: 4px; } .f_rdo_sm input[type="radio"]:checked::before { width: 5px; height: 5px; } .f_rdo_md input[type="radio"]:checked::before { width: 6px; height: 6px; } .f_rdo_lg input[type="radio"]:checked::before { width: 8px; height: 8px; } .f_rdo_xl input[type="radio"]:checked::before { width: 9px; height: 9px; } .f_rdo_xs label { font-size:10px; margin-left:6px; } .f_rdo_sm label { font-size:10px; margin-left:6px; } .f_rdo_md label { font-size:12px; margin-left:7px; } .f_rdo_lg label { font-size:12px; margin-left:7px; } .f_rdo_xl label { font-size:14px; margin-left:8px; } /* Form Toggle */ .f_tgl { display: inline-flex; vertical-align:middle; align-items: center; cursor: pointer; } .f_tgl input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .f_tgl .f_tgl_switch { display:inline-block; vertical-align:middle; position: relative; background-color: #e5e7eb; border-radius: 9999px; transition: background-color 0.2s; } .f_tgl input:focus + .f_tgl_switch { outline: none; box-shadow: 0 0 0 4px #93c5fd; } .f_tgl .f_tgl_switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background-color: white; border: 1px solid #d1d5db; border-radius: 9999px; transition: all 0.2s ease-in-out; } .f_tgl input:checked + .f_tgl_switch::after { transform: translateX(100%); border-color: white; } html[dir="rtl"] .f_tgl input:checked + .f_tgl_switch::after { transform: translateX(-100%); } .f_tgl input:checked + .f_tgl_switch { background-color:var(--color-brand-500); } .f_tgl span { display:inline-block; vertical-align:middle; font-weight: 600; color: #111827; } .f_tgl input:disabled + div + span { color:var(--color-gray-300); } .f_tgl_xs { height:24px; } .f_tgl_sm { height:28px; } .f_tgl_md { height:32px; } .f_tgl_lg { height:40px; } .f_tgl_xl { height:44px; } .f_tgl_xs .f_tgl_switch { width:36px; height:20px; } .f_tgl_sm .f_tgl_switch { width:40px; height:22px; } .f_tgl_md .f_tgl_switch { width:44px; height:24px; } .f_tgl_lg .f_tgl_switch { width:52px; height:28px; } .f_tgl_xl .f_tgl_switch { width:60px; height:32px; } .f_tgl_xs .f_tgl_switch::after { width:16px; height:16px; } .f_tgl_sm .f_tgl_switch::after { width:18px; height:18px; } .f_tgl_md .f_tgl_switch::after { width:20px; height:20px; } .f_tgl_lg .f_tgl_switch::after { width:24px; height:24px; } .f_tgl_xl .f_tgl_switch::after { width:28px; height:28px; } .f_tgl_xs > span { font-size:10px; margin-left:6px; } .f_tgl_sm > span { font-size:10px; margin-left:6px; } .f_tgl_md > span { font-size:12px; margin-left:7px; } .f_tgl_lg > span { font-size:12px; margin-left:7px; } .f_tgl_xl > span { font-size:14px; margin-left:8px; } .f_tgl input:checked + .btn { background:var(--color-brand-500); border-color:transparent; } .f_tgl input:checked + .btn > span { color:var(--color-white) } .f_tgl input:disabled + .btn { background:var(--color-gray-300) !important; border-color:transparent !important; } .f_tgl input:disabled + .btn:hover { opacity:1; } .f_tgl input:disabled + .btn:active { opacity:1; } .f_tgl input:disabled + .btn > i, .f_tgl input:disabled + .btn > span { color:var(--color-white) !important; } /* file drop */ .f_file_drop .ffd_drop { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align:center; width: 100%; height: 16rem; border-width: 2px; border-style: dashed; border-radius: 0.5rem; cursor: pointer; background-color: #f9fafb; border-color: #d1d5db; transition: background-color 0.3s, border-color 0.3s; } .f_file_drop .ffd_drop:hover { background-color: #f3f4f6; } .f_file_drop .ffd_drop .ms_o { width:32px; text-align:center; font-size:32px; line-height:1; color: #6b7280; } .f_file_drop .ffd_drop p { margin-bottom: 8px; font-size: 14px; line-height:22px; color: #6b7280; } .f_file_drop .ffd_drop p span { font-weight: 600; } .f_file_drop .ffd_drop p:last-child { font-size:12px; line-height:20px; margin-bottom: 0; } .ffd_list .no_list { display:flex; justify-content: center; align-items: center; height:160px; font-size:10px; line-height:18px; font-weight:500; color:var(--color-gray-400); } .ffd_list { margin-top:8px; } .ffd_list ul ~ ul { margin-top:8px; } .ffd_list ul > li ~ li { margin-top:8px; } .ffd_list ul > li > div { display:flex; align-items:center; border:1px solid var(--color-gray-100); border-radius:8px; padding:12px; } .ffd_list ul > li > div > div:nth-child(1) { display:flex; align-items: center; padding-right:8px; } .ffd_list ul > li > div > div:nth-child(1) i { width:32px; height:32px; text-align:center; font-size:28px; line-height:32px; color:var(--color-gray-600); } .ffd_list ul > li > div > div:nth-child(2) { flex:1 } .ffd_list ul > li > div > div:nth-child(2) * { display:block; } .ffd_list ul > li > div > div:nth-child(2) strong { font-size:12px; line-height:18px; font-weight:500; color:var(--color-gray-800) } .ffd_list ul > li > div > div:nth-child(2) span { font-size:10px; line-height:16px; color:var(--color-gray-400) } /* Tooltip */ .tooltip { position: absolute; z-index: 10; visibility: hidden; display: inline-block; max-width: 280px; font-size: 11px; line-height:15px; color:var(--color-gray-300); border-radius:6px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); opacity: 0; transition: opacity 300ms ease; border:0; background:var(--color-gray-800); padding:8px 12px; } .tooltip.opacity-100.visible { opacity:1; visibility: visible; } .tooltip [data-popper-arrow]::before, .tooltip [data-popper-arrow]::after, .tooltip [data-popper-arrow] { border:0 !important; } .guide_tooltip { position: absolute; top: 310px; left: 230px; z-index: 30; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); } .tooltip_content { background-color: #333; color: #fff; padding:8px 12px; padding-right:8px; border-radius:6px; display: flex; align-items: center; font-size: 10px; } .tooltip_content > i.ms_o { font-size:16px; color: #FFD700; } .tooltip_content > span { flex:1; padding:0 8px 0 4px; } .tooltip_content button { width:20px; height:20px; display:flex; justify-content: center; align-items:center; background: none; border: none; color: #999; cursor: pointer; } .tooltip_content button:hover { color: #fff; } .tooltip_content button > i { font-size:16px; color:var(--color-gray-400); } .tooltip_arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #333; position: absolute; top: -4px; left: 12px; } /* info */ [class^="info_"] { display:inline-flex; vertical-align:middle; } [class^="info_"] > i { line-height:calc(1em + 8px); color:#888; } .info_xs > i { font-size:12px; } .info_sm > i { font-size:14px; } .info_md > i { font-size:14px; } .info_lg > i { font-size:16px; } .info_xl > i { font-size:16px; } /* Modal */ .modal { position: fixed; top: 0; right: 0; left: 0; z-index: 50; display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100%); max-height: 100%; overflow-x: hidden; overflow-y: auto; visibility: hidden; background:rgba(0,0,0,0.64); } .modal[aria-hidden="true"] { display: none; } .modal[aria-modal="true"] { visibility: visible; } .modal > div { position: relative; padding: 16px; width: 100%; max-height: 100%; } .modal_xs > div { max-width:320px; } .modal_sm > div { max-width:640px; } .modal_md > div { max-width:960px; } .modal_lg > div { max-width:1180px; } .modal_xl > div { max-width:1400px; } .modal > div > div { position: relative; background-color: #ffffff; border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); display:flex; flex-direction:column; max-height:calc(100dvh - 32px); } .modal .m_btn_close { display:flex; justify-content:center; align-items:center; position:absolute; right:0; top:0; width:32px; height:32px; border-radius:50%; margin:16px; background:rgba(0,0,0,0.1); } .modal .m_btn_close i { font-size:16px; color:var(--color-gray-600) } .modal .m-t { width:100%; padding: 24px; } .modal .m-b { width:100%; padding: 24px; text-align:center; font-size:0; line-height:0; } .modal .m-b > * { margin:0 2px; } .modal .m-c { padding:0 24px 24px; overflow-y:auto; } .modal .m_title { font-size:18px; line-height:26px; font-weight:800; color:var(--color-gray-800); letter-spacing:-0.025em; } .modal_alert { visibility: visible; } .modal_alert > div { width:320px; } .modal_alert .a_t { width:100%; padding: 40px 16px 32px; } .modal_alert .a_b { width:100%; padding: 16px; padding-top:0; text-align:center; font-size:0; line-height:0; } .modal_alert .a_b > * { margin:0 2px; } .modal_image > div { max-width:640px; } .modal_image > div > div { border-radius:12px; overflow:hidden; } .modal_image > div > div::before { display:block; content:''; position:absolute; left:0; bottom:0; right:0; height:50%; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%); } .modal_image .mi_btn_close { position:absolute; right:0; top:0; display:flex; justify-content:center; align-items:center; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,0.5); margin:16px; z-index:5; } .modal_image .mi_btn_close > i { font-size:16px; color:var(--color-white); } .modal .mc_total { font-size:10px; line-height:18px; font-weight:500; color:var(--color-gray-600); } .modal .mc_total strong { color:var(--color-brand-500); padding:0 2px; } .modal_notice > div { max-width:640px; } .modal_notice .m-c { overflow-x:hidden; } .modal_notice .mn_slide_wrap .btn_prev, .modal_notice .mn_slide_wrap .btn_next { position:absolute; top:50%; transform:translateY(-50%); } .modal_notice .mn_slide_wrap .btn_prev { left:12px; } .modal_notice .mn_slide_wrap .btn_next { right:12px; } .modal_notice .mn_slide { overflow:hidden; } .modal_notice .mn_slide .sw_l { width:100%; vertical-align:top; } .modal_notice .mn_slide .sw_l * { font-size:14px; line-height:22px; white-space: normal; word-break: break-all; overflow-wrap: anywhere; white-space: normal; } .modal_notice .mn_slide img { max-width:100% !important; } /* .toast-box { position: relative; } */ .layer-toast { position:fixed; z-index:900; display: flex; flex-direction: column; gap:8px; pointer-events: none; } .layer-toast.top-left { top: 24px; left: 24px; align-items: flex-start; } .layer-toast.top-center { top: 24px; left: 50%; transform: translateX(-50%); align-items: center; } .layer-toast.top-right { top: 24px; right: 24px; align-items: flex-end; } .layer-toast.bottom-left { bottom: 24px; left: 24px; align-items: flex-start; } .layer-toast.bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); align-items: center; } .layer-toast.bottom-right { bottom: 24px; right: 24px; align-items: flex-end; } .toast { font-size:0; line-height:0; display:flex; justify-content:space-between; align-items:center; padding:8px; border:1px solid transparent; border-radius:12px; box-shadow: 0 4px 32px rgba(0,0,0,0.12); min-width:240px; pointer-events: auto; } /* opacity: 0; transform: translateY(24px); animation: fadeIn 0.25s ease-out forwards, fadeOut 0.25s ease-in forwards; */ .toast .t-icon { display:flex; justify-content:center; align-items:center; width:28px; height:28px; background:rgba(255,255,255,0.64); border-radius:8px; } .toast .t-icon .ms_o { font-size:20px; } .toast .t-c { flex:1; text-align:left; padding:0 12px; display:flex; align-items:center; } .toast .t-c > * { display:block; } .toast .t-title { font-size:10px; line-height:18px; font-weight:500; } .toast .t-descript { font-size:12px; line-height:20px; flex:1; } .toast .t-close { margin:0; padding:0; border:0; background:0; display:flex; justify-content:center; align-items:center; width:24px; height:24px; opacity:0.32; } .toast .t-close .ms_o { font-size:16px; } .toast.success { background-color:var(--color-green-100); color:var(--color-green-800); } .toast.success .t-icon { color:var(--color-green-400) } .toast.success .t-close { color:var(--color-green-800) } .toast.error { background-color:var(--color-red-100); color:var(--color-red-800); } .toast.error .t-icon { color:var(--color-red-400) } .toast.error .t-close { color:var(--color-red-800) } .toast.warning { background-color:var(--color-orange-100); color:var(--color-orange-800); } .toast.warning .t-icon { color:var(--color-orange-400) } .toast.warning .t-close { color:var(--color-orange-800) } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } @keyframes fadeOut { to { opacity: 0; transform: translateY(-12%); } } /* status check */ .s_check { position:absolute; left:0; top:0; width:100%; height:0; overflow:hidden; } /* slide default */ .s_w { white-space:nowrap; font-size:0; line-height:0; text-align:left; } .s_w .sw_l { display:inline-block; font-size:16px; line-height:24px; } /* slide gauge */ .s_g { position:relative; height:4px; background:rgba(0,0,0,0.24); } .s_g > i { display:block; position:absolute; left:0; top:0; width:0; height:100%; background:red; } /* slide fade */ .swiper-fade { position:relative; } .swiper-fade .sw_l { opacity:0 !important; transition:opacity 0.25s ease-out; } .swiper-fade .sw_l.swiper-slide-active { opacity:1 !important; } .swiper-fade .swiper-notification { display:none; } /* tab - common, access */ .tab_common .tab_content { display:none; } .tab_common .tab_content.on { display:block; } .tab_access .tab_box .tab_content, .tab_access .tab_box .btn_more { display:none; } .tab_access .tab_box.on .tab_content, .tab_access .tab_box.on .btn_more { display:block; } .tab_multiple .tl_B, .tab_multiple .tc_A, .tab_multiple .tc_B { display:none; } .tab_multiple .tl_B.on, .tab_multiple .tc_A.on, .tab_multiple .tc_B.on { display:block; } .tab_scrl .s_w .sw_l { width:auto !important; } /* Datatable Static */ .datatable_static { position: relative; overflow-x: auto; width: 100%; font-size: 14px; color: #6b7280; text-align: left; } .datatable_static table { min-width:100%; table-layout: fixed; } .datatable_static thead { font-size: 12px; text-transform: uppercase; background-color: #f9fafb; color: #374151; } .datatable_static thead th { padding: 12px 24px; } .datatable_static tbody tr { background-color: #ffffff; border-bottom: 1px solid #e5e7eb; transition: background-color 0.2s ease; } .datatable_static tbody tr:hover { background-color: #f9fafb; } .datatable_static tbody th, .datatable_static tbody td { padding:16px 24px; } /* Skeleton */ .skeleton { position: relative; display: inline-block; background-color: #e5e7eb; overflow: hidden; } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background-image: linear-gradient(90deg,transparent,rgba(255, 255, 255, 0.4),transparent); animation: skeleton-shimmer 1.5s infinite; } @keyframes skeleton-shimmer { 100% { transform: translateX(100%); } } /* image loader */ .img_loader { position: relative; } .img_loader.img_loader_11 { aspect-ratio: 1/1; } .img_loader.img_loader_43 { aspect-ratio: 4/3;; } .img_loader.img_loader_169 { aspect-ratio: 16/9; } .img_loader img, .img_loader .skeleton { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; } .img_loader img.loaded + .skeleton { display: none; } /* pagination */ .pagination { font-size:0; line-height:0; width:100%; text-align:center; } .pagination > button { display:inline-flex; vertical-align:middle; width:32px; height:32px; border-radius:4px; justify-content:center; align-items:center; text-align:center; margin:0 1px; } .pagination > button:hover { background:var(--color-gray-100); } .pagination > button.on { background:var(--color-gray-600); } .pagination > button > span { font-size:12px; line-height:20px; font-weight:600; color:var(--color-gray-500) } .pagination > button.on > span { color:var(--color-white); } .pagination > button > i { font-size:20px; line-height:1; color:var(--color-gray-500) } .pagination > button.p_first > i, .pagination > button.p_last > i { font-size:22px; line-height:1; } /* layout */ body { overflow:hidden; overflow-x:auto; } .wrap { position:relative; height:100dvh; min-width:1280px; min-height:768px; } .wrap_btn_tgl { display:flex; justify-content:center; align-items:center; position:absolute; top:27px; left:182px; transform:rotate(180deg); width:21px; height:21px; border-radius:50%; background:var(--color-white); border:1px solid var(--color-gray-200); transition:left 0.25s ease-out, transform 0.25s ease-out; z-index:10; } .wrap_btn_tgl i { width:13px; font-size:13px; text-align:center; } .wrap.wrap_collapse .wrap_btn_tgl { left:54px; transform:rotate(0); } .l_l.scroll-wrapper { position:absolute !important; background:#fff; width:193px; transition:width 0.25s ease-out; border-right:1px solid var(--color-gray-200); z-index:5; } .l_l.scroll-wrapper * { box-sizing:border-box !important; } .l_l.scroll-content { height:100dvh !important; max-height:none !important; padding:16px 0; overflow:hidden; overflow-y:auto; display:flex; flex-direction:column; } .l_l.scroll-content .ll_c { flex:1; } .l_l.scroll-content .ll_b { padding-top:32px; } .wrap.wrap_collapse .l_l.scroll-wrapper { width:65px; } .l_l.scroll-wrapper .scroll-element { display:none; } .l_r { display:flex; flex-direction: column; width:100%; height:100dvh; padding-left:193px; transition:padding 0.25s ease-out; } /* overflow-y:auto; */ .l_r .sub_bottom { flex:1; overflow-y:auto; } .wrap.wrap_collapse .l_r { padding-left:65px; } /* header */ .h_logo, .h_logo > a { display:block } .h_logo { padding:12px 24px; } .h_logo > a { background:url(../image/common/logo.png) no-repeat center left / auto 100%; height:20px; } .h_lnb { padding:0 12px; } .h_lnb > div { padding:4px 0; } .h_lnb h2 { font-size:10px; line-height:18px; font-weight:500; color:var(--color-gray-300); padding:4px 12px; } .h_lnb ul > li > a, .h_lnb ul > li > button { display:flex; justify-content:flex-start; align-items:center; padding:8px 12px; width:100%; border-radius:8px; } .h_lnb ul > li > a:hover, .h_lnb ul > li > button:hover { background:var(--color-gray-100); } .h_lnb ul > li.on > a, .h_lnb ul > li.on > button { background:var(--color-brand-50); } .h_lnb ul > li > a > i, .h_lnb ul > li > button > i { color:var(--color-gray-500); width:22px; font-size:22px; text-align:center; margin-right:8px; } .h_lnb ul > li > a > span, .h_lnb ul > li > button > span { font-size:14px; line-height:22px; font-weight:500; color:var(--color-gray-500); } .h_lnb ul > li.on > a > i, .h_lnb ul > li.on > a > span, .h_lnb ul > li.on > button > i, .h_lnb ul > li.on > button > span { color:var(--color-brand-500); } .h_select_space { position:relative; padding:8px 12px; margin-top:8px; } .h_select_space > button { display:flex; justify-content: flex-start; align-items: center; border-radius:8px; padding:8px 12px; width: 100%; } .h_select_space > button:hover { background:var(--color-gray-100); } .h_select_space > button > em { width:22px; height:22px; margin-right:8px; } .h_select_space.h_select_space_work > button > em { background:url(../image/common/logo-2.png) no-repeat center center / auto 100% } .h_select_space.h_select_space_share > button > em { background:url(../image/common/logo-1.png) no-repeat center center / auto 100% } .h_select_space > button > span { flex:1; font-size:14px; line-height:22px; font-weight:500; color:var(--color-gray-800); text-align:left; } .h_select_space.h_select_space_work > button .txt_share { display:none; } .h_select_space.h_select_space_share > button .txt_work { display:none; } .h_select_space > button > i { width:16px; font-size:16px; text-align:center; color:var(--color-gray-400); } .h_select_space > div { display:none; position:absolute; left:7px; top:100%; margin-top:-4px; background:#fff; border:1px solid var(--color-gray-200); border-radius:8px; padding:4px; box-shadow:0 4px 16px rgba(0,0,0,0.08); } .h_select_space.open > div { display:block; width:calc(100% - 14px); } .h_select_space ul > li ~ li { margin-top:4px; } .h_select_space ul > li > button { display:flex; justify-content: flex-start; align-items: center; border-radius:4px; padding:8px 12px; width: 100%; } .h_select_space ul > li > button:hover { background:var(--color-gray-100); } .h_select_space ul > li > button > em { width:22px; height:22px; margin-right:8px; } .h_select_space ul > li.css_work > button > em { background:url(../image/common/logo-2.png) no-repeat center center / auto 100% } .h_select_space ul > li.css_share > button > em { background:url(../image/common/logo-1.png) no-repeat center center / auto 100% } .h_select_space ul > li > button > span { flex:1; font-size:14px; line-height:22px; font-weight:500; color:var(--color-gray-800); text-align:left; } .h_log { padding:0 16px; } .h_user { padding:0 16px; } .h_user button { display:flex; justify-content:flex-start; align-items:center; text-align:left; } .h_user button i { display:block; width:44px; height:44px; border-radius:50%; background:#ddd; overflow:hidden; } .h_user button i > img { display:block; object-fit:cover; } .h_user button > div:last-child { padding-left:10px; } .h_user button span { display:block; font-size:12px; line-height:16px; font-weight:500; color:var(--color-black); } .h_user button em { display:block; font-style:normal; font-size:10px; line-height:12px; font-weight:500; color:var(--color-gray-400); word-break: break-all; overflow-wrap: anywhere; white-space: normal; padding:2px 0; } .wrap_collapse .h_logo { padding:8px 4px; } .wrap_collapse .h_logo > a { background:url(../image/common/logo_s.png) no-repeat center center / auto 100%; height:28px; } .wrap_collapse .h_lnb { padding:0 4px; } .wrap_collapse .h_lnb > div { padding:0; } .wrap_collapse .h_lnb h2 { display:none; } .wrap_collapse .h_lnb ul > li > button, .wrap_collapse .h_lnb ul > li > a { flex-direction: column; padding:4px 2px 8px; height:56px; } .wrap_collapse .h_lnb ul > li > button > i, .wrap_collapse .h_lnb ul > li > a > i { margin:0; height:30px; line-height:30px; } .wrap_collapse .h_lnb ul > li > button > span, .wrap_collapse .h_lnb ul > li > a > span { font-size:8.5px; line-height:14px } .wrap_collapse .h_select_space { padding:8px 4px; margin-top:0; } .wrap_collapse .h_select_space > button { padding:4px 4px 4px 8px; height:56px; } .wrap_collapse .h_select_space > button > em { flex:1; margin-right:0; } .wrap_collapse .h_select_space > button > span { display:none; } .wrap_collapse .h_select_space ul > li > button { height:40px; padding:0; justify-content:center; align-items:center; } .wrap_collapse .h_select_space ul > li > button > em { margin-right:0; } .wrap_collapse .h_select_space ul > li > button > span { display:none; } .wrap_collapse .h_log { padding:0 4px; text-align:center; height:44px; } .wrap_collapse .h_log .btn_lg { width:44px !important; height:44px; border-radius:50%; } .wrap_collapse .h_log .btn i { margin-right:0 !important; } .wrap_collapse .h_log .btn span { display:none; } .wrap_collapse .h_user { padding:0 4px; text-align:center; height:44px; } .wrap_collapse .h_user button { display:inline-flex; } .wrap_collapse .h_user button > div:last-child { display:none; } /* user info */ .user_info .ui_t { text-align:center; } .user_info .ui_avatar { display:inline-block; width:64px; height:64px; border-radius:50%; overflow:hidden; } .user_info .ui_avatar > img { display:block; object-fit:cover; } .user_info .ui_belongto { margin-top:4px; } .user_info .ui_belongto > div { display:inline-block; font-size:10px; line-height:18px; color:var(--color-gray-400); } .user_info .ui_name, .user_info .ui_email { display:block; } .user_info .ui_name { font-size:17px; line-height:25px; font-weight:800; color:var(--color-gray-800); margin-top:6px; } .user_info .ui_email { font-size:13px; line-height:21px; color:var(--color-gray-400); margin-top:6px; } /* .user_info .ui_belong { background:var(--color-gray-100); border-radius:8px; padding:8px 24px; margin-top:48px; } .user_info .ui_belong > ul > li { padding:12px 0; } .user_info .ui_belong > ul > li ~ li { border-top:1px dashed var(--color-gray-200) } .user_info .ui_belong > ul > li > div { display:flex; justify-content: flex-start; align-items: center; font-size:11px; line-height:19px; } .user_info .ui_belong > ul > li > div > span { width:64px; color:var(--color-gray-800); } .user_info .ui_belong > ul > li > div > strong { color:var(--color-blue-600); font-weight:500; } .user_info .uib_banner { display:block; border-radius:8px; overflow: hidden; } */ .user_info .ui_banner { border-radius:8px; margin-top:32px; overflow: hidden; } /* sub top */ .sub_top { padding:10px 24px; border-bottom:1px solid var(--color-gray-200); font-size:0; line-height:0; } .sub_top .st_t { padding:10px 0px; } .sub_top .st_t > div:nth-child(1) > * { margin-right:16px; } .sub_top .st_t > div:nth-child(1) > *:last-child { margin-right:0; } .sub_top .st_t > div:nth-child(2) > * { margin-left:16px; } .sub_top .st_t > div:nth-child(2) > *:first-child(1) { margin-left:0; } .sub_top .st_t > div > * { display:inline-flex; vertical-align:middle; } .sub_top .st_tit { position:relative; } .sub_top .st_tit .st_navi { position:absolute; left:0; bottom:100%; white-space:nowrap; } .sub_top .st_tit .st_navi > * { margin-right:4px; } .sub_top .st_tit .st_navi .badge { padding-left:6px; padding-right:6px; } .sub_top .st_tit .st_class { display:inline-flex; vertical-align:middle; align-items: center; } .sub_top .st_tit .st_class > * { display:inline-flex; vertical-align:middle; font-size:9px; line-height:1; font-weight:600; } .sub_top .st_tit .st_class > * ~ * { margin-left:4px; } .sub_top .st_tit .st_title { display:inline-flex; vertical-align:middle; font-size:22px; line-height:30px; font-weight:800; color:var(--color-gray-800); letter-spacing:-0.025em; margin-right:8px; } .sub_top .st_btn_back { justify-content:center; align-items:center; width:28px; height:28px; border-radius:50%; background:var(--color-gray-200); } .sub_top .st_btn_back .ms_o { font-size:18px; } .sub_top .st_more .tgl_box { margin-top:4px; } .sub_top .st_more .tgl_box .btn { justify-content: flex-start; } .sub_top .st_more .tgl_box .btn ~ .btn { margin-top:4px; } .sub_top .st_more .tgl_box .btn span { white-space: nowrap; } .sub_top .st_badge .badge ~ .badge { margin-left:4px; } .sub_top .st_btn > * ~ * { margin-left:4px; } .sub_top .st_tab { margin:-10px 0; } .sub_top .st_tab > ul > li { position:relative; display:inline-flex; vertical-align: middle; padding:10px 0; margin-right:24px; } .sub_top .st_tab > ul > li.on::after { display:block; content:''; position:absolute; bottom:0; width:100%; height:2px; margin-bottom:-1px; background:var(--color-gray-800); } .sub_top .st_tab > ul > li > button { padding:10px 0; } .sub_top .st_tab > ul > li > button > span { font-size:13px; line-height:21px; font-weight:600; color:var(--color-gray-400); transition:color 0.25s ease-out; } .sub_top .st_tab > ul > li > button:hover > span, .sub_top .st_tab > ul > li.on > button > span { color:var(--color-gray-800); } /* tab */ [class^="tab_01_"] { background:var(--color-brand-100); padding:4px; } [class^="tab_01_"] > div { display:flex; justify-content:start; align-items:center; } [class^="tab_01_"] button { display:flex; justify-content:center; align-items:center; transition:all 0.25s ease-out; color:var(--color-brand-300); } [class^="tab_01_"] button ~ button { margin-left:4px; } [class^="tab_01_"] button:hover { color:var(--color-brand-500); } [class^="tab_01_"] button.on { background:var(--color-white); color:var(--color-brand-500); } [class^="tab_01_"] button > i { width:14px; font-size:14px; margin-right:4px; text-align:center; } [class^="tab_01_"] button > span { font-size:10px; font-weight:600; } .tab_01_sm { height:28px; border-radius:4px; } .tab_01_sm button { height:20px; border-radius:2px; padding:0 6px; } .tab_01_md { height:32px; border-radius:8px; } .tab_01_md button { height:24px; border-radius:4px; padding:0 8px; } .tab_01_lg { height:40px; border-radius:10px; } .tab_01_lg button { height:32px; border-radius:6px; padding:0 10px; } /* step */ .step_01 > ol > li { position:relative; display:inline-flex; vertical-align:middle; } .step_01 > ol > li ~ li { padding-left:32px; } .step_01 > ol > li ~ li::before { display:block; content:''; width:24px; height:1px; background:var(--color-gray-300); position:absolute; left:16px; top:50%; transform:translate(-50%, -50%); } .step_01 > ol > li > div > * { display:inline-block; vertical-align:middle; text-align:center; } .step_01 > ol > li > div > em { width:20px; height:20px; border-radius:50%; background:var(--color-gray-300); color:var(--color-white); font-size:10px; line-height:20px; font-style:normal; } .step_01 > ol > li.ing > div > em { background:var(--color-green-500); } .step_01 > ol > li.complete > div > em { background:var(--color-gray-900); } .step_01 > ol > li > div > i { display:none; width:20px; height:20px; border-radius:50%; background:var(--color-green-500); color:var(--color-white); font-size:14px; line-height:20px; font-style:normal; } .step_01 > ol > li.complete > div > em { display:none; } .step_01 > ol > li.complete > div > i { display:inline-block; background:var(--color-gray-900); } .step_01 > ol > li > div > div { display:inline-flex; vertical-align:middle; text-align:left; flex-direction:column; align-items:center; padding-left:8px; } .step_01 > ol > li > div > div > span { display:block; width:100%; font-size:13px; line-height:1; font-weight:800; color:var(--color-gray-300); } .step_01 > ol > li.ing > div > div > span { color:var(--color-green-500); } .step_01 > ol > li.complete > div > div > span { color:var(--color-gray-900); } .step_01 > ol > li > div > div > strong { display:block; width:100%; font-size:9px; line-height:1; margin-top:4px; font-weight:600; color:var(--color-red-500); } .step_01 > ol > li.step4.ing > div > em { background:var(--color-red-500); } .step_01 > ol > li.step4 > div > i { background:var(--color-red-500); } .step_01 > ol > li.step4.ing > div > div > span, .step_01 > ol > li.step4.complete > div > div > span { color:var(--color-red-500); } /* list area */ .list_area { display:flex; flex-direction: column; height:100%; } .list_area .la_t { padding:8px 24px; border-bottom:1px solid var(--color-gray-100); font-size:0; line-height:0; } .list_area .la_b { flex:1; display:flex; width:100%; max-width:100%; } .list_area .la_b .lab_l { border-right:1px solid var(--color-gray-100); width:288px; } .list_area .la_b .lab_r { width:100%; max-width:100%; } .list_area .la_b .lab_l + .lab_r { max-width:calc(100% - 289px); } .list_area .la_search > div { padding:8px 0; display:inline-flex; vertical-align:middle; margin-right:8px; } .list_area .la_action { padding:8px 0; min-height:44px; } .list_area .la_action > div > * { display:inline-flex; vertical-align:middle; } .list_area .la_action > div:first-child > * { margin-right:8px; } .list_area .la_action > div:first-child > *:last-child { margin-right:0; } .list_area .la_action > div:last-child > * { margin-left:8px; } .list_area .la_action > div:last-child > *:first-child { margin-left:0; } .list_area .la_action .laa_condition > * ~ * { margin-left:4px; } .list_area .la_action .laa_total { font-size:10px; line-height:18px; font-weight:500; color:var(--color-gray-600); } .list_area .la_action .laa_total strong { color:var(--color-brand-500); padding:0 2px; } .list_area .la_action .laa_more .laam_filter .tgl_box { padding:10px 16px 16px; width:192px; margin-top:4px; } .list_area .la_action .laa_more .laam_filter .laamf_t > div { display:inline-flex; vertical-align:middle; margin-right:16px; } .list_area .la_action .laa_more .laam_filter .laamf_t > div > * { white-space:nowrap; } .list_area .la_action .laa_more .laam_filter .laamf_b { margin-top:8px; } .la_t_modal { font-size:0; line-height:0; padding:8px 0; } .la_t_modal .la_search > div { padding:8px 0; display:inline-flex; vertical-align:middle; margin-right:8px; } .la_t_modal .la_action { padding:8px 0; } .la_t_modal .la_action > div > * { display:inline-flex; vertical-align:middle; } .la_t_modal .la_action > div:first-child > * { margin-right:8px; } .la_t_modal .la_action > div:first-child > *:last-child { margin-right:0; } .la_t_modal .la_action > div:last-child > * { margin-left:8px; } .la_t_modal .la_action > div:last-child > *:first-child { margin-left:0; } .la_t_modal .la_action .laa_condition > * ~ * { margin-left:4px; } .la_t_modal .la_action .laa_total { font-size:10px; line-height:18px; font-weight:500; color:var(--color-gray-600); } .la_t_modal .la_action .laa_total strong { color:var(--color-brand-500); padding:0 2px; } .la_t_modal .la_action .laa_more .laam_filter .tgl_box { padding:10px 16px 16px; width:192px; margin-top:4px; } .la_t_modal .la_action .laa_more .laam_filter .laamf_t > div { display:inline-flex; vertical-align:middle; margin-right:16px; } .la_t_modal .la_action .laa_more .laam_filter .laamf_t > div > * { white-space:nowrap; } .la_t_modal .la_action .laa_more .laam_filter .laamf_b { margin-top:8px; } /* tree */ .tree_01 .tree_top { padding:10px 16px; background:var(--color-brand-500); } .tree_01 .tree_top span { font-size:14px; line-height:22px; font-weight:600; color:var(--color-gray-100) } .tree_01 .tree_top button { display:block; width:22px !important; min-width:22px !important; height:22px; } .tree_01 .tree_top i { width:20px; height:20px; text-align:center; font-size:20px; line-height:20px; color:var(--color-gray-100) } /* .tree_list [class*='depth-'] { padding:8px 0; padding-right:40px; } .tree_list .depth-1 { padding-left: 12px; } .tree_list .depth-2 { padding-left: 28px; } .tree_list .depth-3 { padding-left: 44px; } .tree_list .depth-4 { padding-left: 60px; } .tree_list .depth-5 { padding-left: 76px; } .tree_list .depth-6 { padding-left: 92px; } .tree_list .depth-7 { padding-left: 108px; } .tree_list .depth-8 { padding-left: 124px; } .tree_list .depth-9 { padding-left: 140px; } .tree_list .depth-10 { padding-left: 156px; } .tree_list ul > li > div { position:relative; border-radius:8px; } .tree_list li > ul { display:none; } .tree_list li.open > ul { display:block; } .tree_list ul > li.on > div, .tree_list ul > li > div:hover { background:var(--color-brand-50); } .tree_list ul > li > div .tl_txt { display:flex; align-items:top; } .tree_list ul > li > div .tl_txt > i { width:16px; height:20px; font-size:16px; line-height:20px; color:var(--color-gray-400); text-align:center; margin-right:4px; transition:transform 0.25s ease-out; } .tree_list ul > li.on > div .tl_txt > i, .tree_list ul > li > div:hover .tl_txt > i { color:var(--color-brand-200) } .tree_list ul > li.open > div .tl_txt > i { transform:rotate(180deg) } .tree_list ul > li:not(.has_child) > div .tl_txt > i { visibility:hidden; } .tree_list ul > li > div .tl_txt > span { font-size:12px; line-height:20px; font-weight:600; color:var(--color-gray-800); word-break: keep-all; } .tree_list ul > li > div:hover .tl_txt > span, .tree_list ul > li.on > div .tl_txt > span { color:var(--color-brand-500); } .tree_list ul > li > div .tl_txt_copy { display:none; height:16px; position:absolute; right:12px; top:50%; transform:translateY(-50%); } .tree_list ul > li > div:hover .tl_txt_copy, .tree_list ul > li.on > div .tl_txt_copy { display:block; } .tree_list ul > li > div .tl_txt_copy > i { width:16px; height:16px; font-size:16px; line-height:16px; color:var(--color-gray-400); text-align:center; } .tree_list ul > li > div:hover .tl_txt_copy > i, .tree_list ul > li.on > div .tl_txt_copy > i { color:var(--color-brand-200) } .tree_list ul > li > div:hover .tl_txt_copy:hover > i, .tree_list ul > li.on > div .tl_txt_copy:hover > i { color:var(--color-brand-500); } */ .tree_category_setting { border:1px solid var(--color-gray-200); border-radius:8px; } .tree_category_setting .tcs_l { padding:16px; height:320px; max-height:320px; overflow-y:auto; } .tree_category_setting .tcs_r { width:192px; border-left:1px solid var(--color-gray-100); padding:16px; height:320px; max-height:320px; overflow-y:auto; } .tree_category_setting .tcs_r .tcsr_b { margin-top:16px; } .list_area .tree_01 { display:flex; flex-direction: column; height:100%; } .list_area .tree_list.scroll-wrapper { flex:1; box-sizing: border-box !important; } .list_area .tree_list.scroll-wrapper * { box-sizing:border-box !important; } .list_area .tree_list.scroll-content { padding:8px; height: 100% !important; max-height:none !important; } .list_area .tree_list.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { width:4px; left:-4px; } .list_area .tree_list.scrollbar-macosx:hover > .scroll-element .scroll-bar { background:var(--color-gray-300); opacity:1; } .tree_list ul.fancytree-container { margin:0; padding:2px 12px; border:0; font-family:'Pretendard'; font-weight:400; font-size:12px; line-height:20px; font-weight:600; color:var(--color-gray-800); } .tree_list ul.fancytree-container ul { padding-top:0; padding-left:24px; } .tree_list span.fancytree-node { display:flex; align-items:start; justify-content:flex-start; margin-top:0; } /* .tree_list span.fancytree-node.fancytree-expanded span.fancytree-title { color:var(--color-brand-500); } */ .tree_list span.fancytree-title { display:flex; flex:1; margin-left:0; padding:6px 0; white-space:initial; border:0; } .tree_list span.fancytree-title:hover { color:var(--color-brand-500); } .tree_list span.fancytree-icon { display:none; } .tree_list span.fancytree-expander { display:flex; width:20px; height:20px; margin:6px 0; margin-right:4px; background:url(../image/common/ico_tree_doc.svg) no-repeat left center/ 72%; } .tree_list span.fancytree-expander.fancytree-expander-l, .tree_list span.fancytree-expander.fancytree-expander-c { background:url(../image/common/ico_tree_down.svg) no-repeat left center/ 88%; } .tree_list span.fancytree-expander.fancytree-expander-e { background:url(../image/common/ico_tree_up.svg) no-repeat left center/ 88%; } .tree_list span.fancytree-active > span.fancytree-title, .tree_list .fancytree-treefocus span.fancytree-active > span.fancytree-title { background:none; color:var(--color-brand-500); outline:0; } /* grid_area */ .grid_area { border:0 !important; } .grid_area .tabulator { min-width:100%; } .grid_area .tabulator-header { border-bottom-color:var(--color-gray-200); } .grid_area .tabulator-header [role="columnheader"] { background:var(--color-gray-200); border-right:0 !important; border-right:1px solid transparent; } .grid_area .tabulator-header [role="columnheader"]:hover { background:var(--color-gray-400); } .grid_area .tabulator-header [role="columnheader"] .tabulator-col-content { padding:0 12px; } .grid_area .tabulator-header [role="columnheader"] .tabulator-col-content:hover { background:var(--color-gray-300); } .grid_area .tabulator-header [role="columnheader"] .tabulator-col-title-holder { height:41px; display:flex; align-items:center; } .grid_area .tabulator-header [role="columnheader"] .tabulator-col-title { font-size:12px; line-height:20px; color:var(--color-gray-400); } .grid_area .tabulator-tableholder { background:#f8f8f8; } .grid_area .tabulator-table .tabulator-row { background:var(--color-white); border-bottom:1px solid var(--color-gray-100); } .grid_area .tabulator-table [role="gridcell"] { font-size:12px; line-height:20px; padding:8px 12px; align-items:center; background:none; border-color:transparent; } .grid_area .tabulator-table .tabulator-row:hover { background:var(--color-gray-100); } .grid_area .tabulator-table .tabulator-cell { text-overflow: ellipsis; overflow:hidden; white-space: nowrap; } .grid_area .tabulator-footer { border-color:var(--color-gray-200); background:var(--color-white); } .grid_area .tabulator-footer .tabulator-footer-contents { padding:9px 16px; } .grid_area .tabulator-footer .tabulator-paginator { display:flex; justify-content:flex-end; align-items:center; } .grid_area .tabulator-footer .tabulator-paginator label { font-size:10px; color:var(--color-gray-600); } .grid_area .tabulator-footer .tabulator-paginator select { height:28px; font-size:10px; line-height:18px; padding:4px 28px 4px 10px; border-color:#d1d5db; } .grid_area .tabulator-footer .tabulator-paginator button { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:4px; font-size:10px; color:var(--color-gray-600); border:0; margin:0; } .grid_area .tabulator-footer .tabulator-paginator button:hover { background:var(--color-gray-100); color:var(--color-gray-600); } .grid_area .tabulator-footer .tabulator-paginator .tabulator-pages { margin:0; } .grid_area .tabulator-footer .tabulator-paginator .tabulator-pages button { border-color:transparent; color:var(--color-gray-800); } .grid_area .tabulator-footer .tabulator-paginator .tabulator-pages button:hover { color:var(--color-gray-800); } .grid_area .tabulator-footer .tabulator-paginator .tabulator-pages button.active { background:var(--color-gray-800); color:var(--color-white) } .grid_area .tabulator-footer .tabulator-paginator button .ms_o { font-size:16px; } .grid_area .tabulator-footer .tabulator-paginator button[data-page="first"] .ms_o, .grid_area .tabulator-footer .tabulator-paginator button[data-page="last"] .ms_o { font-size:20px; } .grid_area .ga_elps { width:100%; text-overflow: ellipsis; overflow:hidden; white-space: nowrap; } .grid_area .ga_img { margin:-8px -12px; aspect-ratio:1/1; width:48px; overflow:hidden; } .grid_area .ga_img > img { display:block; width:100%; height:100%; object-fit:cover; object-position:center center; } .grid_area .badge ~ .badge { margin-left:4px; } .grid_area .btn ~ .btn { margin-left:4px; } .grid_area.tabulator .tabulator-tableholder .tabulator-placeholder { display:flex; justify-content: center; align-items: center; height:260px; } .grid_area.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents { font-size:10px; line-height:18px; font-weight:500; color:var(--color-gray-400); } .grid_area .tabulator-alert { background:none; display:flex; justify-content:center; align-items:center; } .grid_area .tabulator-alert > div { display:none !important; } .grid_area .tabulator-alert::before { font-family: 'Material Symbols Outlined'; content: "progress_activity"; width:32px; height:32px; font-size:32px; line-height:1; color:var(--color-brand-500); text-align:center; animation:spin 1s linear infinite; margin-top:42px; } .grid_area .tabulator-alert { display:none !important } .grid_area [type="checkbox"], .grid_area [type="radio"] { color:var(--color-gray-700) !important; border-color:var(--color-gray-500) !important; } /* static grid area */ .static_grid_area table { table-layout: fixed; width:100%; } .static_grid_area table thead th { height:41px; background:var(--color-gray-200); border-bottom-color:var(--color-gray-200); font-size:12px; line-height:20px; color:var(--color-gray-400); } .static_grid_area table tbody td { font-size:12px; line-height:20px; padding:8px 12px; border-bottom:1px solid var(--color-gray-100); } .static_grid_area .sga_img { margin:-8px -12px; aspect-ratio:1/1; width:64px; overflow:hidden; } .static_grid_area .sga_img > img { display:block; width:100%; height:100%; object-fit:cover; object-position:center center; } .static_grid_area .sga_b.of_y_auto { overflow-y:auto; max-height:480px; } /* video list */ .video_list { padding:24px; grid-template-columns:1fr 1fr 1fr 1fr; } .video_list a .vl_b { padding:12px 0; } .video_list a .vl_b > div { font-size:10px; line-height:18px; } .video_list a .vl_b .vl_title { font-size:13px; line-height:21px; font-weight:600; color:var(--color-gray-800); max-height:42px; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical; line-clamp:2; -webkit-line-clamp: 2; margin-top:4px; } .video_list a:hover .vl_b .vl_title { color:var(--color-brand-500); text-decoration: underline; } .video_list a .vl_b .vl_navi { color:var(--color-gray-600) } .video_list a .vl_b .vl_desc { margin-top:8px; color:var(--color-gray-400); } .video_list a .vl_b .vl_date { color:var(--color-gray-400); margin-top:4px; } @media (min-width:1441px){ .video_list { grid-template-columns:1fr 1fr 1fr 1fr 1fr; } } @media (min-width:1921px){ .video_list { grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } } .video_list + .pagination { padding:8px 0 40px; width:100%; text-align:center; } .video_no_list { display:flex; width:100%; height:100%; justify-content:center; align-items:center; } .video_no_list > p { font-size:12px; line-height:2px; font-weight:600; color:var(--color-gray-400); } /* toggle box */ .tgl_box_wrap { position:relative; } .tgl_box { display:none; position:absolute; top:100%; right:0; background:#fff; border:1px solid var(--color-gray-200); border-radius:8px; padding:4px; box-shadow:0 4px 16px rgba(0,0,0,0.08); z-index:10; } .tgl_box.active { display:block; } /* barrier free btn */ [class*="bf_btn_tgl_"] .btn { background-color:none !important; background-repeat:no-repeat; background-position:center center; background-size:100%; border:0; } [class*="bf_btn_tgl_"] input:checked + .btn { background-color:none !important; background-repeat:no-repeat; background-position:center center; background-size:100%; } .bf_btn_tgl_bf01 .btn { background-image:url(../image/barrierfree/icon_bfreesvc_01.png) } .bf_btn_tgl_bf02 .btn { background-image:url(../image/barrierfree/icon_bfreesvc_02.png) } .bf_btn_tgl_bf03 .btn { background-image:url(../image/barrierfree/icon_bfreesvc_03.png) } .bf_btn_tgl_bf04 .btn { background-image:url(../image/barrierfree/icon_bfreesvc_04.png) } .bf_btn_tgl_bf05 .btn { background-image:url(../image/barrierfree/icon_bfreesvc_05.png) } .bf_btn_tgl_bf06 .btn { background-image:url(../image/barrierfree/icon_bfreesvc_06.png) } .bf_btn_tgl_bf07 .btn { background-image:url(../image/barrierfree/icon_bfreesvc_07.png) } .bf_btn_tgl_bf08 .btn { background-image:url(../image/barrierfree/icon_bfreesvc_08.png) } .bf_btn_tgl_bf09 .btn { background-image:url(../image/barrierfree/icon_bfreesvc_09.png) } .bf_btn_tgl_bf10 .btn { background-image:url(../image/barrierfree/icon_bfreesvc_10.png) } .bf_btn_tgl_bf11 .btn { background-image:url(../image/barrierfree/icon_bfreesvc_11.png) } .bf_btn_tgl_pd01 .btn { background-image:url(../image/barrierfree/physical_disability_01_G.png) } .bf_btn_tgl_pd02 .btn { background-image:url(../image/barrierfree/physical_disability_02_G.png) } .bf_btn_tgl_pd03 .btn { background-image:url(../image/barrierfree/physical_disability_03_G.png) } .bf_btn_tgl_pd04 .btn { background-image:url(../image/barrierfree/physical_disability_04_G.png) } .bf_btn_tgl_pd05 .btn { background-image:url(../image/barrierfree/physical_disability_05_G.png) } .bf_btn_tgl_pd06 .btn { background-image:url(../image/barrierfree/physical_disability_06_G.png) } .bf_btn_tgl_pd07 .btn { background-image:url(../image/barrierfree/physical_disability_07_G.png) } .bf_btn_tgl_pd08 .btn { background-image:url(../image/barrierfree/physical_disability_08_G.png) } .bf_btn_tgl_pd09 .btn { background-image:url(../image/barrierfree/physical_disability_09_G.png) } .bf_btn_tgl_pd10 .btn { background-image:url(../image/barrierfree/physical_disability_10_G.png) } .bf_btn_tgl_pd11 .btn { background-image:url(../image/barrierfree/physical_disability_11_G.png) } .bf_btn_tgl_vi01 .btn { background-image:url(../image/barrierfree/visual_impairment_01_G.png) } .bf_btn_tgl_vi02 .btn { background-image:url(../image/barrierfree/visual_impairment_02_G.png) } .bf_btn_tgl_vi03 .btn { background-image:url(../image/barrierfree/visual_impairment_03_G.png) } .bf_btn_tgl_vi04 .btn { background-image:url(../image/barrierfree/visual_impairment_04_G.png) } .bf_btn_tgl_vi05 .btn { background-image:url(../image/barrierfree/visual_impairment_05_G.png) } .bf_btn_tgl_vi06 .btn { background-image:url(../image/barrierfree/visual_impairment_06_G.png) } .bf_btn_tgl_vi07 .btn { background-image:url(../image/barrierfree/visual_impairment_07_G.png) } .bf_btn_tgl_vi08 .btn { background-image:url(../image/barrierfree/visual_impairment_08_G.png) } .bf_btn_tgl_vi09 .btn { background-image:url(../image/barrierfree/visual_impairment_09_G.png) } .bf_btn_tgl_vi10 .btn { background-image:url(../image/barrierfree/visual_impairment_10_G.png) } .bf_btn_tgl_vi11 .btn { background-image:url(../image/barrierfree/visual_impairment_11_G.png) } .bf_btn_tgl_vi12 .btn { background-image:url(../image/barrierfree/visual_impairment_12_G.png) } .bf_btn_tgl_vi13 .btn { background-image:url(../image/barrierfree/visual_impairment_13_G.png) } .bf_btn_tgl_vi14 .btn { background-image:url(../image/barrierfree/visual_impairment_14_G.png) } .bf_btn_tgl_vi15 .btn { background-image:url(../image/barrierfree/visual_impairment_15_G.png) } .bf_btn_tgl_vi16 .btn { background-image:url(../image/barrierfree/visual_impairment_16_G.png) } .bf_btn_tgl_vi17 .btn { background-image:url(../image/barrierfree/visual_impairment_17_G.png) } .bf_btn_tgl_vi18 .btn { background-image:url(../image/barrierfree/visual_impairment_18_G.png) } .bf_btn_tgl_vi19 .btn { background-image:url(../image/barrierfree/visual_impairment_19_G.png) } .bf_btn_tgl_hi01 .btn { background-image:url(../image/barrierfree/hearing_impairment_01_G.png) } .bf_btn_tgl_hi02 .btn { background-image:url(../image/barrierfree/hearing_impairment_02_G.png) } .bf_btn_tgl_hi03 .btn { background-image:url(../image/barrierfree/hearing_impairment_03_G.png) } .bf_btn_tgl_hi04 .btn { background-image:url(../image/barrierfree/hearing_impairment_04_G.png) } .bf_btn_tgl_hi05 .btn { background-image:url(../image/barrierfree/hearing_impairment_05_G.png) } .bf_btn_tgl_hi06 .btn { background-image:url(../image/barrierfree/hearing_impairment_06_G.png) } .bf_btn_tgl_hi07 .btn { background-image:url(../image/barrierfree/hearing_impairment_07_G.png) } .bf_btn_tgl_hi08 .btn { background-image:url(../image/barrierfree/hearing_impairment_08_G.png) } .bf_btn_tgl_hi09 .btn { background-image:url(../image/barrierfree/hearing_impairment_09_G.png) } .bf_btn_tgl_hi10 .btn { background-image:url(../image/barrierfree/hearing_impairment_10_G.png) } .bf_btn_tgl_hi11 .btn { background-image:url(../image/barrierfree/hearing_impairment_11_G.png) } .bf_btn_tgl_hi12 .btn { background-image:url(../image/barrierfree/hearing_impairment_12_G.png) } .bf_btn_tgl_hi13 .btn { background-image:url(../image/barrierfree/hearing_impairment_13_G.png) } .bf_btn_tgl_hi14 .btn { background-image:url(../image/barrierfree/hearing_impairment_14_G.png) } .bf_btn_tgl_hi15 .btn { background-image:url(../image/barrierfree/hearing_impairment_15_G.png) } .bf_btn_tgl_hi16 .btn { background-image:url(../image/barrierfree/hearing_impairment_16_G.png) } .bf_btn_tgl_hi17 .btn { background-image:url(../image/barrierfree/hearing_impairment_17_G.png) } .bf_btn_tgl_hi18 .btn { background-image:url(../image/barrierfree/hearing_impairment_18_G.png) } .bf_btn_tgl_hi19 .btn { background-image:url(../image/barrierfree/hearing_impairment_19_G.png) } .bf_btn_tgl_hi20 .btn { background-image:url(../image/barrierfree/hearing_impairment_20_G.png) } .bf_btn_tgl_hi21 .btn { background-image:url(../image/barrierfree/hearing_impairment_21_G.png) } .bf_btn_tgl_hi22 .btn { background-image:url(../image/barrierfree/hearing_impairment_22_G.png) } .bf_btn_tgl_hi23 .btn { background-image:url(../image/barrierfree/hearing_impairment_23_G.png) } .bf_btn_tgl_hi24 .btn { background-image:url(../image/barrierfree/hearing_impairment_24_G.png) } .bf_btn_tgl_if01 .btn { background-image:url(../image/barrierfree/infant_family_01_G.png) } .bf_btn_tgl_if02 .btn { background-image:url(../image/barrierfree/infant_family_02_G.png) } .bf_btn_tgl_if03 .btn { background-image:url(../image/barrierfree/infant_family_03_G.png) } .bf_btn_tgl_if04 .btn { background-image:url(../image/barrierfree/infant_family_04_G.png) } .bf_btn_tgl_if05 .btn { background-image:url(../image/barrierfree/infant_family_05_G.png) } .bf_btn_tgl_if06 .btn { background-image:url(../image/barrierfree/infant_family_06_G.png) } .bf_btn_tgl_if07 .btn { background-image:url(../image/barrierfree/infant_family_07_G.png) } .bf_btn_tgl_if08 .btn { background-image:url(../image/barrierfree/infant_family_08_G.png) } .bf_btn_tgl_if09 .btn { background-image:url(../image/barrierfree/infant_family_09_G.png) } .bf_btn_tgl_if10 .btn { background-image:url(../image/barrierfree/infant_family_10_G.png) } .bf_btn_tgl_if11 .btn { background-image:url(../image/barrierfree/infant_family_11_G.png) } .bf_btn_tgl_if12 .btn { background-image:url(../image/barrierfree/infant_family_12_G.png) } .bf_btn_tgl_if13 .btn { background-image:url(../image/barrierfree/infant_family_13_G.png) } .bf_btn_tgl_if14 .btn { background-image:url(../image/barrierfree/infant_family_14_G.png) } .bf_btn_tgl_if15 .btn { background-image:url(../image/barrierfree/infant_family_15_G.png) } .bf_btn_tgl_if16 .btn { background-image:url(../image/barrierfree/infant_family_16_G.png) } .bf_btn_tgl_if17 .btn { background-image:url(../image/barrierfree/infant_family_17_G.png) } .bf_btn_tgl_if18 .btn { background-image:url(../image/barrierfree/infant_family_18_G.png) } .bf_btn_tgl_if19 .btn { background-image:url(../image/barrierfree/infant_family_19_G.png) } .bf_btn_tgl_if20 .btn { background-image:url(../image/barrierfree/infant_family_20_G.png) } .bf_btn_tgl_if21 .btn { background-image:url(../image/barrierfree/infant_family_21_G.png) } .bf_btn_tgl_if22 .btn { background-image:url(../image/barrierfree/infant_family_22_G.png) } .bf_btn_tgl_if23 .btn { background-image:url(../image/barrierfree/infant_family_23_G.png) } .bf_btn_tgl_if24 .btn { background-image:url(../image/barrierfree/infant_family_24_G.png) } .bf_btn_tgl_if25 .btn { background-image:url(../image/barrierfree/infant_family_25_G.png) } .bf_btn_tgl_if26 .btn { background-image:url(../image/barrierfree/infant_family_26_G.png) } .bf_btn_tgl_if27 .btn { background-image:url(../image/barrierfree/infant_family_27_G.png) } .bf_btn_tgl_if28 .btn { background-image:url(../image/barrierfree/infant_family_28_G.png) } .bf_btn_tgl_if29 .btn { background-image:url(../image/barrierfree/infant_family_29_G.png) } .bf_btn_tgl_bf01 input:checked + .btn { background-image:url(../image/barrierfree/icon_bfreesvc_01_on.png) } .bf_btn_tgl_bf02 input:checked + .btn { background-image:url(../image/barrierfree/icon_bfreesvc_02_on.png) } .bf_btn_tgl_bf03 input:checked + .btn { background-image:url(../image/barrierfree/icon_bfreesvc_03_on.png) } .bf_btn_tgl_bf04 input:checked + .btn { background-image:url(../image/barrierfree/icon_bfreesvc_04_on.png) } .bf_btn_tgl_bf05 input:checked + .btn { background-image:url(../image/barrierfree/icon_bfreesvc_05_on.png) } .bf_btn_tgl_bf06 input:checked + .btn { background-image:url(../image/barrierfree/icon_bfreesvc_06_on.png) } .bf_btn_tgl_bf07 input:checked + .btn { background-image:url(../image/barrierfree/icon_bfreesvc_07_on.png) } .bf_btn_tgl_bf08 input:checked + .btn { background-image:url(../image/barrierfree/icon_bfreesvc_08_on.png) } .bf_btn_tgl_bf09 input:checked + .btn { background-image:url(../image/barrierfree/icon_bfreesvc_09_on.png) } .bf_btn_tgl_bf10 input:checked + .btn { background-image:url(../image/barrierfree/icon_bfreesvc_10_on.png) } .bf_btn_tgl_bf11 input:checked + .btn { background-image:url(../image/barrierfree/icon_bfreesvc_11_on.png) } .bf_btn_tgl_pd01 input:checked + .btn { background-image:url(../image/barrierfree/physical_disability_01_N.png) } .bf_btn_tgl_pd02 input:checked + .btn { background-image:url(../image/barrierfree/physical_disability_02_N.png) } .bf_btn_tgl_pd03 input:checked + .btn { background-image:url(../image/barrierfree/physical_disability_03_N.png) } .bf_btn_tgl_pd04 input:checked + .btn { background-image:url(../image/barrierfree/physical_disability_04_N.png) } .bf_btn_tgl_pd05 input:checked + .btn { background-image:url(../image/barrierfree/physical_disability_05_N.png) } .bf_btn_tgl_pd06 input:checked + .btn { background-image:url(../image/barrierfree/physical_disability_06_N.png) } .bf_btn_tgl_pd07 input:checked + .btn { background-image:url(../image/barrierfree/physical_disability_07_N.png) } .bf_btn_tgl_pd08 input:checked + .btn { background-image:url(../image/barrierfree/physical_disability_08_N.png) } .bf_btn_tgl_pd09 input:checked + .btn { background-image:url(../image/barrierfree/physical_disability_09_N.png) } .bf_btn_tgl_pd10 input:checked + .btn { background-image:url(../image/barrierfree/physical_disability_10_N.png) } .bf_btn_tgl_pd11 input:checked + .btn { background-image:url(../image/barrierfree/physical_disability_11_N.png) } .bf_btn_tgl_vi01 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_01_N.png) } .bf_btn_tgl_vi02 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_02_N.png) } .bf_btn_tgl_vi03 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_03_N.png) } .bf_btn_tgl_vi04 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_04_N.png) } .bf_btn_tgl_vi05 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_05_N.png) } .bf_btn_tgl_vi06 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_06_N.png) } .bf_btn_tgl_vi07 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_07_N.png) } .bf_btn_tgl_vi08 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_08_N.png) } .bf_btn_tgl_vi09 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_09_N.png) } .bf_btn_tgl_vi10 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_10_N.png) } .bf_btn_tgl_vi11 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_11_N.png) } .bf_btn_tgl_vi12 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_12_N.png) } .bf_btn_tgl_vi13 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_13_N.png) } .bf_btn_tgl_vi14 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_14_N.png) } .bf_btn_tgl_vi15 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_15_N.png) } .bf_btn_tgl_vi16 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_16_N.png) } .bf_btn_tgl_vi17 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_17_N.png) } .bf_btn_tgl_vi18 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_18_N.png) } .bf_btn_tgl_vi19 input:checked + .btn { background-image:url(../image/barrierfree/visual_impairment_19_N.png) } .bf_btn_tgl_hi01 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_01_N.png) } .bf_btn_tgl_hi02 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_02_N.png) } .bf_btn_tgl_hi03 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_03_N.png) } .bf_btn_tgl_hi04 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_04_N.png) } .bf_btn_tgl_hi05 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_05_N.png) } .bf_btn_tgl_hi06 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_06_N.png) } .bf_btn_tgl_hi07 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_07_N.png) } .bf_btn_tgl_hi08 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_08_N.png) } .bf_btn_tgl_hi09 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_09_N.png) } .bf_btn_tgl_hi10 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_10_N.png) } .bf_btn_tgl_hi11 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_11_N.png) } .bf_btn_tgl_hi12 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_12_N.png) } .bf_btn_tgl_hi13 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_13_N.png) } .bf_btn_tgl_hi14 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_14_N.png) } .bf_btn_tgl_hi15 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_15_N.png) } .bf_btn_tgl_hi16 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_16_N.png) } .bf_btn_tgl_hi17 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_17_N.png) } .bf_btn_tgl_hi18 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_18_N.png) } .bf_btn_tgl_hi19 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_19_N.png) } .bf_btn_tgl_hi20 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_20_N.png) } .bf_btn_tgl_hi21 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_21_N.png) } .bf_btn_tgl_hi22 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_22_N.png) } .bf_btn_tgl_hi23 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_23_N.png) } .bf_btn_tgl_hi24 input:checked + .btn { background-image:url(../image/barrierfree/hearing_impairment_24_N.png) } .bf_btn_tgl_if01 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_01_N.png) } .bf_btn_tgl_if02 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_02_N.png) } .bf_btn_tgl_if03 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_03_N.png) } .bf_btn_tgl_if04 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_04_N.png) } .bf_btn_tgl_if05 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_05_N.png) } .bf_btn_tgl_if06 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_06_N.png) } .bf_btn_tgl_if07 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_07_N.png) } .bf_btn_tgl_if08 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_08_N.png) } .bf_btn_tgl_if09 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_09_N.png) } .bf_btn_tgl_if10 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_10_N.png) } .bf_btn_tgl_if11 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_11_N.png) } .bf_btn_tgl_if12 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_12_N.png) } .bf_btn_tgl_if13 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_13_N.png) } .bf_btn_tgl_if14 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_14_N.png) } .bf_btn_tgl_if15 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_15_N.png) } .bf_btn_tgl_if16 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_16_N.png) } .bf_btn_tgl_if17 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_17_N.png) } .bf_btn_tgl_if18 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_18_N.png) } .bf_btn_tgl_if19 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_19_N.png) } .bf_btn_tgl_if20 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_20_N.png) } .bf_btn_tgl_if21 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_21_N.png) } .bf_btn_tgl_if22 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_22_N.png) } .bf_btn_tgl_if23 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_23_N.png) } .bf_btn_tgl_if24 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_24_N.png) } .bf_btn_tgl_if25 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_25_N.png) } .bf_btn_tgl_if26 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_26_N.png) } .bf_btn_tgl_if27 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_27_N.png) } .bf_btn_tgl_if28 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_28_N.png) } .bf_btn_tgl_if29 input:checked + .btn { background-image:url(../image/barrierfree/infant_family_29_N.png) } /* youtube */ .youtube_iframe { aspect-ratio: 16/9; } /* tag list */ .tag_list { font-size:0; line-height:0; margin-top:4px; } .tag_list > div { display:inline-flex; align-items:center; vertical-align:middle; height:24px; border-radius:6px; background:var(--color-gray-400); padding:0 4px 0 8px; margin:4px 4px 0 0; } .tag_list > div > span { font-size:10px; line-height:16px; font-weight:500; color:var(--color-gray-100); } .tag_list > div > button { margin-left:4px; background:var(--color-gray-200); color:var(--color-gray-600); } .tag_list > div > button:hover { background:var(--color-white); } /* thumbnail image */ .thumb { position:relative; display:flex; justify-content:center; align-items:center; border-radius:8px; overflow:hidden; } .thumb::before { display:block; content:''; position:absolute; left:0; bottom:0; right:0; height:50%; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%); z-index:0; } .thumb.selected::after { display:block; content:''; position:absolute; left:0; top:0; right:0; bottom:0; border:3px solid var(--color-brand-500); border-radius:8px; z-index:5; } .thumb .t_modal { position:absolute; left:0; top:0; right:0; bottom:0; cursor:pointer; z-index:10; } .thumb > img { display:block; width:100%; height:100%; object-fit:cover; object-position:center center; } .thumb.thumb_11 { aspect-ratio:1/1; } .thumb.thumb_43 { aspect-ratio:4/3; } .thumb.thumb_169 { aspect-ratio:16/9; } .thumb .t_t, .thumb .t_b { position:absolute; left:0; right:0; padding:8px; z-index:15; } .thumb .t_t { top:0; } .thumb .t_b { bottom:0; } .thumb .t_t > div > * ~ * { margin-left:4px; } .thumb .t_info .ti_title { display:block; font-weight:600; color:var(--color-white); overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; text-shadow: 0 0 2px rgba(0, 0, 0, 0.8); } .thumb .t_info .ti_author { display:block; color:var(--color-white); } .thumb .t_info .ti_date { display:block; color:var(--color-white); opacity:0.64; } .thumb .t_info.t_info_xs { padding:4px 8px; } .thumb .t_info.t_info_xs .ti_title { font-size:12px; line-height:18px; max-height:36px; margin-top:2px; } .thumb .t_info.t_info_xs .ti_author { font-size:10px; line-height:16px; } .thumb .t_info.t_info_xs .ti_date { font-size:10px; line-height:16px; margin-top:2px; } .thumb .t_info.t_info_sm { padding:24px; } .thumb .t_info.t_info_sm .ti_title { font-size:16px; line-height:24px; max-height:48px; margin-top:8px; } .thumb .t_info.t_info_sm .ti_author { font-size:12px; line-height:20px; } .thumb .t_info.t_info_sm .ti_date { font-size:10px; line-height:18px; margin-top:4px; } .thumb [class*="t_btn_"] { width:24px; height:24px; border-radius:50%; text-align:center; background:var(--color-gray-100); } .thumb [class*="t_btn_"] > i { font-size:16px; line-height:24px; color:var(--color-gray-800) } .thumb [class*="t_btn_"].on { background:var(--color-brand) } .thumb [class*="t_btn_"].on > i { color:var(--color-white); } .thumb .t_btn_play { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:36px; height:36px; background:0; } .thumb .t_btn_play > i { font-size:36px; color:var(--color-white); } .thumb .f_chk label { color:var(--color-white); } .thumb.thumb_ii { width:164px; } /* no list */ .no_list { display:flex; justify-content: center; align-items: center; height:160px; font-size:10px; line-height:18px; font-weight:500; color:var(--color-gray-400); } /* info detail list */ .info_detail_list { padding:24px; border-radius:8px; background:var(--color-gray-100); } .info_detail_list > div > div { display:flex; justify-content:flex-start; align-items:top; font-size:12px; line-height:20px; } .info_detail_list > div > div > strong { width:96px; min-width:96px; color:var(--color-brand-500); font-weight:600; } .info_detail_list > div > div > span { color:var(--color-gray-800); word-break:break-all; } /* address list */ .address_list { font-size:0; line-height:0; } .address_list .al_postnumber { display:inline-flex; vertical-align:middle; font-size:12px; line-height:20px; font-weight:600; color:var(--color-gray-800); } .address_list > ul > li { margin-top:8px; } .address_list > ul > li > div { border:1px solid var(--color-gray-200); border-radius:8px; padding:12px 16px; } .address_list .al_c > div { position:relative; padding:4px 0; padding-left:48px; } .address_list .al_c > div > .badge { position:absolute; left:0; top:4px; } .address_list .al_c > div > * { display:inline-flex; vertical-align:middle; margin-right:6px; } .address_list .al_c p { font-size:12px; line-height:20px; color:var(--color-gray-600); } .address_list .al_r > * ~ * { margin-left:4px; } /* template list */ .template_list > ul { display:grid; grid-template-columns:1fr 1fr; grid-gap:8px; } .template_list > ul > li > button { display:flex; justify-content:space-between; align-items:center; width:100%; background:var(--color-gray-200); padding:12px 16px; padding-right:12px; border-radius:8px; color:var(--color-gray-800); transition:background 0.25s ease-out; } .template_list > ul > li > button strong { font-size:14px; line-height:22px; font-weight:600; margin-right:6px; } .template_list > ul > li > button span { font-size:12px; line-height:20px; color:var(--color-gray-400); } .template_list > ul > li > button > div:last-child { height:22px; } .template_list > ul > li > button i { font-size:20px; line-height:22px; width:22px; text-align:center; } .template_list > ul > li > button:hover { background:var(--color-gd-brand); color:var(--color-white); } .template_list > ul > li > button:hover span { color:var(--color-gray-200); } /* edit type 01 */ .edit_type_01 { display:table; table-layout:fixed; width:100%; } .edit_type_01 > div { display:table-cell; vertical-align:top; position:relative; } .edit_type_01 .et_l { width:288px; } .edit_type_01 .et_r { padding:24px; padding-left:0; column-count: 1; column-gap: 16px; } .edit_type_01 .et_r.column_none { column-count: initial !important; } .edit_type_01 .et_fix { padding:24px; width:288px; } .edit_type_01 .et_fix.fixed { position:fixed; top:73px; } .edit_type_01 .et_navi { padding:12px; border-radius:12px; border:1px solid var(--color-gray-100); } /* */ .edit_type_01 .et_navi > button { display:flex; justify-content:flex-start; align-items:center; padding:8px 12px; width:100%; border-radius:8px; transition:all 0.25s ease-out; } .edit_type_01 .et_navi > button ~ button { margin-top:4px; } .edit_type_01 .et_navi > button:hover { background:var(--color-gray-100); } .edit_type_01 .et_navi > button.on { background:var(--color-brand-500); } .edit_type_01 .et_navi > button > i { color:var(--color-gray-500); width:22px; font-size:22px; text-align:center; margin-right:8px; } .edit_type_01 .et_navi > button > span { font-size:14px; line-height:22px; font-weight:600; color:var(--color-gray-500); } .edit_type_01 .et_navi > button.on > i, .edit_type_01 .et_navi > button.on > span { color:var(--color-brand-50); } .edit_type_01 .et_info { padding:12px 24px; border-radius:12px; margin-top:16px; background:var(--color-gray-100) } .edit_type_01 .et_info > div { padding:12px 0; } .edit_type_01 .et_info > div ~ div { border-top:1px dashed rgba(0,0,0,0.08); } .edit_type_01 .et_info span { display:block; } .edit_type_01 .et_info .eti_title { font-size:11px; line-height:19px; font-weight:600; color:var(--color-brand-500); } .edit_type_01 .et_info .eti_author { font-size:13px; line-height:21px; color:var(--color-gray-800); } .edit_type_01 .et_info .eti_date { font-size:11px; line-height:19px; color:var(--color-gray-400); } @media (min-width:1441px){ .edit_type_01 .et_r { column-count: 2; } } @media (min-width:1921px){ .edit_type_01 .et_r { column-count: 3; } } @media (min-width:2561px){ .edit_type_01 .et_r { column-count: 4; } } .edit_type_02 { padding:24px; } /* edit box */ .et_box { break-inside: avoid; margin-bottom:16px; padding:20px 24px; border:1px solid var(--color-gray-200); border-radius:12px; transition:height 0.25s ease-out; } /* box-shadow:0 4px 16px rgba(0,0,0,0.08); */ .et_box.closed { height:66px; overflow:hidden; } .et_box .etb_t { position:relative; } .et_box .etb_t .etb_toggle { position:absolute; right:0; top:50%; margin-top:-16px; transform:rotate(180deg); transition:transform 0.25s ease-out; } .et_box.closed .etb_t .etb_toggle { transform:rotate(0) } .et_box .etb_title { font-size:18px; line-height:26px; font-weight:800; color:var(--color-gray-800); letter-spacing:-0.025em; } .et_box .required::after { display:inline-block; content:'*'; color:var(--color-red-600); margin-left:2px; } .et_box .etb_class { font-size:0; line-height:0; margin-top:8px; } .et_box .etb_class > ul { margin:-4px -8px 0; } .et_box .etb_class > ul > li { position:relative; display:inline-flex; align-items:center; vertical-align:middle; padding:4px 8px 0; } .et_box .etb_class > ul > li ~ li::before { display:block; content:''; width:1px; height:12px; position:absolute; left:0; top:8px; background:var(--color-gray-200) } .et_box .etb_class > ul > li > span, .et_box .etb_class > ul > li > strong { font-size:12px; line-height:20px; color:var(--color-gray-400); } .et_box .etb_class > ul > li > span { padding-right:6px; } .et_box .etb_class > ul > li > strong { font-weight:400; color:var(--color-gray-800); } .et_box .etb_class > ul > li > i { width:16px; text-align:center; font-size:16px; line-height:1; color:var(--color-gray-400); margin-right:6px; } .et_box .et_box { padding:16px; border:1px solid var(--color-gray-100); border-radius:6px; margin-bottom:0; } .et_box .et_box .etb_title { font-size:15px; line-height:23px; } .et_box .et_box ~ .et_box { margin-top:8px; } .et_box .et_box .etb_t { padding-bottom:8px; } .et_box .et_box .etb_box:first-child { padding-top:0; } .etb_box { padding-top:24px; } .etb_box .etbb_t { padding-bottom:8px; } .etb_box .etbb_t > div > * ~ * { margin-left:4px; } .etb_box .etbb_title { font-size:14px; line-height:22px; font-weight:800; color:var(--color-gray-800); } .modal .etb_box { padding-top:16px; } .edit_btn > div > * { font-size:0; line-height:0; } .edit_btn > div > * ~ * { margin-left:4px; } /* reply area */ .reply_area * { vertical-align:middle; } .reply_area .et_box:last-child { margin-bottom:0; } .reply_area .ra_l { display:flex; justify-content:flex-start; align-items:center; color:var(--color-gray-800); padding:16px 0 8px; } .reply_area .ra_l i { font-size:20px; line-height:24px; width:24px; text-align:center; margin-right:4px; } .reply_area .ra_l span { font-size:16px; line-height:24px; font-weight:800; } .reply_area .ra_user { display:flex; justify-content:flex-start; align-items:center; font-size:0; line-height:0; } .reply_area .ra_user > div:first-child { padding-right:10px; } .reply_area .ra_user > div:last-child > * { margin-right:8px; } .reply_area .ra_user .rau_avatar { display:flex; justify-content:center; align-items:center; width:40px; height:40px; border-radius:50%; overflow:hidden; background:var(--color-gray-200); font-size:14px; line-height:22px; font-weight:500; font-style:normal; } .reply_area .ra_user .rau_avatar img { display:block; width:100%; height:100%; object-fit:cover; object-position:center center; } .reply_area .ra_user .rau_name { font-size:14px; line-height:20px; font-weight:600; color:var(--color-gray-800); } .reply_area .ra_user .rau_position { font-size:10px; line-height:16px; font-weight:600; color:var(--color-gray-400) } .reply_area .ra_user .rau_date { font-size:10px; line-height:16px; color:var(--color-gray-400) } .reply_area .ra_comment { font-size:12px; line-height:20px; color:var(--color-gray-600); padding:0 0 0 50px; } /* Unique */ /* login area */ .login_area { width:100%; height:100%; display:flex; justify-content:center; align-items:center; } .login_area > div { width:320px; } .login_area .la_c { padding:32px 0 48px; } .login_area .la_c .btn ~ .btn { margin-top:8px; } .login_area .la_logo { width:100%; height:32px; background:url(../image/common/logo.png) no-repeat center center / auto 100%; } .login_area .la_slogan { text-align:center; margin-top:24px; } .login_area .la_slogan > * { display:block; } .login_area .la_slogan > strong { font-size:17px; line-height:25px; font-weight:800; color:var(--color-gray-600); letter-spacing:-0.025em } .login_area .la_slogan > span { font-size:13px; line-height:21px; color:var(--color-gray-400); margin-top:4px; } .login_area .la_banner { display:flex; justify-content:center; align-items:center; overflow:hidden; border-radius:12px; } .login_area .la_banner > img { display:block; width:100%; height:100%; object-fit:cover; object-position:center center; } /* dash box */ .dash_box { font-size:0; line-height:0; height:100%; border-radius:12px; padding:16px 20px; background:var(--color-white); box-shadow:0 0 2px 0 rgba(145 158 171 / 0.2), 0 12px 24px -4px rgba(145 158 171 / 0.12); } .dash_box > .db_t > div > * ~ * { display:inline-flex; vertical-align:middle; margin-left:8px; } .dash_box .btn_more { height:18px; color:var(--color-gray-400); } .dash_box .btn_more > * { vertical-align:middle; } .dash_box .btn_more span { font-size:10px; line-height:18px; font-weight:500; } .dash_box .btn_more i { width:18px; height:18px; text-align:center; font-size:12px; line-height:18px; } .dash_box .db_title { display:inline-flex; justify-content:center; align-items:center; font-size:14px; line-height:22px; font-weight:600; color:var(--color-gray-800); vertical-align:middle; } .dash_box .db_title i { width:20px; text-align:center; font-size:20px; line-height:1; margin-right:4px; } .dash_box .db_count { font-family:'Barlow'; font-size:28px; line-height:36px; font-weight:700; color:var(--color-gray-800); padding:16px 0; transition:font-size 0.25s ease-out; } .dash_box .db_board { margin-top:8px; } .dash_box .db_board .auto { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } .dash_box .db_board > div { padding:12px 0; } .dash_box .db_board > div ~ div { border-top:1px solid var(--color-gray-100); } .dash_box .db_board .dbb_title { display:block; font-size:12px; line-height:20px; font-weight:500; color:var(--color-gray-800); max-width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } .dash_box .db_board .dbb_title:hover { text-decoration: underline; color:var(--color-brand-500); } .dash_box .db_board .dbb_date { display:block; font-size:10px; line-height:18px; color:var(--color-gray-400); } .dash_box .db_live, .dash_box .db_live * { box-sizing: border-box; } .dash_box .db_live.scroll-wrapper { margin-top:8px; margin:0 -20px -16px; padding:8px 20px !important; width:calc(100% + 40px); max-height:532px; overflow-y:auto; } .dash_box .db_live.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { width:4px; left:-4px; } .dash_box .db_live.scrollbar-macosx:hover > .scroll-element .scroll-bar { background:var(--color-gray-300); opacity:1; } .dash_box .db_live .auto { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } .dash_box .db_live.scroll-content > div { padding:12px 0; } .dash_box .db_live.scroll-content > div ~ div { border-top:1px solid var(--color-gray-100); } .dash_box .db_live.scroll-content > div > div:first-child i { width:20px; text-align:center; font-size:20px; line-height:1; color:var(--color-gray-600); } .dash_box .db_live .dbl_navi { display:block; font-size:10px; line-height:18px; color:var(--color-gray-600); } .dash_box .db_live .dbl_title { display:block; font-size:13px; line-height:21px; font-weight:500; color:var(--color-gray-800); margin-top:5px; max-width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } .dash_box .db_live .dbl_title:hover { text-decoration: underline; color:var(--color-brand-500); } .dash_box .db_live .dbl_author, .dash_box .db_live .dbl_date { display:inline-block; vertical-align:middle; font-size:9px; line-height:17px; color:var(--color-gray-400); margin:0 8px 0 0; } .dash_box .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title, .dash_box .apexcharts-canvas.apexcharts-theme-light .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { background:0 !important; border:0 !important; color: var(--color-gray-400) !important; margin-bottom: 0 !important; padding: 4px 8px !important; font-size: 10px !important; line-height:18px !important; font-weight: 400 !important } /* error area */ .error_area { width:100%; height:100%; } .error_area .ea_t { padding:20px 24px; } .error_area .ea_logo { display:block; } .error_area .ea_logo > a { display:block; width:120px; height:28px; background:url(../image/common/logo.png) no-repeat left center / auto 100%; } .error_area > div { display:flex; height:inherit; flex-direction: column; } .error_area .ea_b { flex:1; width:100%; display:flex; justify-content:center; align-items:center; text-align:center; padding-bottom:72px; } .error_area .ea_message { max-width:400px; } .error_area .ea_message strong { display:block; font-size:24px; line-height:32px; font-weight:800; color:var(--color-gray-800); } .error_area .ea_message span { display:block; font-size:13px; line-height:21px; color:var(--color-gray-400); margin-top:12px; } /* ca area */ .ca_area { width:100%; padding:24px; } /* loading */ .loading { display:none; position:fixed; left:0; top:0; right:0; bottom:0; z-index:1000; justify-content:center; align-items:center; background:rgba(0,0,0,0.48); } .loading.on { display:flex; } .loading .l_spinner { width:32px; height:32px; font-size:32px; line-height:1; color:var(--color-brand-500); text-align:center; animation:spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* board view content */ .board_view_content pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } /* sun editor */ .f_input .sun-editor { width:100% !important; } .f_input .sun-editor .se-dialog .se-dialog-inner { display:flex !important; justify-content:center; align-items:center; } .f_input .sun-editor .se-dialog .se-dialog-inner .se-dialog-content { margin:0; min-width:480px; max-width:480px !important; border-radius:8px; box-shadow:none; } .f_input .sun-editor .se-dialog .se-dialog-inner .se-dialog-body { padding:16px 16px 8px; } .f_input .sun-editor .se-dialog .se-dialog-inner .se-dialog-header { padding:8px 16px; padding-right:8px; } .f_input .sun-editor .se-dialog .se-dialog-inner .se-dialog-header .se-modal-title { font-size:16px; line-height:24px; font-weight:600; padding:5px 0; } .f_input .sun-editor .se-dialog .se-dialog-inner .se-dialog-footer { padding:10px 16px 0; } /* et tab */ .et_tab .tab_list { overflow:hidden; } .et_tab .tab_list ul > li > a { display:block; font-size:10px; line-height:18px; font-weight:600; color:var(--color-gray-400); padding:8px 12px; border-radius:17px; } .et_tab .tab_list ul > li.on > a { background:var(--color-gray-100); color:var(--color-gray-800); } .et_tab .tab_content { padding:8px 0; } .et_tab .ko_tab_list { overflow:hidden; } .et_tab .ko_tab_list ul > li > a { display:block; font-size:10px; line-height:18px; font-weight:600; color:var(--color-gray-400); padding:8px 12px; border-radius:17px; } .et_tab .ko_tab_list ul > li.on > a { background:var(--color-gray-100); color:var(--color-gray-800); } .et_tab .ko_tab_content { padding:8px 0; } /* sync_area */ .sync_area { display:flex; height:calc(100dvh - 121px); } .sync_area .sa_panel { flex:1; overflow:hidden; overflow-y:auto; } .sync_area .sa_l > div { position:relative; } /* .sync_area .sa_l > div::after { display:block; content:''; position:absolute; left:0; top:0; width:100%; height:calc(100% + 16px); background:rgba(0,0,0,0.48); z-index:50; } */ .theme_area { font-size:0; line-height:0; display:flex; flex-direction: column; height:100%; } .theme_area .ta_t { display:flex; padding:20px; background:var(--color-gray-200); border-bottom:1px solid var(--color-gray-300); } .theme_area .ta_t .tat_r { flex:1; padding-left:20px; } .theme_area .ta_b { flex:1; } .theme_area .ta_t .tab_01_sm { display:inline-block; } .theme_area .ta_thumb { display:flex; justify-content:flex-start; align-items:center; gap:8px; } .theme_area .ta_title { display:inline-block; vertical-align:middle; font-size:16px; line-height:24px; font-weight:800; color:var(--color-gray-800); margin-right:8px; } .theme_area .ta_info { display:inline-block; vertical-align:middle; font-size:10px; line-height:18px; color:var(--color-gray-400); margin-right:6px; } /* ca channel user */ .ca_channel_user > ul > li { display:flex; align-items: center; height:48px; } .ca_channel_user > ul > li > div { width:100%; } .ca_channel_user .ccu_t > div:first-child { font-size:13px; line-height:21px; } .ca_channel_user .ccu_t > div:last-child { font-size:15px; line-height:23px; font-weight:bold; } .ca_channel_user .ccu_b { height:8px; border-radius:4px; margin-top:4px; } .ca_channel_user .ccu_b > div { height:8px; border-radius:4px; } .ca_channel_user > ul > li:nth-child(1) .ccu_b { background-color:rgb(0, 167, 111, 0.32); } .ca_channel_user > ul > li:nth-child(2) .ccu_b { background-color:rgb(0, 184, 217, 0.32); } .ca_channel_user > ul > li:nth-child(3) .ccu_b { background-color:rgb(255, 171, 0, 0.32); } .ca_channel_user > ul > li:nth-child(4) .ccu_b { background-color:rgb(255, 86, 48, 0.32); } .ca_channel_user > ul > li:nth-child(1) .ccu_b > div { background-color:rgb(0, 167, 111, 1); } .ca_channel_user > ul > li:nth-child(2) .ccu_b > div { background-color:rgb(0, 184, 217, 1); } .ca_channel_user > ul > li:nth-child(3) .ccu_b > div { background-color:rgb(255, 171, 0, 1); } .ca_channel_user > ul > li:nth-child(4) .ccu_b > div { background-color:rgb(255, 86, 48, 1); } /* ca list */ .ca_list { margin-top:8px; } .ca_list > ul > li ~ li { border-top:1px dashed var(--color-gray-200); } .ca_list > ul > li > div:hover { background:var(--color-gray-100); } .ca_list > ul > li > div > div { height:40px; vertical-align: middle; font-size:12px; line-height:20px; font-weight:600; padding:8px 12px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .ca_list > ul > li > div > div:nth-child(4) { font-size:10px; line-height:18px; } .ca_list > ul > li > div > div > .ms_o { font-size:10px; line-height:18px; margin-right:2px; } /* float button */ .float_button { position:fixed; right:24px; bottom:24px; z-index:50; box-shadow:0 4px 12px rgba(0,0,0,0.15) } /* modal_memo_list */ .modal_memo_list ul > li { padding:12px 0 16px } .modal_memo_list ul > li ~ li { border-top:1px solid var(--color-gray-200) } .modal_memo_list ul > li .auto > span { font-size:10px; line-height:18px; color:var(--color-gray-400); } .modal_memo_list ul > li .auto > p { display:block; font-size:12px; line-height:20px; color:var(--color-gray-800); font-weight:600; word-break: break-all; overflow-wrap: anywhere; white-space: normal; } .mae_info { display:inline-flex; vertical-align:middle; align-items:center; } .mae_info > div { display:inline-flex; vertical-align:middle; font-size:10px; line-height:18px; } .mae_info > div ~ div { margin-left:12px; } .mae_info > div > * ~ * { margin-left:6px; } .mae_info > div strong { color:var(--color-gray-400); } /* flowbite check radio */ .grid_area [type=checkbox]:indeterminate, .grid_area [type=checkbox]:checked, .grid_area [type=radio]:checked { background-color:var(--color-brand) !important; } #download_loading_modal.modal { visibility:visible } #download_loading_modal > div > div { border-radius:24px; } #download_loading_modal .m-c { padding-bottom:0; } .download_progress .dp_t { text-align:center; } .download_progress .dp_t .ms_o { font-size:48px; color:var(--color-brand) } .download_progress .dp_t h3 { font-size:18px; line-height:28px; font-weight:800; } .download_progress .dp_t p { display:block; font-size:12px; line-height:20px; color:var(--color-gray-400); margin-top:4px; } .download_progress .dp_c { padding:24px 0; } .download_progress .dp_c > div { position:relative; display:flex; justify-content:center; align-items:center; height:16px; border-radius:8px; overflow:hidden; background:var(--color-gray-300) } .download_progress .dp_c > div > div { position:absolute; left:0; top:0; height:100%; border-radius:8px; background:var(--color-brand); } .download_progress .dp_c > div > span { position:relative; z-index:5; font-size:10px; line-height:1; font-weight:600; color:var(--color-white); } .download_progress .dp_c > p { display:block; text-align:center; font-size:10px; line-height:18px; color:var(--color-gray-400); margin-top:8px; } /* Modal - 이미지 선텍 가이드 문구 */ .modal_image_select .m_title { display:inline-flex; vertical-align: middle; margin-right:16px; } .modal_image_select .m_img_descript { font-size:10px; line-height:18px; color:var(--color-gray-400); display:inline-flex; vertical-align:middle; justify-content:center; align-items:center; } .modal_image_select .m_img_descript > *, .modal_image_select .m_img_descript > ul > li { display:inline-flex; vertical-align:middle; } .modal_image_select .m_img_descript > * { margin-right:16px; } .modal_image_select .m_img_descript > ul > li { margin-right:8px; } .modal_image_select .m_img_descript > ul > li > span { font-weight:500; color:var(--color-gray-800); margin-left:4px; } /* dropdown */ .modal_dropdown .m-c { overflow:initial; } .dep_dropdown_form { position:relative; } .dep_dropdown { position: absolute; top: 100%; left: 0; right: 0; max-height: 240px; overflow-y: auto; background:var(--color-white); border: 1px solid #d1d5db; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px; } .dep_dropdown_form .dep_dropdown { width:calc(100% - 12px); left:6px; } .dep_dropdown li { padding:8px 12px; font-size:12px; line-height:20px; font-weight:600; cursor: pointer; } .dep_dropdown li:hover { background:var(--color-gray-100); } .dep_dropdown li.selected { background:var(--color-blue-100); color:var(--color-blue-500); } .dep_dropdown li.no-result { font-size:10px; line-height:18px; color: var(--color-gray-400); cursor: default; padding:64px; text-align:center; } .dep_dropdown li.no-result:hover { background-color: white; } /* Sortable Image Drag */ .sortable-chosen { opacity:0.25 !important; } .sortable-drag { opacity:1 !important; background:inherit; } .row-placeholder { height: 48px; background: #F0F6FF; border: 2px dashed #7AA7FF; }