/* begin header style */ header { --primary: #3366FF; --dot-size: 6px; --max-length: 0; --second-dept-height: 66px; --header-log-img: url('data:image/png;base64,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'); display: block; width: 100%; position: fixed; z-index: 10; background-color: #ffffffff; &.main { width: 100%; .user-info { margin-top: 20px; } } &[open="false"] { height: 88px; box-shadow: 0px 4px 15px 0px #0000001A; transition: height ease 0.4s; >div { box-shadow: 0 1px 0 0 #dfdfdf00; transition: box-shadow ease 0.3s; transition-delay: 0.3s; } } &[open="true"] { height: calc(88px + var(--second-dept-height) * var(--max-length)); box-shadow: 0px 4px 15px 0px #0000001A; transition: height ease 0.3s; >div { box-shadow: 0 1px 0 0 #DFDFDF; } } >div { height: 88px; container { width: 1400px; logo { width: 104px; height: 69px; background-image: var(--header-log-img); background-position: center center; } .menu-first-depth { >div { position: relative; display: flex; justify-content: center; align-items: center; position: relative; &:hover { &:before { content: ""; position: absolute; width: 100%; height: 50px; bottom: -45px; left: 0; } } a { font-size: 1.25em; font-weight: 500; line-height: 1.193em; text-decoration: none; position: relative; &[data-current] { font-size: 1.5em; font-weight: 700; line-height: 1.193em; &:before { content: ''; display: block; border-radius: var(--dot-size); background-color: var(--primary); position: absolute; right: 0; top: 0; z-index: 1; transform: translate(5px, -5px); } &[data-current="true"] { color: var(--primary); &:before { width: var(--dot-size); height: var(--dot-size); transition: ease all 0.3s; } } &[data-current="false"] { &:before { width: 0; height: 0; transition: ease all 0.3s; } } } } .menu-second-depth { position: absolute; top: calc(88px + 24px); display: flex; align-items: center; height: 0; overflow: hidden; transition: ease all 0.3s; &[open="true"] { height: calc(60px * var(--max-length)); } &[open="false"] { height: 0; } a { width: max-content; } } } .menu-second-depth { height: 120px; transition: ease all 0.3s; } } } .search-header { align-items: center; } } } /* fin header style */ /* begin button style */ body { --select-icon: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.600098 0.799927L7.0001 8.79993L13.4001 0.799927H0.600098Z' fill='%23222222'/%3E%3C/svg%3E%0A"); --select-icon-caret: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.66675 5.83337L8.00008 11.1667L13.3334 5.83337' stroke='%23212B36' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --select-icon-arrow-gray: url("data:image/svg+xml,%3Csvg width='9' height='6' viewBox='0 0 9 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.19377 5.68565C5.00975 5.88703 4.7602 6.00015 4.5 6.00015C4.2398 6.00015 3.99025 5.88703 3.80623 5.68565L0.28731 1.83373C0.150115 1.68351 0.0566902 1.49214 0.0188437 1.2838C-0.019002 1.07547 0.000430107 0.859525 0.0746851 0.663277C0.148939 0.467029 0.274682 0.299286 0.436016 0.181253C0.59735 0.06322 0.787032 0.000197887 0.981083 0.000152588L8.01892 0.000152588C8.21297 0.000197887 8.40265 0.06322 8.56398 0.181253C8.72532 0.299286 8.85106 0.467029 8.92531 0.663277C8.99957 0.859525 9.019 1.07547 8.98116 1.2838C8.94331 1.49214 8.84988 1.68351 8.71269 1.83373L5.19377 5.68565Z' fill='%23B8BBD1'/%3E%3C/svg%3E%0A"); --select-icon-caret-large: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 16L12 8L4 16' stroke='%23444444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .button { &.switch { --default: #F0F0F0; --active: #3366FF; --height: 39px; height: var(--height); cursor: pointer; display: inline-block; background-color: var(--default); border-radius: var(--height); position: relative; user-select: none; input { opacity: 0; width: 0; height: 0; position: absolute; &:checked { ~.switch-label { span { transition: ease all 0.4s; &:first-of-type { color: #fff; font-weight: 500; } &:last-of-type { color: #999999; font-weight: 400; } } &:before { transform: translateX(0%); transition: ease all 0.4s; } } } } .switch-label { height: var(--height); display: flex; align-items: center; gap: 23px; font-weight: 400; line-height: 1.193em; span { z-index: 1; transition: ease all 0.4s; &:first-of-type { padding-left: 19px; color: #999999; font-weight: 400; } &:last-of-type { padding-right: 12px; color: #fff; font-weight: 500; } } &:before { content: ''; position: absolute; z-index: 0; width: 98px; height: var(--height); background-color: var(--active); border-radius: var(--height); transform: translateX(calc(100% - 9px)); transition: ease all 0.4s; } } } } button { --download-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14' fill='none'%3E%3Cpath d='M1 13H9M5 1V10.3333M5 10.3333L8.33333 7M5 10.3333L1.66667 7' stroke='%233366FF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --close-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M1.88806 1.85352L21.612 21.5774' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M21.6119 2.27612L1.88804 22' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); --search-keyword-icon: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.1208 30.8791L27.5053 23.2636C29.0788 20.8921 29.9998 18.0526 29.9998 15.0001C29.9998 6.72912 23.2708 0.00012207 14.9998 0.00012207C6.7288 0.00012207 -0.000198364 6.72912 -0.000198364 15.0001C-0.000198364 23.2711 6.7288 30.0001 14.9998 30.0001C18.0523 30.0001 20.8918 29.0791 23.2633 27.5056L30.8788 35.1211C32.0488 36.2926 33.9508 36.2926 35.1208 35.1211C36.2923 33.9496 36.2923 32.0506 35.1208 30.8791ZM4.4998 15.0001C4.4998 9.21012 9.2098 4.50012 14.9998 4.50012C20.7898 4.50012 25.4998 9.21012 25.4998 15.0001C25.4998 20.7901 20.7898 25.5001 14.9998 25.5001C9.2098 25.5001 4.4998 20.7901 4.4998 15.0001Z' fill='white'/%3E%3C/svg%3E%0A"); --initial-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3333 7.33334C13.1703 6.16015 12.626 5.07311 11.7844 4.23967C10.9428 3.40623 9.8505 2.87262 8.67578 2.72104C7.50105 2.56947 6.30908 2.80833 5.28347 3.40084C4.25785 3.99335 3.4555 4.90663 3 6.00001M2.66666 3.33334V6.00001H5.33333M2.66666 8.66667C2.8297 9.83986 3.37395 10.9269 4.21557 11.7603C5.05719 12.5938 6.14949 13.1274 7.32422 13.279C8.49894 13.4306 9.69092 13.1917 10.7165 12.5992C11.7421 12.0067 12.5445 11.0934 13 10M13.3333 12.6667V10H10.6667' stroke='%233366FF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); --plus-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 8H12.5' stroke='%233366FF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.5 4L8.5 12' stroke='%233366FF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); --writing-icon: url("data:image/svg+xml,%3Csvg width='22' height='27' viewBox='0 0 22 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_445_14044' fill='white'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 0.478516H0.5V26.1452H21.5V8.47852L13.5 0.478516Z'/%3E%3C/mask%3E%3Cpath d='M0.5 0.478516V-1.02148H-1V0.478516H0.5ZM13.5 0.478516L14.5607 -0.582144L14.1213 -1.02148H13.5V0.478516ZM0.5 26.1452H-1V27.6452H0.5V26.1452ZM21.5 26.1452V27.6452H23V26.1452H21.5ZM21.5 8.47852H23V7.8572L22.5607 7.41786L21.5 8.47852ZM0.5 1.97852H13.5V-1.02148H0.5V1.97852ZM2 26.1452V0.478516H-1V26.1452H2ZM21.5 24.6452H0.5V27.6452H21.5V24.6452ZM20 8.47852V26.1452H23V8.47852H20ZM12.4393 1.53918L20.4393 9.53918L22.5607 7.41786L14.5607 -0.582144L12.4393 1.53918Z' fill='%232D2D33' mask='url(%23path-1-inside-1_445_14044)'/%3E%3Cpath d='M12.9244 0.894775V8.89478H20.9244' stroke='%232D2D33' stroke-width='1.5'/%3E%3Crect x='5.31592' y='13.8953' width='11.3682' height='1.5' fill='%232D2D33'/%3E%3Crect x='5.31592' y='18.5422' width='11.3682' height='1.5' fill='%232D2D33'/%3E%3C/svg%3E%0A"); --writing-icon-on: url("data:image/svg+xml,%3Csvg width='22' height='27' viewBox='0 0 22 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_450_6851' fill='white'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 0.478485H0.5V26.1451H21.5V8.47849L13.5 0.478485Z'/%3E%3C/mask%3E%3Cpath d='M0.5 0.478485V-1.02151H-1V0.478485H0.5ZM13.5 0.478485L14.5607 -0.582175L14.1213 -1.02151H13.5V0.478485ZM0.5 26.1451H-1V27.6451H0.5V26.1451ZM21.5 26.1451V27.6451H23V26.1451H21.5ZM21.5 8.47849H23V7.85716L22.5607 7.41782L21.5 8.47849ZM0.5 1.97849H13.5V-1.02151H0.5V1.97849ZM2 26.1451V0.478485H-1V26.1451H2ZM21.5 24.6451H0.5V27.6451H21.5V24.6451ZM20 8.47849V26.1451H23V8.47849H20ZM12.4393 1.53915L20.4393 9.53915L22.5607 7.41782L14.5607 -0.582175L12.4393 1.53915Z' fill='%234675E4' mask='url(%23path-1-inside-1_450_6851)'/%3E%3Cpath d='M12.9244 0.894699V8.8947H20.9244' stroke='%234675E4' stroke-width='1.5'/%3E%3Crect x='5.31592' y='13.8953' width='11.3682' height='1.5' fill='%234675E4'/%3E%3Crect x='5.31592' y='18.5422' width='11.3682' height='1.5' fill='%234675E4'/%3E%3C/svg%3E%0A"); --translation-icon: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_450_6860)'%3E%3Cpath d='M15.4284 5.11201V7.2811H13.9852C12.8544 7.2811 11.7364 7.79689 11.0697 8.54643C10.5448 9.00662 10.1672 9.70593 9.92089 10.3699C9.66063 11.0714 9.50308 11.852 9.50308 12.5187V17.6504H2.89C1.69881 17.6504 0.720908 16.6725 0.720908 15.4813V5.11201C0.720908 3.92083 1.69881 2.94292 2.89 2.94292H13.2593C14.4505 2.94292 15.4284 3.92083 15.4284 5.11201Z' stroke='%232D2D33' stroke-width='1.58714'/%3E%3Cmask id='mask0_450_6860' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='-1' y='2' width='18' height='17'%3E%3Cpath d='M13.9852 8.07467H16.222V5.11201C16.222 3.48255 14.8888 2.14935 13.2593 2.14935H2.89C1.26053 2.14935 -0.0726624 3.48255 -0.0726624 5.11201V15.4813C-0.0726624 17.1108 1.26053 18.444 2.89 18.444H10.2966V12.5187C10.2967 11.4072 10.8343 9.77186 11.6298 9.1116C12.1335 8.51907 13.0519 8.07467 13.9852 8.07467Z' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_450_6860)'%3E%3Cpath d='M5.48771 11.7079L4.84127 14.0699H2.97653L5.92282 4.87057H8.08592L11.0446 14.0699H9.11774L8.4713 11.7079H5.48771ZM7.79999 9.27135C7.51406 8.31412 7.27786 7.25743 6.99194 6.26291H6.94221C6.70601 7.26986 6.44495 8.31412 6.15902 9.27135L5.88552 10.2783H8.07349L7.79999 9.27135Z' fill='%232D2D33'/%3E%3C/g%3E%3Cpath d='M12.5759 12.4329C12.5759 11.235 13.547 10.2638 14.745 10.2638H25.11C26.308 10.2638 27.2791 11.235 27.2791 12.4329V22.888C27.2791 24.0859 26.308 25.0571 25.11 25.0571H14.745C13.547 25.0571 12.5759 24.0859 12.5759 22.888V12.4329Z' stroke='%232D2D33' stroke-width='1.58714'/%3E%3Cpath d='M23.0166 17.6282V22.8214H21.5232V12.4123H23.0166V16.3949H24.4762V17.6282H23.0166ZM20.2446 13.4871C20.2446 16.6212 19.068 19.2914 15.5945 21.0451L14.7572 19.9023C17.1898 18.6464 18.4683 17.0172 18.7398 14.6978H15.3342V13.4871H20.2446Z' fill='%232D2D33'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_450_6860'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); --translation-icon-on: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_445_14053)'%3E%3Cpath d='M15.4284 5.11207V7.28117H13.9852C12.8544 7.28117 11.7364 7.79695 11.0698 8.54649C10.5449 9.00668 10.1673 9.706 9.92092 10.37C9.66066 11.0715 9.50311 11.8521 9.50311 12.5187V17.6505H2.89003C1.69884 17.6505 0.720938 16.6726 0.720938 15.4814V5.11207C0.720938 3.92089 1.69884 2.94298 2.89003 2.94298H13.2593C14.4505 2.94298 15.4284 3.92089 15.4284 5.11207Z' stroke='%234675E4' stroke-width='1.58714'/%3E%3Cmask id='mask0_445_14053' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='-1' y='2' width='18' height='17'%3E%3Cpath d='M13.9852 8.07474H16.222V5.11207C16.222 3.48261 14.8888 2.14941 13.2593 2.14941H2.89003C1.26057 2.14941 -0.0726318 3.48261 -0.0726318 5.11207V15.4814C-0.0726318 17.1108 1.26057 18.444 2.89003 18.444H10.2967V12.5187C10.2967 11.4073 10.8343 9.77192 11.6299 9.11167C12.1335 8.51913 13.052 8.07474 13.9852 8.07474Z' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_445_14053)'%3E%3Cpath d='M5.48774 11.708L4.8413 14.07H2.97656L5.92285 4.87061H8.08595L11.0447 14.07H9.11777L8.47133 11.708H5.48774ZM7.80002 9.27139C7.51409 8.31416 7.27789 7.25747 6.99197 6.26294H6.94224C6.70604 7.2699 6.44498 8.31416 6.15905 9.27139L5.88556 10.2783H8.07352L7.80002 9.27139Z' fill='%234675E4'/%3E%3C/g%3E%3Cpath d='M12.5759 12.4329C12.5759 11.2349 13.5471 10.2638 14.745 10.2638H25.11C26.308 10.2638 27.2791 11.2349 27.2791 12.4329V22.8879C27.2791 24.0859 26.308 25.057 25.11 25.057H14.745C13.5471 25.057 12.5759 24.0859 12.5759 22.8879V12.4329Z' stroke='%234675E4' stroke-width='1.58714'/%3E%3Cpath d='M23.0167 17.6282V22.8215H21.5232V12.4124H23.0167V16.395H24.4762V17.6282H23.0167ZM20.2447 13.4872C20.2447 16.6213 19.068 19.2914 15.5945 21.0452L14.7572 19.9024C17.1898 18.6465 18.4683 17.0173 18.7399 14.6978H15.3343V13.4872H20.2447Z' fill='%234675E4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_445_14053'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); --bulb-icon: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.7333 23.3333V24.2667C17.9809 24.2667 18.2183 24.1683 18.3933 23.9933C18.5683 23.8183 18.6667 23.5809 18.6667 23.3333H17.7333ZM10.2667 23.3333H9.33333C9.33333 23.5809 9.43167 23.8183 9.6067 23.9933C9.78173 24.1683 10.0191 24.2667 10.2667 24.2667V23.3333ZM11.2 28H16.8V26.1333H11.2V28ZM6.68267 11.9467L6.664 12.0773L8.512 12.3387L8.53253 12.208L6.68267 11.9467ZM14 5.6C12.2207 5.60009 10.5011 6.24198 9.15697 7.40783C7.81281 8.57367 6.93429 10.1852 6.68267 11.9467L8.53253 12.208C8.72119 10.8919 9.37622 9.68794 10.3808 8.81704C11.3855 7.94613 12.6704 7.46669 14 7.46667V5.6ZM21.3173 11.9467C21.0657 10.1852 20.1872 8.57367 18.843 7.40783C17.4989 6.24198 15.7793 5.60009 14 5.6V7.46667C15.3296 7.46669 16.6145 7.94613 17.6192 8.81704C18.6238 9.68794 19.2807 10.8919 19.4693 12.208L21.3173 11.9467ZM21.336 12.0773L21.3173 11.9467L19.4693 12.208L19.4861 12.3387L21.336 12.0773ZM19.8613 17.6568C21.0373 16.1373 21.6309 14.1587 21.336 12.0773L19.488 12.3405C19.595 13.0746 19.5526 13.8226 19.3634 14.5399C19.1741 15.2571 18.8419 15.9287 18.3867 16.5144L19.8613 17.6568ZM16.8 20.3467V23.3333H18.6667V20.3485L16.8 20.3467ZM17.7333 22.4H10.2667V24.2667H17.7333V22.4ZM11.2 23.3333V20.3485H9.33333V23.3333H11.2ZM6.664 12.0773C6.522 13.0587 6.5794 14.0587 6.83278 15.0173C7.08617 15.976 7.53032 16.8737 8.13867 17.6568L9.6152 16.5144C9.15996 15.9287 8.82588 15.2571 8.63663 14.5399C8.44738 13.8226 8.40499 13.0727 8.512 12.3387L6.664 12.0773ZM11.2 20.3467C11.2 18.8104 10.3824 17.5037 9.61333 16.5125L8.13867 17.6568C8.8536 18.5808 9.33333 19.4619 9.33333 20.3467H11.2ZM18.3867 16.5125C17.6157 17.5056 16.8 18.8104 16.8 20.3467H18.6667C18.6667 19.4619 19.1464 18.5808 19.8613 17.6568L18.3867 16.5125ZM13.0667 0V3.73333H14.9333V0H13.0667ZM0 14.9333H3.73333V13.0667H0V14.9333ZM24.2667 14.9333H28V13.0667H24.2667V14.9333ZM6.2608 6.80587L3.4608 4.00587L2.1392 5.32747L4.9392 8.12747L6.2608 6.80587ZM23.0608 8.12747L25.8608 5.32747L24.5392 4.00587L21.7392 6.80587L23.0608 8.12747Z' fill='%232D2D33'/%3E%3C/svg%3E%0A"); --bulb-icon-on: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.7333 23.3333V24.2667C17.9809 24.2667 18.2183 24.1683 18.3933 23.9933C18.5683 23.8183 18.6667 23.5809 18.6667 23.3333H17.7333ZM10.2667 23.3333H9.33333C9.33333 23.5809 9.43167 23.8183 9.6067 23.9933C9.78173 24.1683 10.0191 24.2667 10.2667 24.2667V23.3333ZM11.2 28H16.8V26.1333H11.2V28ZM6.68267 11.9467L6.664 12.0773L8.512 12.3387L8.53253 12.208L6.68267 11.9467ZM14 5.6C12.2207 5.60009 10.5011 6.24198 9.15697 7.40783C7.81281 8.57367 6.93429 10.1852 6.68267 11.9467L8.53253 12.208C8.72119 10.8919 9.37622 9.68794 10.3808 8.81704C11.3855 7.94613 12.6704 7.46669 14 7.46667V5.6ZM21.3173 11.9467C21.0657 10.1852 20.1872 8.57367 18.843 7.40783C17.4989 6.24198 15.7793 5.60009 14 5.6V7.46667C15.3296 7.46669 16.6145 7.94613 17.6192 8.81704C18.6238 9.68794 19.2807 10.8919 19.4693 12.208L21.3173 11.9467ZM21.336 12.0773L21.3173 11.9467L19.4693 12.208L19.4861 12.3387L21.336 12.0773ZM19.8613 17.6568C21.0373 16.1373 21.6309 14.1587 21.336 12.0773L19.488 12.3405C19.595 13.0746 19.5526 13.8226 19.3634 14.5399C19.1741 15.2571 18.8419 15.9287 18.3867 16.5144L19.8613 17.6568ZM16.8 20.3467V23.3333H18.6667V20.3485L16.8 20.3467ZM17.7333 22.4H10.2667V24.2667H17.7333V22.4ZM11.2 23.3333V20.3485H9.33333V23.3333H11.2ZM6.664 12.0773C6.522 13.0587 6.5794 14.0587 6.83278 15.0173C7.08617 15.976 7.53032 16.8737 8.13867 17.6568L9.6152 16.5144C9.15996 15.9287 8.82588 15.2571 8.63663 14.5399C8.44738 13.8226 8.40499 13.0727 8.512 12.3387L6.664 12.0773ZM11.2 20.3467C11.2 18.8104 10.3824 17.5037 9.61333 16.5125L8.13867 17.6568C8.8536 18.5808 9.33333 19.4619 9.33333 20.3467H11.2ZM18.3867 16.5125C17.6157 17.5056 16.8 18.8104 16.8 20.3467H18.6667C18.6667 19.4619 19.1464 18.5808 19.8613 17.6568L18.3867 16.5125ZM13.0667 0V3.73333H14.9333V0H13.0667ZM0 14.9333H3.73333V13.0667H0V14.9333ZM24.2667 14.9333H28V13.0667H24.2667V14.9333ZM6.2608 6.80587L3.4608 4.00587L2.1392 5.32747L4.9392 8.12747L6.2608 6.80587ZM23.0608 8.12747L25.8608 5.32747L24.5392 4.00587L21.7392 6.80587L23.0608 8.12747Z' fill='%234675E4'/%3E%3C/svg%3E%0A"); --editor-search-icon: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5959 11.4069L11.7584 10.2819L17.2476 16.1251L16.0851 17.2501L10.5959 11.4069Z' fill='white'/%3E%3Cpath d='M7.3371 12.7501C10.5471 12.7501 13.1494 10.2317 13.1494 7.12509C13.1494 4.01849 10.5471 1.50009 7.3371 1.50009C4.12704 1.50009 1.52478 4.01849 1.52478 7.12509C1.52478 10.2317 4.12704 12.7501 7.3371 12.7501Z' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A"); --editor-plus-icon: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='8.25009' width='12' height='1.5' fill='%23626894'/%3E%3Crect x='9.75' y='3.00009' width='12' height='1.5' transform='rotate(90 9.75 3.00009)' fill='%23626894'/%3E%3C/svg%3E%0A"); --editor-minus-icon: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='8.25009' width='12' height='1.5' fill='%23626894'/%3E%3C/svg%3E%0A"); --writing-icon-colored:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M29.0983 4.74692H15.7184L7.69043 12.7749V32.0419C7.69043 33.8154 9.12812 35.2531 10.9016 35.2531H29.0983C30.8717 35.2531 32.3094 33.8154 32.3094 32.0419V7.95809C32.3094 6.18461 30.8717 4.74692 29.0983 4.74692Z' fill='%2350B12A'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5072 12.7748C14.2807 12.7748 15.7184 11.3371 15.7184 9.56367V4.7469L7.69045 12.7748H12.5072Z' fill='%23B9EBA6'/%3E%3Crect x='12.9065' y='19.7324' width='14.7221' height='2.67598' rx='1.33799' fill='%23B9EBA6'/%3E%3Crect x='12.9065' y='25.6195' width='14.7221' height='2.67598' rx='1.33799' fill='%23B9EBA6'/%3E%3C/svg%3E%0A"); --translation-icon-colored:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.6504 14.5111C18.4413 14.5111 16.6504 16.302 16.6504 18.5111V32.4667C16.6504 34.6759 18.4413 36.4667 20.6504 36.4667H34.606C36.8152 36.4667 38.606 34.6759 38.606 32.4667V18.5111C38.606 16.302 36.8152 14.5111 34.606 14.5111H20.6504ZM31.2373 32.1437V26.0703H32.9442V24.628H31.2373V19.9704H29.4907V32.1437H31.2373ZM22.5572 30.0663C26.6194 28.0154 27.9955 24.8926 27.9955 21.2274H22.2529V22.6432H26.2357C25.9181 25.3558 24.4229 27.2611 21.5781 28.7299L22.5572 30.0663Z' fill='%23F67199'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.39404 7.53326C1.39404 5.32413 3.1849 3.53326 5.39404 3.53326H19.3497C21.5588 3.53326 23.3497 5.32413 23.3497 7.53326V12.5111H20.6505C18.5321 12.5111 16.6702 13.6089 15.6025 15.2666L13.6294 9.13183H11.0997L7.65408 19.8903H9.83485L10.5909 17.128H14.0801L14.6505 19.2122V25.4889H5.39404C3.1849 25.4889 1.39404 23.698 1.39404 21.4889V7.53326ZM13.295 14.2785C13.1165 13.6807 12.9545 13.0498 12.7914 12.4145L12.7914 12.4144C12.649 11.86 12.5058 11.3022 12.35 10.7601H12.2919C12.0156 11.9378 11.7103 13.159 11.3759 14.2785L11.0561 15.4561H13.6149L13.295 14.2785Z' fill='%23FFAFC8'/%3E%3C/svg%3E%0A"); --bulb-icon-colored:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='19.4102' cy='20.5941' r='8.56599' fill='%23FFBA4A'/%3E%3Cpath d='M13.9845 23.7272H24.836L23.1137 32.3285H15.7068L13.9845 23.7272Z' fill='%23FFBA4A'/%3E%3Crect x='16.2377' y='33.29' width='6.34521' height='3.52509' fill='%23FADDAD'/%3E%3Crect x='20.4312' y='3.64395' width='6' height='2.04181' transform='rotate(90 20.4312 3.64395)' fill='%23FADDAD'/%3E%3Crect x='34.1932' y='11.4122' width='6' height='2.04181' transform='rotate(150 34.1932 11.4122)' fill='%23FADDAD'/%3E%3Crect x='35.8093' y='22.8384' width='6' height='2.04181' transform='rotate(-180 35.8093 22.8384)' fill='%23FADDAD'/%3E%3Crect x='9.01123' y='22.8384' width='6' height='2.04181' transform='rotate(-180 9.01123 22.8384)' fill='%23FADDAD'/%3E%3Crect width='6' height='2.04181' transform='matrix(0.866025 0.5 0.5 -0.866025 4.62219 11.4122)' fill='%23FADDAD'/%3E%3C/svg%3E%0A"); cursor: pointer; &.download-btn { width: 139px; height: 36px; display: flex; justify-content: flex-start; padding-left: 18px; align-items: center; border-radius: 80px; box-shadow: 0 0 0 1px #C0C0C0; color: #3366FF; font-size: 14px; font-weight: 500; line-height: 19.6px; background-image: var(--download-icon); background-repeat: no-repeat; background-position-x: 82%; background-position-y: center; } &.open-btn { width: 114px; height: 36px; display: flex; justify-content: flex-start; padding-left: 18px; align-items: center; border-radius: 80px; box-shadow: 0 0 0 1px #C0C0C0; color: #3366FF; font-size: 14px; font-weight: 500; line-height: 19.6px; background-image: var(--plus-icon); background-repeat: no-repeat; background-position-x: 82%; background-position-y: center; } &.close-btn { background-image: var(--close-icon); width: 24px; height: 24px; display: block; ; } &.find-btn { color: #3366FF; } &.upload-btn { color: #3366FF; } &.cancel { font-size: 20px; width: 134px; } &.temp-btn { background-color: #F0F0F0; color: #444444; width: 101px; height: 49px; border-radius: 4px; padding: 0; font-size: 18px; } &.initial { font-size: 20px; width: 134px; color: #3366FF; padding: 0 28px; text-align: left; background-image: var(--initial-icon); background-repeat: no-repeat; background-position-y: center; background-position-x: calc(100% - 28px); } &.confirm { font-size: 20px; width: 134px; } &.search-btn { border-radius: 0; width: 112px; height: 84px; font-size: 0; background-image: var(--search-keyword-icon); background-repeat: no-repeat; background-position: center center; background-color: #212B36; } &.attach-file { position: absolute; transform: translate(12px, -3px); display: inline-block; width: 24px; height: 24px; background-image: var(--file-icon); background-repeat: no-repeat; background-position: center center; } &.remove { width: 68px; height: 34px; padding: 6px 20px; border-radius: 4px; box-shadow: 0 0 0 1px #3366FF; color: #3366FF; background-color: #fff; } &.register { background-color: #3366FF; color: #fff; width: 101px; height: 49px; border-radius: 4px; padding: 0; font-size: 18px; } &.search-icon-btn { width: 48px; height: 48px; background-color: #3366FF; border-radius: 6px; background-image: var(--editor-search-icon); background-repeat: no-repeat; background-position: center center; } &.plus-icon-btn { width: 48px; height: 48px; background-color: #fff; border-radius: 6px; box-shadow: 0 0 0 1px #CCCCCC; background-image: var(--editor-plus-icon); background-repeat: no-repeat; background-position: center center; } &.minus-icon-btn { width: 48px; height: 48px; background-color: #fff; border-radius: 6px; box-shadow: 0 0 0 1px #CCCCCC; background-image: var(--editor-minus-icon); background-repeat: no-repeat; background-position: center center; } &.translation-btn { width: 132px; height: 48px; background-color: #4675E4; color: #fff; font-family: 'SpoqaHanSansNeo'; font-size: 18px; font-weight: 700; line-height: 22.54px; } &.editor-btn { width: 190px; height: 90px; text-align: left; padding-left: 38px; font-family: 'SpoqaHanSansNeo'; font-size: 20px; font-weight: 500; line-height: 25.04px; background-repeat: no-repeat; background-position: center left; &:hover { color: #4675E4; font-weight: 700; transition: ease all 0.3s; } &[selected] { font-weight: 700; color: #4675E4; } &.writing { background-image: var(--writing-icon); transition: ease all 0.3s; &:hover { background-image: var(--writing-icon-on); } &[selected] { background-image: var(--writing-icon-on); } } &.writing-colored { background-image: var(--writing-icon-colored); transition: ease all 0.3s; } &.translation-colored { background-image: var(--translation-icon-colored); } &.guide-colored { background-image: var(--bulb-icon-colored); } } &[variant="text"] { padding: 0; &.filter { font-size: 20px; font-weight: 400; line-height: 28px; position: relative; &:first-of-type { &:before { content: ''; display: block; position: absolute; right: -14px; bottom: 6px; width: 1px; height: 16px; background-color: #BDBDBD; } } } &[current] { color: #3366FF; font-weight: 700; } } } select { &.disappear { display: none; } &.select-keyword { background-image: var(--select-icon); background-repeat: no-repeat; background-position: center right; } } .render-select { &.default { width: 100%; height: 52px; border-radius: 8px; display: flex; details { height: 100%; width: 100%; display: flex; summary { list-style-type: none; position: relative; width: auto; height: 100%; display: flex; align-items: center; padding: 0 16px; &:after { content: ''; display: block; width: 24px; height: 24px; position: absolute; right: 16px; background-image: var(--select-icon-caret-large); background-repeat: no-repeat; background-position: center center; } } >div { margin-top: 12px; box-shadow: 0px 4px 13.8px 0px #00000026; border-radius: 8px; z-index: 1; overflow: hidden; div { height: 57px; padding: 0 16px; display: flex; align-items: center; background-color: #fff; box-shadow: 0 -1px 0 0 #DCDCDC; } } &[open] { summary { &:after { rotate: 180deg; } } } } } &.middle { width: 100%; height: 49px; box-shadow: 0 0 0 1px #DCDCDC; border-radius: 8px; display: flex; details { height: 100%; width: 100%; display: flex; summary { list-style-type: none; position: relative; width: auto; height: 100%; display: flex; align-items: center; padding: 0 16px; &:after { content: ''; display: block; width: 24px; height: 24px; position: absolute; right: 16px; background-image: var(--select-icon-caret-large); background-repeat: no-repeat; background-position: center center; } } >div { margin-top: 12px; box-shadow: 0px 4px 13.8px 0px #00000026; border-radius: 8px; z-index: 1; overflow: hidden; div { height: 57px; padding: 0 16px; display: flex; align-items: center; background-color: #fff; box-shadow: 0 -1px 0 0 #DCDCDC; } } &[open] { summary { &:after { rotate: 180deg; } } } } } } /* fin button style */ /* begin chip button style */ .button { &.chip { --height: 33px; --chip-color: #fff; --chip-color-checked: #212B36; --chip-transition: ease all 0.3s; height: var(--height); min-width: 56px; overflow: hidden; cursor: pointer; display: inline-block; background-color: transparent; border-radius: var(--height); position: relative; user-select: none; box-shadow: 0 0 0 1px var(--chip-color); transition: var(--chip-transition); input { opacity: 0; width: 0; height: 0; position: absolute; &:checked { ~.label { background-color: var(--chip-color); transition: var(--chip-transition); span { color: var(--chip-color-checked); font-weight: 700; } } } } .label { height: var(--height); width: 100%; display: flex; justify-content: center; align-items: center; transition: var(--chip-transition); span { display: flex; align-items: center; color: var(--chip-color); font-size: 1.125em; line-height: 1.4em; padding: 0 16px; } } } } /* fin chip button style */ /* begin user-info style */ .user-info { --sub-color: #666; --icon-background: #3366FF; --icon-img: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.60001 2.60001H12.2C12.86 2.60001 13.4 2.06001 13.4 1.40001C13.4 0.740012 12.86 0.200012 12.2 0.200012H2.60001C1.28001 0.200012 0.200012 1.28001 0.200012 2.60001V19.4C0.200012 20.72 1.28001 21.8 2.60001 21.8H12.2C12.86 21.8 13.4 21.26 13.4 20.6C13.4 19.94 12.86 19.4 12.2 19.4H2.60001V2.60001Z' fill='white'/%3E%3Cpath d='M21.38 10.58L18.032 7.23202C17.9485 7.14628 17.8414 7.0874 17.7243 7.0629C17.6072 7.03841 17.4854 7.04942 17.3746 7.09452C17.2637 7.13962 17.1689 7.21677 17.1022 7.31609C17.0354 7.4154 16.9999 7.53237 17 7.65202V9.80002H8.59999C7.93999 9.80002 7.39999 10.34 7.39999 11C7.39999 11.66 7.93999 12.2 8.59999 12.2H17V14.348C17 14.888 17.648 15.152 18.02 14.768L21.368 11.42C21.608 11.192 21.608 10.808 21.38 10.58Z' fill='white'/%3E%3C/svg%3E%0A"); --icon-size: 48px; p { margin: 0; font-size: 1.25em; font-weight: 700; line-height: 1.1935em; text-align: right; } span { font-size: 0.875em; line-height: 1.1936em; text-align: right; color: var(--sub-color); } .logout { background-image: var(--icon-img); background-position: center center; background-repeat: no-repeat; background-color: var(--icon-background); width: var(--icon-size); height: var(--icon-size); border-radius: var(--icon-size); } } /* fin user-info style */ /* begin footer style */ footer { width: 100%; margin-top: var(--mt); --logo: url('data:image/png;base64,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'); background: #0B2149; padding: 24px 0; footer-logo { background-image: var(--logo); width: 190px; height: 54px; opacity: 0.6px; } &.absolute { position: absolute; bottom: 0; } } /* fin footer style */ /* begin list_section style */ .list-section { --border-color: #A9A9A9; --first-icon: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.2 8.29996L12 12.5L16.2 16.7' stroke='%233366FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 7L8 18' stroke='%233366FF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A"); --prev-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M13.8 8.29996L9.60001 12.5L13.8 16.7' stroke='%233366FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --no-data-icon: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_493_35538' fill='white'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M61 6H33L13 26V67C13 70.3137 15.6863 73 19 73H61C64.3137 73 67 70.3137 67 67V12C67 8.68629 64.3137 6 61 6Z'/%3E%3C/mask%3E%3Cpath d='M33 6V2H31.3431L30.1716 3.17157L33 6ZM13 26L10.1716 23.1716L9 24.3431V26H13ZM33 10H61V2H33V10ZM15.8284 28.8284L35.8284 8.82843L30.1716 3.17157L10.1716 23.1716L15.8284 28.8284ZM17 67V26H9V67H17ZM19 69C17.8954 69 17 68.1046 17 67H9C9 72.5228 13.4772 77 19 77V69ZM61 69H19V77H61V69ZM63 67C63 68.1046 62.1046 69 61 69V77C66.5228 77 71 72.5229 71 67H63ZM63 12V67H71V12H63ZM61 10C62.1046 10 63 10.8954 63 12H71C71 6.47715 66.5229 2 61 2V10Z' fill='%23666666' mask='url(%23path-1-inside-1_493_35538)'/%3E%3Crect x='38' y='24' width='5' height='22' fill='%23666666'/%3E%3Crect x='38' y='52' width='5' height='5' fill='%23666666'/%3E%3C/svg%3E%0A"); .full-width { width: 100%; } .list-count { display: flex; gap: 4px; margin-left: 8px; p { font-size: 1.25em; line-height: 1.1935em; } b { font-size: 1.25em; line-height: 1.1935em; color: #3366FF; } } .list-wrap { border-radius: 16px; box-shadow: 0 0 0 1px var(--border-color); margin-top: 16px; >div { >div { padding: 40px 0; margin: 0 40px; box-shadow: 0 1px 0 0 #DDDDDD; &:last-of-type { box-shadow: initial; } >.list-category { display: inline-block; font-weight: 700; line-height: 1.4em; color: #3366FF; border-bottom: 2px solid #3366FF; padding-bottom: 2px; margin-bottom: 12px; &.green { color: #04AA04; border-bottom: 2px solid #04AA04; } &.violet { color: #9835DA; border-bottom: 2px solid #9835DA; } &.orange { color: #F18744; border-bottom: 2px solid #F18744; } &.red { color: #D01C64; border-bottom: 2px solid #D01C64; } &.garsian { color: #0D98A1; border-bottom: 2px solid #0D98A1; } } } } .writer { display: flex; gap: 20px; p { &:first-of-type { position: relative; overflow: initial; &:before { content: ''; width: 1px; height: 12px; background-color: #666666; display: block; position: absolute; right: -10px; bottom: 4px; } } } } .list-action { padding: 40px 0; box-shadow: 0 -1px 0 0 #DCDCDC; .list-more { padding: 16px 56px; font-size: 1.25em; line-height: 1.4em; } } table { margin-top: 40px; margin-left: 40px; margin-right: 40px; border-collapse: collapse; thead { tr { th { font-size: 20px; font-weight: 500; line-height: 28px; text-align: center; height: 48px; border-bottom: 1px solid #999999; } } } tbody { tr { transition: background-color ease 0.2s; position: relative; vertical-align: text-top; td { text-align: center; padding: 18px 0; font-size: 20px; font-weight: 400; line-height: 28px; border-bottom: 1px solid #F0F0F0; color: #444; div { font-size: inherit; font-weight: inherit; color: inherit; p { font-size: inherit; font-weight: inherit; color: inherit; } } &[title] { text-align: left; cursor: pointer; } position: relative; } &:hover { background-color: #EDF1FF; transition: background-color ease 0.2s; td { &[title], &[author] { color: #3366FF; font-weight: 700; } } } details { font-size: inherit; font-weight: inherit; color: inherit; summary { font-size: inherit; font-weight: inherit; color: inherit; list-style-type: none; } } &[open] { height: calc(71px + 140px + 81px); vertical-align: text-top; td { position: initial; details { width: 100%; >div { background-color: #fff; border-top: 1px solid #eee; left: 0; top: 71px; padding: 20px 0 16px 0; cursor: text; border-bottom: 1px solid #eee; >div { &:first-of-type { padding-left: 24px; padding-right: 24px; padding-bottom: 20px; p { font-size: 18px; font-weight: 400; line-height: 25.2px; color: #444444; } } &:last-of-type { &[row] { border-top: 1px solid #F0F0F0; div { padding-top: 16px; &:first-of-type { padding-left: 24px; flex: 1 1 auto; select { width: 100%; padding-left: 16px; appearance: none; -webkit-appearance: none; font-size: 18px; background-color: #FFFFFF; border: 0; border-radius: 4px; box-shadow: 0 0 0 1px #BDBDBD; color: #444; cursor: pointer; outline: none; height: 49px; background-image: var(--select-icon-caret); background-repeat: no-repeat; background-position-y: center; background-position-x: calc(100% - 16px); } } &:last-of-type { padding-right: 20px; } } } &[col] { padding-left: 24px; padding-top: 20px; border-top: 1px solid #F0F0F0; div { &:first-of-type { align-items: center; p { &:first-of-type { font-size: 18px; font-weight: 700; line-height: 25.2px; color: #222222; } &:last-of-type { font-size: 16px; font-weight: 400; line-height: 22.4px; color: #999999; } } } &:last-of-type { p { font-size: 18px; font-weight: 400; line-height: 25.2px; color: #444; } } } } } } } } } } } } } .table-action { position: relative; button { position: absolute; right: 40px; top: 20px; } } .table-nav { padding: 40px; align-items: center; justify-content: center; button { cursor: pointer; padding: 8px; font-size: 0; width: 24px; height: 24px; display: block; background-repeat: no-repeat; background-position: center center; &.btn-first { background-image: var(--first-icon); } &.btn-prev { background-image: var(--prev-icon); } &.btn-last { background-image: var(--first-icon); rotate: 180deg; } &.btn-next { background-image: var(--prev-icon); rotate: 180deg; } } a { font-size: 18px; font-weight: 400; line-height: 25.2px; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; &[data-current="true"] { border-radius: 100%; background: #3366FF26; color: #3366FF; } } } .no-data { display: flex; flex-direction: column; align-items: center; gap: 32px; margin-top: 8px; margin-bottom: 8px; &.inquiry { padding: 115px 0; p { color: #666666; } } .no-data-title { .no-data-icon { background-image: var(--no-data-icon); background-repeat: no-repeat; background-position: center center; width: 80px; height: 80px; } p { b { font-size: 24px; font-weight: 700; line-height: 33.6px; color: #3366FF; } } } .no-data-desc { ul { margin: 0; li { font-size: 16px; font-weight: 400; line-height: 28.8px; color: #666666; &:before { content: 'ยท' } } } } } } } /* fin list_section style */ /* begin modal style */ .modal { --first-icon: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.2 8.29996L12 12.5L16.2 16.7' stroke='%233366FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 7L8 18' stroke='%233366FF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A"); --prev-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M13.8 8.29996L9.60001 12.5L13.8 16.7' stroke='%233366FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); position: fixed; left: 50%; top: 50%; z-index: var(--z-index); transform: translate(-50%, -50%); overflow: hidden; box-shadow: 0px 0px 25px 100vw #00000099; border-radius: 16px; &[data-state="open"] { display: block; } &[data-state="close"] { display: none; } .modal-head { width: var(--modal-width); height: 74px; background-color: #3366FF; [row] { height: 100%; justify-content: space-between; align-items: center; padding: 0 32px; p { font-size: 24px; font-weight: 700; line-height: 33.6px; color: #fff; } } } .modal-body { padding: 40px; background-color: #fff; h2 { text-align: center; } .border-top { border-top: 1px solid #DCDCDC; padding-top: 20px } .list-count { display: flex; gap: 4px; p { font-size: 1.25em; line-height: 1.1935em; } b { font-size: 1.25em; line-height: 1.1935em; color: #3366FF; } } table { &.tbody { width: 100%; border-radius: 8px; border-collapse: collapse; overflow: hidden; box-shadow: 1px 0 0 0px #BDBDBD; tbody { tr { td { padding: 21.5px 20px; border-bottom: 1px solid #BDBDBD; border-top: 1px solid #BDBDBD; font-size: 18px; font-weight: 400; line-height: 25.2px; width: 340px; &[head] { width: 160px; background-color: #EDF1FF; } } } } } &.list { width: 100%; border-collapse: collapse; thead { tr { th { border-top: 1px solid #999999; border-bottom: 1px solid #999999; font-size: 16px; font-weight: 700; line-height: 22.4px; padding: 16px 0; } } } tbody { tr { td { padding: 16px 0; border-bottom: 1px solid #DCDCDC; text-align: center; } } } } &.human-info { tbody { tr { td { font-size: 16px; font-weight: 400; line-height: 22.4px; width: auto; &[head] { width: 100px; text-align: center; font-size: 18px; } &[img] { padding: 0; width: 100px; background-image: var(--img); background-position: center center; background-size: cover; background-repeat: no-repeat; } } } } } } .table-nav { padding: 28px 0; align-items: center; justify-content: center; button { cursor: pointer; padding: 8px; font-size: 0; width: 24px; height: 24px; display: block; background-repeat: no-repeat; background-position: center center; &.btn-first { background-image: var(--first-icon); } &.btn-prev { background-image: var(--prev-icon); } &.btn-last { background-image: var(--first-icon); rotate: 180deg; } &.btn-next { background-image: var(--prev-icon); rotate: 180deg; } } a { font-size: 18px; font-weight: 400; line-height: 25.2px; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; &[data-current="true"] { border-radius: 100%; background: #3366FF26; color: #3366FF; } } } select { width: auto; height: 46px; padding: 12px 16px 12px 16px; border-radius: 8px; border: 1px solid #BDBDBD; } textarea { width: 800px; height: 112px; padding: 12px 16px 12px 16px; border: 1px solid #BDBDBD; border-radius: 8px; overflow: hidden; resize: none; } input { &[type="text"] { width: 800px; padding: 12px; border-radius: 8px; border: 1px solid #BDBDBD; display: flex; &[width] { flex: 1 1 auto; width: 100%; } } &[type="date"] { width: 148px; height: 41px; padding: 0 16px; gap: 0px; border-radius: 8px; justify-content: space-between; border: 1px solid #BDBDBD; &[width] { flex: 1 1 auto; width: 100%; } &[height] { height: 100%; } } } .input-file { width: 308px; border: 1px solid #BDBDBD; border-radius: 8px; display: flex; align-items: center; p { width: 100%; color: #999999; padding-left: 16px } input { width: 0; height: 0; } } .category { display: inline-block; font-weight: 700; line-height: 1.4em; color: #3366FF; border-bottom: 2px solid #3366FF; padding-bottom: 2px; &.green { color: #04AA04; border-bottom: 2px solid #04AA04; } &.violet { color: #9835DA; border-bottom: 2px solid #9835DA; } &.orange { color: #F18744; border-bottom: 2px solid #F18744; } &.red { color: #D01C64; border-bottom: 2px solid #D01C64; } &.garsian { color: #0D98A1; border-bottom: 2px solid #0D98A1; } } .title { p { width: calc(var(--modal-width) - 40px - 40px); font-size: 24px; font-weight: 700; line-height: 33.6px; display: -webkit-box; /* ํ‘œ์‹œ์ค„์ˆ˜ */ -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } } .content { p { font-size: 16px; font-weight: 400; line-height: 22.4px; } } button { &.close { width: 147px; height: 60px; font-size: 20px; font-weight: 600; line-height: 28px; } } } } /* fin modal style */ /* begin search_box style */ .header-search { --default: #F0F0F0; --placeholder: #999; --height: 39px; --search-icon: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5605 15.4394L13.7528 11.6317C14.5395 10.4459 15 9.02619 15 7.49994C15 3.36444 11.6355 -6.10352e-05 7.5 -6.10352e-05C3.3645 -6.10352e-05 0 3.36444 0 7.49994C0 11.6354 3.3645 14.9999 7.5 14.9999C9.02625 14.9999 10.446 14.5394 11.6318 13.7527L15.4395 17.5604C16.0245 18.1462 16.9755 18.1462 17.5605 17.5604C18.1462 16.9747 18.1462 16.0252 17.5605 15.4394ZM2.25 7.49994C2.25 4.60494 4.605 2.24994 7.5 2.24994C10.395 2.24994 12.75 4.60494 12.75 7.49994C12.75 10.3949 10.395 12.7499 7.5 12.7499C4.605 12.7499 2.25 10.3949 2.25 7.49994Z' fill='%233366FF'/%3E%3C/svg%3E"); display: inline-block; position: relative; input { width: var(--width); padding-left: 20px; padding-right: 20px; height: var(--height); background-color: var(--default); border: 0; border-radius: var(--height); transition: ease all 0.4s; &::placeholder { font-size: 1.125em; font-weight: 400; line-height: 1.534em; color: var(--placeholder) } &:focus-visible { outline: 0; box-shadow: 1px 1px 2px 1px #00000026; transition: ease all 0.4s; } } button { background-image: var(--search-icon); background-color: var(--default); position: absolute; right: 20px; top: calc(var(--height) / 2); transform: translateY(-50%); height: 18px; width: 18px; border: 0; } } /* fin search_box style */ /* begin search_section style */ .search-section { --tab-img-active: url("data:image/svg+xml,%3Csvg width='174' height='48' viewBox='0 0 174 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M174 48C166.082 48 158.997 43.3747 155.871 36.1799L145.244 11.8201C142.118 4.62527 135.033 0 127.114 0H14.5866C6.56398 0 0 6.47538 0 14.3897V48H174Z' fill='%23212B36'/%3E%3C/svg%3E"); --tab-img-inactive: url("data:image/svg+xml,%3Csvg width='175' height='50' viewBox='0 0 175 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M175 49C167.031 49 159.9 44.3747 156.754 37.1799L146.058 12.8201C142.912 5.62527 135.782 1 127.812 1H15.6806C7.60627 1 1 7.47538 1 15.3897V49H175Z' fill='%23F0F0F0' stroke='white' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E%0A"); .tabs { position: relative; margin-top: 48px; &.none { margin-top: 0; } .tabs-btn { margin-bottom: 24px; button { width: 160px; height: 48px; border-radius: 76px; display: flex; justify-content: center; align-items: center; &.total { color: #212B36; background-color: #fff; box-shadow: 0 0 0 1px #212B36; &.current { color: #fff; background-color: #212B36; } } &.blue { color: #3366FF; background-color: #fff; box-shadow: 0 0 0 1px #3366FF; &.current { color: #fff; background-color: #3366FF; } } &.green { color: #04AA04; background-color: #fff; box-shadow: 0 0 0 1px #04AA04; &.current { color: #fff; background-color: #04AA04; } } &.violet { background-color: #fff; color: #9835DA; box-shadow: 0 0 0 1px #9835DA; &.current { color: #fff; background-color: #9835DA; } } &.orange { background-color: #fff; color: #F18744; box-shadow: 0 0 0 1px #F18744; &.current { color: #fff; background-color: #F18744; } } &.red { background-color: #fff; color: #D01C64; box-shadow: 0 0 0 1px #D01C64; &.current { color: #fff; background-color: #D01C64; } } &.garsian { background-color: #fff; color: #0D98A1; box-shadow: 0 0 0 1px #0D98A1; &.current { color: #fff; background-color: #0D98A1; } } } } .tab { position: absolute; width: 100%; .tab-head { position: absolute; top: -48px; width: 174px; height: 48px; background-image: var(--tab-img-inactive); background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; cursor: pointer; p { transform: translateX(-10px); color: #666666; font-size: 1.25em; font-weight: 500; } } .tab-content { display: none; } .tab-content { height: calc(133px); border-radius: 16px; background-color: #212B36; &.col2 { height: calc(210px); } &.all-radius { border-radius: 16px; } } &[active] { .tab-head { background-image: var(--tab-img-active); z-index: 5; p { color: #fff; font-size: 1.25em; font-weight: 700; } } .tab-content { display: flex; flex-direction: row; align-items: center; width: 100%; form { display: flex; justify-content: space-between; flex-grow: 1; padding: 0 40px; &.flex-start { justify-content: flex-start; } span { height: 1em; } select { width: 180px; height: 52px; padding: 12px 16px 12px 16px; border-radius: 8px; &.black { background-color: transparent; color: #fff; border: 0; box-shadow: inset 0 0 0 1px #FFFFFF; } &.search-section-select { appearance: none; -webkit-appearance: none; font-size: 18px; background-color: #FFFFFF; border: 0; border-radius: 8px; padding: 0 16px; width: 107px; color: #444; cursor: pointer; outline: none; height: 41px; background-image: var(--select-icon); background-repeat: no-repeat; background-position-y: center; background-position-x: calc(100% - 16px); } } .tab-search-field { display: inline-block; position: relative; --search-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5605 18.4394L16.7527 14.6317C17.5395 13.4459 18 12.0262 18 10.4999C18 6.36444 14.6355 2.99994 10.5 2.99994C6.36447 2.99994 2.99997 6.36444 2.99997 10.4999C2.99997 14.6354 6.36447 17.9999 10.5 17.9999C12.0262 17.9999 13.446 17.5394 14.6317 16.7527L18.4395 20.5604C19.0245 21.1462 19.9755 21.1462 20.5605 20.5604C21.1462 19.9747 21.1462 19.0252 20.5605 18.4394ZM5.24997 10.4999C5.24997 7.60494 7.60497 5.24994 10.5 5.24994C13.395 5.24994 15.75 7.60494 15.75 10.4999C15.75 13.3949 13.395 15.7499 10.5 15.7499C7.60497 15.7499 5.24997 13.3949 5.24997 10.4999Z' fill='%23212B36'/%3E%3C/svg%3E%0A"); button { background-image: var(--search-icon); background-color: #fff; position: absolute; right: 20px; top: calc(52px / 2); transform: translateY(-50%); height: 24px; width: 24px; border: 0; } input { &[type="search"] { width: 480px; height: 52px; padding: 0 16px; border-radius: 8px; &::placeholder { font-size: 1.125em; font-weight: 400; line-height: 1.534em; color: #999999; } } } } input { &[type="date"] { width: 148px; height: 41px; padding: 0 16px; gap: 0px; border-radius: 8px; justify-content: space-between; opacity: 0px; border: initial; &[height] { height: 100%; } } } } } &:nth-of-type(1) { .tab-head { left: calc(140px * 0); z-index: 9; } } &:nth-of-type(2) { .tab-head { left: calc(140px * 1); z-index: 9; } } &:nth-of-type(3) { .tab-head { left: calc(140px * 2); z-index: 9; } } &:nth-of-type(4) { .tab-head { left: calc(140px * 3); z-index: 9; } } &:nth-of-type(5) { .tab-head { left: calc(140px * 4); z-index: 9; } } } &:nth-of-type(1) { .tab-head { left: calc(140px * 0); z-index: 5; } } &:nth-of-type(2) { .tab-head { left: calc(140px * 1); z-index: 4; } } &:nth-of-type(3) { .tab-head { left: calc(140px * 2); z-index: 3; } } &:nth-of-type(4) { .tab-head { left: calc(140px * 3); z-index: 2; } } &:nth-of-type(5) { .tab-head { left: calc(140px * 4); z-index: 1; } } } } } /* fin search_section style */ /* begin search_detail_answer style */ .search-detail-answer { --thumbup-icon: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='15.5' stroke='%233366FF'/%3E%3Cpath d='M18.5 14.3333L17.6783 14.1967C17.6585 14.316 17.6649 14.4382 17.697 14.5548C17.7292 14.6714 17.7863 14.7797 17.8645 14.872C17.9427 14.9643 18.0401 15.0384 18.1498 15.0893C18.2595 15.1402 18.379 15.1666 18.5 15.1667V14.3333ZM9.33333 14.3333V13.5C9.11232 13.5 8.90036 13.5878 8.74408 13.7441C8.5878 13.9004 8.5 14.1123 8.5 14.3333H9.33333ZM11 23.5H20.4667V21.8333H11V23.5ZM21.4667 13.5H18.5V15.1667H21.4667V13.5ZM19.3225 14.47L19.9933 10.4408L18.35 10.1667L17.6783 14.1967L19.3225 14.47ZM18.35 8.5H18.1717V10.1667H18.35V8.5ZM15.3975 9.98417L13.3025 13.1292L14.6892 14.0542L16.7858 10.9092L15.3975 9.98417ZM12.6083 13.5H9.33333V15.1667H12.6083V13.5ZM8.5 14.3333V21H10.1667V14.3333H8.5ZM22.9183 21.49L23.9183 16.49L22.285 16.1633L21.285 21.1633L22.9183 21.49ZM13.3025 13.1292C13.2264 13.2433 13.1224 13.3368 13.0015 13.4015C12.8805 13.4662 12.7455 13.5 12.6083 13.5V15.1667C13.0199 15.1666 13.4251 15.065 13.7879 14.8708C14.1508 14.6766 14.4601 14.3958 14.6883 14.0533L13.3025 13.1292ZM19.9933 10.4408C20.0331 10.2021 20.0205 9.95759 19.9562 9.72426C19.892 9.49092 19.7777 9.27438 19.6213 9.08968C19.4649 8.90498 19.2702 8.75655 19.0507 8.65472C18.8311 8.55289 18.592 8.50009 18.35 8.5V10.1667L19.9933 10.4408ZM21.4667 15.1667C21.59 15.1666 21.7118 15.1939 21.8232 15.2467C21.9347 15.2994 22.0331 15.3762 22.1113 15.4715C22.1895 15.5669 22.2456 15.6784 22.2755 15.798C22.3054 15.9176 22.3092 16.0424 22.285 16.1633L23.9183 16.49C23.9908 16.1274 23.9819 15.7532 23.8924 15.3944C23.8028 15.0356 23.6347 14.7012 23.4003 14.4152C23.1659 14.1292 22.8709 13.8987 22.5367 13.7405C22.2025 13.5822 21.8373 13.5001 21.4675 13.5L21.4667 15.1667ZM20.4667 23.5C21.0447 23.5 21.6049 23.2998 22.0519 22.9333C22.4988 22.5668 22.805 22.0568 22.9183 21.49L21.285 21.1633C21.2472 21.3525 21.145 21.5226 20.9957 21.6448C20.8465 21.767 20.6595 21.8336 20.4667 21.8333V23.5ZM18.1717 8.5C17.6229 8.50001 17.0827 8.63548 16.5989 8.89438C16.1151 9.15329 15.7019 9.52763 15.3975 9.98417L16.7858 10.9092C16.938 10.6808 17.1433 10.4936 17.3852 10.364C17.6271 10.2345 17.8973 10.1667 18.1717 10.1667V8.5ZM11 21.8333C10.779 21.8333 10.567 21.7455 10.4107 21.5893C10.2545 21.433 10.1667 21.221 10.1667 21H8.5C8.5 21.663 8.76339 22.2989 9.23223 22.7678C9.70107 23.2366 10.337 23.5 11 23.5V21.8333Z' fill='%233366FF'/%3E%3Cpath d='M12.6667 14.3333V22.6666' stroke='%233366FF' stroke-width='1.66667'/%3E%3C/svg%3E%0A"); --tab-img: url("data:image/svg+xml,%3Csvg width='255' height='48' viewBox='0 0 255 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M255 48C247.082 48 239.997 43.3747 236.871 36.1799L226.244 11.8201C223.118 4.62527 216.033 0 208.114 0H14.5866C6.56398 0 0 6.47538 0 14.3897V48H255Z' fill='%23EDF1FF'/%3E%3C/svg%3E%0A"); .answer-header { flex: 1 1 auto; padding: 31px 40px; background-color: #EDF1FF; position: relative; margin-top: 48px; border-top-right-radius: 16px; &:before { content: attr(data-title); display: flex; justify-content: flex-start; align-items: center; padding-left: 40px; width: 255px; height: 48px; position: absolute; top: -48px; left: 0; background-image: var(--tab-img); background-repeat: no-repeat; background-position: left; font-size: 24px; font-weight: 700; color: #3366FF; } span { font-size: 20px; &.green { color: #04AA04; } &.violet { color: #9835DA; } &.orange { color: #F18744; } &.red { color: #D01C64; } &.garsian { color: #0D98A1; } } button { max-width: 286px; height: 38px !important; padding: 6px 12px; color: #FFFFFF; font-size: 16px; font-weight: 400; line-height: 28px; box-shadow: 0 0 0 1px #FFFFFF; border-radius: 4px; display: -webkit-box; /* ํ‘œ์‹œ์ค„์ˆ˜ */ -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; &.green { color: #04AA04; box-shadow: 0 0 0 1px #04AA04; } &.violet { color: #9835DA; box-shadow: 0 0 0 1px #9835DA; } &.orange { color: #F18744; box-shadow: 0 0 0 1px #F18744; } &.red { color: #D01C64; box-shadow: 0 0 0 1px #D01C64; } &.garsian { color: #0D98A1; box-shadow: 0 0 0 1px #0D98A1; } &.thumbsup { width: 32px; height: 32px; font-size: 0; padding: 0; box-shadow: initial; background-image: var(--thumbup-icon); background-repeat: no-repeat; background-position: center center; } &.thumbsdown { width: 32px; height: 32px; font-size: 0; padding: 0; box-shadow: initial; background-image: var(--thumbup-icon); background-repeat: no-repeat; background-position: center center; transform: scaleY(-1) } } } .answer-body { flex: 1 1 auto; padding: 31px 40px; background-color: #3366FF; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; button { padding: 6px 16px; color: #FFFFFF; font-size: 16px; font-weight: 400; line-height: 22.4px; box-shadow: 0 0 0 1px #FFFFFF; border-radius: 4px; } } } /* fin search_detail_answer style */ /* begin search_keyword style */ .search_keyword { form { display: flex; height: 84px; position: relative; gap: 30px; box-shadow: 5.13px 25.64px 38.46px 0px #0000001A; padding-left: 32px; background-color: #fff; select { appearance: none; -webkit-appearance: none; font-size: 18px; padding: 5px 10px 5px 10px; background-color: #FFFFFF; border: 0; border-radius: 5px; color: #000000; cursor: pointer; outline: none; font-size: 24px; font-weight: 700; min-width: 178px; } .text-field { position: relative; flex: 1 1 auto; display: flex; input { border: 0; font-size: 24px; flex: 1 1 auto; padding-left: 10px; &:focus { ~.recommend-keyword { bottom: -60px; z-index: 1; transition: ease all 0.3s; } } } button { position: absolute; right: 0; } .recommend-keyword { position: absolute; bottom: 0; left: -200px; overflow: hidden; z-index: -1; transition: ease all 0.3s; a { font-size: 20px; font-weight: 400; line-height: 28px; color: #444444; position: relative; &:after { content: ''; width: 1px; height: 16px; background-color: #BDBDBD; display: block; position: absolute; right: -20px; top: 5px; } } } } } } /* fin search_keyword style */ /* begin breadcrumb style */ .breadcrumb { --home-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.4864 9.86333L10.9395 2.32036L10.4337 1.8145C10.3184 1.7 10.1625 1.63574 10.0001 1.63574C9.83762 1.63574 9.68175 1.7 9.56649 1.8145L1.51375 9.86333C1.39565 9.98097 1.30231 10.1211 1.23925 10.2754C1.17618 10.4297 1.14467 10.5951 1.14657 10.7618C1.15438 11.4493 1.72664 11.9981 2.41414 11.9981H3.24422V18.3594H16.7559V11.9981H17.6036C17.9376 11.9981 18.252 11.8672 18.4884 11.6309C18.6047 11.5149 18.6969 11.377 18.7596 11.2251C18.8223 11.0732 18.8543 10.9104 18.8536 10.7461C18.8536 10.4141 18.7227 10.0997 18.4864 9.86333ZM11.0938 16.9532H8.90633V12.9688H11.0938V16.9532ZM15.3497 10.5918V16.9532H12.3438V12.5C12.3438 12.0684 11.9942 11.7188 11.5626 11.7188H8.43758C8.00594 11.7188 7.65633 12.0684 7.65633 12.5V16.9532H4.65047V10.5918H2.77547L10.002 3.37114L10.4532 3.82231L17.2266 10.5918H15.3497Z' fill='%23222222'/%3E%3C/svg%3E%0A"); --caret: url("data:image/svg+xml,%3Csvg width='7' height='10' viewBox='0 0 7 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 0.625L5.5 5L0.5 9.375' stroke='%23222222' stroke-width='1.25'/%3E%3C/svg%3E%0A"); .breadcrumb-wrap { a { display: flex; font-size: 0.875em; &:first-of-type { width: 20px; height: 20px; background-image: var(--home-icon); } } .caret { width: 20px; height: 20px; background-image: var(--caret); background-repeat: no-repeat; background-position: center center; } } } /* fin breadcrumb style */ /* begin calendar style */ .calendar-wrap { --arrow-icon: url("data:image/svg+xml,%3Csvg width='11' height='19' viewBox='0 0 11 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.14293 2L1.71436 9.42858L9.14293 16.8571' stroke='%23212B36' stroke-width='2.28571' stroke-linecap='square'/%3E%3C/svg%3E%0A"); --calendar-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 19.0004C2 20.7005 3.3 22.0006 5 22.0006H19C20.7 22.0006 22 20.7005 22 19.0004V10.9998H2V19.0004ZM19 3.99924H17V2.99917C17 2.39912 16.6 1.99909 16 1.99909C15.4 1.99909 15 2.39912 15 2.99917V3.99924H9V2.99917C9 2.39912 8.6 1.99909 8 1.99909C7.4 1.99909 7 2.39912 7 2.99917V3.99924H5C3.3 3.99924 2 5.29934 2 6.99947V8.99962H22V6.99947C22 5.29934 20.7 3.99924 19 3.99924Z' fill='%233366FF'/%3E%3C/svg%3E%0A"); max-width: 1400px; margin-left: auto; margin-right: auto; transform: translateY(-12px); .toggle-view { display: flex; justify-content: flex-end; margin-bottom: 16px; .view-div { display: flex; gap: 12px; .view-btn { &:first-of-type { width: 139px; height: 36px; display: flex; justify-content: flex-start; padding-left: 18px; align-items: center; border-radius: 80px; box-shadow: 0 0 0 1px #C0C0C0; color: #3366FF; font-size: 14px; font-weight: 500; line-height: 19.6px; background-image: var(--download-icon); background-repeat: no-repeat; background-position-x: 82%; background-position-y: center; } &:last-of-type { width: 139px; height: 36px; display: flex; justify-content: center; align-items: center; border-radius: 80px; box-shadow: 0 0 0 1px #C0C0C0; color: #3366FF; font-size: 14px; font-weight: 500; line-height: 19.6px; } } } } .calendar-view-type { border-radius: 16px; box-shadow: 0 0 0 1px #BDBDBD; &#calendar { .calendar-container { display: flex; flex-direction: column; gap: 40px; >div { padding-left: 40px; padding-right: 40px; &.calendar-header { padding-top: 40px; display: flex; justify-content: center; align-items: center; gap: 40px; .arrow { width: 24px; height: 24px; background-image: var(--arrow-icon); background-repeat: no-repeat; background-position: center center; font-size: 0; cursor: pointer; &:last-of-type { transform: rotate(-180deg) } } >div { .faded { display: none; } #current-calendar-month { font-size: 40px; font-weight: 700; line-height: 56px; color: #3366FF; background-image: var(--calendar-icon); background-repeat: no-repeat; background-position: center right; padding-right: 40px; } } } &[row] { gap: 48px; padding-bottom: 112px; position: relative; table { border-collapse: collapse; width: 770px; flex-shrink: 0; position: relative; &:before { content: ''; height: 100%; width: 1px; background-color: #DCDCDC; display: block; position: absolute; top: 0; right: -24px; } &.calendar-table { thead { tr { background-color: #EDF1FF; border-bottom: 1px solid #DDDDDD; th { padding-top: 12px; padding-bottom: 12px; text-transform: uppercase; &:first-of-type { border-top-left-radius: 8px; } &:last-of-type { border-top-right-radius: 8px; } } } } tbody { tr { td { height: 96.5px; padding-top: 12px; text-align: center; font-size: 16px; font-weight: 400; line-height: 22.4px; vertical-align: top; position: relative; cursor: pointer; &.selected { background-color: #F0F0F0; &:before { content: ""; width: 100%; height: 2px; background-color: #3366FF; position: absolute; left: 0; top: 0; } } .event-dots { position: relative; display: flex; justify-content: center; gap: 4px; margin-top: 4px; .event-dot { width: 10px; height: 10px; border-radius: 100%; position: relative; background-color: var(--background-color); .event-hint { position: absolute; left: 0; top: 12px; z-index: 1; width: 211px; height: 81px; background-color: #fff; box-shadow: 0px 4px 15px 0px #00000033; border: 1px solid #DDDDDD; cursor: auto; >div { padding: 16px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; p { padding-left: 18px; width: 90%; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-align: left; &:first-of-type { font-size: 18px; font-weight: 700; line-height: 25.2px; position: relative; &:before { content: ""; position: absolute; left: 0; top: 8px; z-index: 1; border-radius: 100%; width: 10px; height: 10px; background-color: var(--background-color); } } &:last-of-type { font-size: 14px; font-weight: 400; line-height: 19.6px; color: #999999; } } } } } .event-more-dots { position: absolute; bottom: -30px; } } } } } } } [col] { width: calc(100% - 770px); justify-content: space-between; [col] { width: 100%; gap: 36px; .calendar-category-items { display: flex; gap: 48px; margin-top: 9px; .calendar-category-item { position: relative; &:before { content: ""; width: 1px; height: 16px; background-color: #DCDCDC; display: block; position: absolute; right: -24px; top: 6px; } &:last-of-type { &:before { display: none; } } .calendar-category-btn { padding: 0; font-size: 20px; font-weight: 700; line-height: 28px; color: #999999; } &.selected { position: relative; .calendar-category-btn { color: #3366FF; &:before { content: ''; width: 100%; height: 2px; background-color: #3366FF; display: block; position: absolute; bottom: -4px; left: 0; } } } } } .event-list { ul { display: flex; flex-direction: column; gap: 48px; &#event-items { margin: 0; .event-item { display: flex; gap: 20px; height: 55px; position: relative; &:before { content: ""; width: 100%; height: 1px; background-color: #DCDCDC; position: absolute; bottom: -24px; left: 0; } .event-category { .category { width: 70px; height: 28px; border: 4px; color: #fff; padding: 0; } } >div { &:last-of-type { display: flex; flex-direction: column; gap: 8px; >div { .event-date { font-size: 16px; font-weight: 400; line-height: 22.4px; color: #444444; } } .event-title { font-size: 18px; font-weight: 700; line-height: 25.2px; } } } } } } } } .toggle-save { display: flex; gap: 12px; justify-content: flex-end; position: absolute; bottom: 0; right: 0; padding-bottom: 40px; padding-right: 40px; .save-btn { width: 134px; height: 52px; padding: 0; border-radius: 8px; background-color: #3366FF; color: #fff; font-size: 20px; font-weight: 600; } } } } } } } &#list { .list-container { display: flex; flex-direction: column; gap: 40px; >div { padding-left: 40px; padding-right: 40px; &.list-header { padding-top: 40px; display: flex; justify-content: center; align-items: center; gap: 40px; .arrow { width: 24px; height: 24px; background-image: var(--arrow-icon); background-repeat: no-repeat; background-position: center center; font-size: 0; cursor: pointer; &:last-of-type { transform: rotate(-180deg) } } >div { .faded { display: none; } #current-list-month { font-size: 40px; font-weight: 700; line-height: 56px; color: #3366FF; background-image: var(--calendar-icon); background-repeat: no-repeat; background-position: center right; padding-right: 40px; } } } } .calendar-list-view { gap: 80px; width: 100%; margin-top: 80px; .event-list { width: 100%; ul { display: flex; &#event-items { margin: 0; flex-wrap: wrap; row-gap: 48px; column-gap: 80px; .event-item { display: flex; gap: 20px; height: 85px; position: relative; width: calc(50% - 80px); &:before { content: ""; width: 100%; height: 1px; background-color: #DCDCDC; position: absolute; bottom: -24px; left: 0; } .event-category { .category { width: 70px; height: 28px; border: 4px; color: #fff; padding: 0; } } >div { &:last-of-type { display: flex; flex-direction: column; gap: 8px; >div { .event-date { font-size: 16px; font-weight: 400; line-height: 22.4px; color: #444444; } } .event-title { font-size: 18px; font-weight: 700; line-height: 25.2px; } .event-desc { font-size: 16px; font-weight: 400; line-height: 22.4px; text-align: left; color: #444444; } } } } } } } } .list-section { margin-top: 40px; .list-wrap { box-shadow: initial; } .toggle-save { display: flex; gap: 12px; justify-content: flex-end; position: absolute; bottom: -70px; right: -40px; padding-bottom: 40px; padding-right: 40px; margin: 0; .save-btn { width: 134px; height: 52px; padding: 0; border-radius: 8px; background-color: #3366FF; color: #fff; font-size: 20px; font-weight: 600; } } } } } } } /* fin calendar style */ /* begin main style */ section { .main { --header-main-img: url("data:image/svg+xml,%3Csvg width='1120' height='170' viewBox='0 0 1120 170' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_529_9532)'%3E%3Cmask id='mask0_529_9532' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='-4' width='1124' height='173'%3E%3Cpath d='M979.384 75.6934C978.996 79.0547 978.86 86.3602 978.86 93.1217' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M964.849 77.458L963.705 94.2874C969.613 93.2292 972.692 93.2351 978.786 93.2351' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M965.242 77.2338C967.49 76.131 975.336 74.9973 979.473 75.3193' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M959.095 66.6781C958.922 65.0302 957.446 63.8346 955.798 64.0076C954.151 64.1806 952.955 65.6566 953.128 67.3044L959.095 66.6781ZM949.523 91.1683L946.736 90.0569L949.523 91.1683ZM937.652 128.401L940.588 129.017L937.652 128.401ZM932.668 164.699V167.699C934.294 167.699 935.623 166.405 935.667 164.78L932.668 164.699ZM385.619 161.699H382.619V167.699H385.619V161.699ZM953.128 67.3044C953.188 67.878 953.049 69.2533 952.577 71.426C952.132 73.472 951.472 75.8874 950.733 78.338C949.254 83.2445 947.518 88.0969 946.736 90.0569L952.309 92.2798C953.164 90.1362 954.956 85.1177 956.478 80.0702C957.24 77.5439 957.949 74.9617 958.44 72.6999C958.904 70.5647 959.268 68.322 959.095 66.6781L953.128 67.3044ZM946.736 90.0569C941.121 104.136 937.486 114.588 934.716 127.785L940.588 129.017C943.257 116.303 946.752 106.213 952.309 92.2798L946.736 90.0569ZM934.716 127.785C933.327 134.402 930.097 148.759 929.669 164.618L935.667 164.78C936.078 149.546 939.184 135.706 940.588 129.017L934.716 127.785ZM932.668 161.699H385.619V167.699H932.668V161.699Z' fill='black'/%3E%3Cpath d='M1008.84 37.8206C1008.97 35.2955 1009.38 31.6158 1009.58 30.0916C1010.96 29.9751 1014.27 29.6025 1016.46 29.0436C1016.94 28.6444 1017.13 25.0843 1017.16 23.3541V18.4143L1015.32 17.1168L1013.37 17.7156L994.058 2.7946H991.813V1.04778L989.966 0L986.872 1.04778L986.623 2.39534L955.983 12.3731C954.795 12.3024 952.311 12.2952 951.888 12.8319C951.464 13.3686 951.429 16.9865 951.464 18.7283V23.3541L954.324 24.943L955.983 24.2366C957.219 24.7309 959.691 25.8254 959.691 26.249C959.691 26.6725 959.691 29.8712 959.691 30.5568C959.691 30.5568 959.471 35.5304 959.471 36.5563' stroke='black' stroke-width='6'/%3E%3Cpath d='M959.524 34.1357C959.524 34.8372 959.292 43.284 959.35 45.3824C959.397 47.0611 958.256 57.9963 957.848 60.153L955.028 60.5624C954.694 62.3957 954.228 66.1624 955.028 66.5624' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1008.9 36.4648C1008.66 40.2342 1008.64 47.5707 1008.9 51.0371C1009.07 53.3686 1008.84 57.0991 1009.77 60.4799C1011.03 60.5625 1012.03 60.5625 1013.03 61.5625M1120.26 165.574H1030.11C1030 157.763 1028.25 131.534 1025.22 120.109C1022.19 108.685 1013.44 82.7462 1012.16 75.5184C1011.95 74.3228 1010.72 69.4998 1011.03 67.5625C1011.53 67.0625 1012.03 67.0625 1013.03 67.0625M1013.03 61.5625C1013.27 63.1165 1013.79 67.0625 1013.03 67.0625M1013.03 61.5625V67.0625' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0 165.375L97.349 165.375' stroke='black' stroke-width='6'/%3E%3Cpath d='M251.153 165.575L362.003 165.575' stroke='black' stroke-width='6'/%3E%3Cpath d='M143.573 165.575L232.791 165.575' stroke='black' stroke-width='6'/%3E%3Cpath d='M364.839 166.254C365.235 162.889 365.728 152.084 365.728 147.938V115.243H382.619V167.164V167.365L382.817 167.398C383.725 167.549 384.924 167.598 386.029 167.574C387.127 167.549 388.161 167.45 388.734 167.295C389.185 167.181 389.487 166.946 389.681 166.603C389.867 166.275 389.944 165.863 389.994 165.416C390.389 162.056 390.883 155.047 390.883 150.895V76.5533C390.883 76.1136 390.77 75.7539 390.485 75.4532C390.211 75.1655 389.799 74.9533 389.249 74.7533C387.8 74.2041 385.543 73.6343 383.27 73.2021C380.998 72.7698 378.688 72.4708 377.138 72.4708C376.922 72.4708 376.686 72.4974 376.458 72.6039C376.228 72.7115 376.022 72.8924 375.853 73.1724C375.805 73.2439 375.732 73.3425 375.645 73.4613C375.407 73.786 375.057 74.2619 374.792 74.7501C374.607 75.0911 374.448 75.461 374.386 75.8224C374.323 76.1862 374.354 76.5619 374.576 76.8849C374.692 77.0537 374.873 77.1953 375.079 77.3178C375.288 77.442 375.541 77.5569 375.818 77.665C376.373 77.881 377.055 78.0798 377.743 78.2744C377.839 78.3015 377.935 78.3285 378.031 78.3555C378.628 78.5236 379.22 78.6902 379.744 78.8662C380.357 79.072 380.845 79.2807 381.131 79.4999C381.67 79.9408 382.034 80.2873 382.269 80.6907C382.501 81.0876 382.619 81.5603 382.619 82.2719V108.36H365.728V81.9761C365.728 81.538 365.617 81.1584 365.338 80.8351C365.065 80.5198 364.652 80.2803 364.093 80.077L364.093 80.0769L364.085 80.0741C361.301 79.1795 356.446 78.3866 353.462 78.3866C353.036 78.3866 352.438 78.4939 352.078 79.0884C351.868 79.4063 351.615 79.9406 351.38 80.5331C351.143 81.1324 350.918 81.808 350.767 82.4116L350.71 82.6394L350.937 82.6987C351.048 82.7275 351.136 82.7536 351.207 82.7766C351.123 82.8166 351.023 82.8651 350.936 82.9186C350.831 82.9828 350.688 83.0867 350.628 83.2479C350.555 83.4432 350.63 83.6291 350.769 83.7791C350.901 83.9227 351.118 84.0676 351.428 84.2234C351.739 84.3798 352.162 84.556 352.725 84.757C353.018 84.9139 353.485 85.0781 353.995 85.2538C354.039 85.2691 354.084 85.2844 354.129 85.2999C354.623 85.4702 355.164 85.6565 355.676 85.8681C356.237 86.0999 356.747 86.3551 357.112 86.6402C357.482 86.9281 357.662 87.2121 357.662 87.4976V135.159C345.479 138.724 327.55 139.612 318.257 139.627V95.0855H344.05H344.217L344.273 94.9272C344.577 94.0679 344.85 92.7438 345.048 91.5088C345.246 90.2745 345.371 89.1003 345.371 88.538C345.371 88.0081 345.237 87.612 344.867 87.3766C344.531 87.1624 344.045 87.1176 343.458 87.1176C343.03 87.1176 341.702 87.2214 340.086 87.3478C339.61 87.385 339.108 87.4243 338.596 87.4634C336.338 87.6362 333.883 87.8078 332.514 87.8078H317.133C315.864 87.8078 313.954 87.6366 312.052 87.4637L311.927 87.4524C310.077 87.2841 308.246 87.1176 307.076 87.1176C306.642 87.1176 306.314 87.3958 306.076 87.7429C305.836 88.0922 305.655 88.5544 305.517 89.0259C305.24 89.9719 305.115 91.0254 305.065 91.4697L305.042 91.6813L305.25 91.7275C306.563 92.0195 307.729 92.4768 308.563 93.1697C309.388 93.8549 309.895 94.7756 309.895 96.0314V140.949C309.895 142.939 310.241 144.514 311.16 145.589C312.085 146.674 313.547 147.201 315.654 147.201C325.066 147.201 343.877 145.774 357.662 142.598V168.002V168.203L357.86 168.236C358.767 168.387 359.917 168.436 360.973 168.412C362.024 168.387 363.008 168.288 363.579 168.133C364.031 168.019 364.333 167.784 364.527 167.441C364.712 167.113 364.789 166.702 364.839 166.254ZM364.839 166.254C364.839 166.255 364.839 166.255 364.839 166.255L364.604 166.227M364.839 166.254C364.839 166.254 364.839 166.254 364.839 166.253L364.604 166.227M364.604 166.227C364.998 162.875 365.491 152.079 365.491 147.938V115.243L364.604 166.227ZM351.428 82.8719C351.428 82.8719 351.427 82.8712 351.425 82.8698C351.427 82.8712 351.428 82.8719 351.428 82.8719Z' fill='black' stroke='black' stroke-width='0.474485'/%3E%3Cpath d='M252.255 135.322C252.249 135.326 252.25 135.324 252.256 135.321C252.256 135.321 252.255 135.322 252.255 135.322ZM268.403 74.0751C268.403 74.0749 268.403 74.0747 268.165 74.0747H268.403C268.403 73.635 268.29 73.2753 268.005 72.9747C267.731 72.687 267.319 72.4747 266.769 72.2748C265.32 71.7252 262.913 71.1308 260.494 70.6742C258.075 70.2175 255.617 69.8936 254.066 69.8936C253.85 69.8936 253.615 69.9203 253.387 70.0268C253.156 70.1344 252.95 70.3154 252.781 70.5955C252.569 70.916 252.316 71.4774 252.082 72.0925C251.845 72.716 251.62 73.4151 251.47 74.0172L251.41 74.2553L251.65 74.3067C253.016 74.5995 254.409 75.0391 255.605 75.5153C256.806 75.9932 257.794 76.5017 258.361 76.9267C258.961 77.377 259.345 77.6739 259.589 78.0298C259.824 78.3707 259.942 78.7858 259.942 79.4976V93.4707H256.938C255.024 93.4707 252.018 93.2988 249.361 93.1261C248.502 93.0703 247.678 93.0143 246.939 92.9641C245.404 92.8598 244.238 92.7805 243.898 92.7805C243.55 92.7805 243.246 92.7928 242.987 92.8326C242.729 92.8723 242.5 92.9417 242.312 93.0669C241.914 93.3322 241.788 93.7838 241.788 94.3981C241.788 95.016 241.94 96.0226 242.162 97.096C242.386 98.1749 242.683 99.3413 242.982 100.287L243.034 100.453H243.208H259.963C259.964 100.456 259.964 100.459 259.964 100.463C259.978 100.61 259.997 100.828 260.019 101.108C260.063 101.669 260.12 102.482 260.17 103.486C260.27 105.495 260.343 108.271 260.236 111.337C260.023 117.482 259.087 124.739 256.236 129.356C254.55 131.766 253.494 133.282 252.876 134.194C252.568 134.649 252.365 134.959 252.248 135.155C252.191 135.25 252.147 135.33 252.123 135.392C252.114 135.414 252.092 135.47 252.094 135.534C252.095 135.569 252.105 135.643 252.168 135.705C252.235 135.772 252.316 135.779 252.362 135.776C252.432 135.771 252.488 135.736 252.505 135.725L252.506 135.725C252.533 135.708 252.56 135.687 252.586 135.667C252.637 135.626 252.698 135.571 252.765 135.51C252.825 135.455 252.892 135.391 252.963 135.324L252.989 135.3C253.07 135.223 253.157 135.142 253.246 135.06C253.426 134.895 253.614 134.73 253.788 134.598C253.967 134.462 254.107 134.382 254.195 134.357C254.231 134.348 254.275 134.337 254.326 134.325C255.396 134.067 259.655 133.039 262.594 129.641C265.65 126.107 268.403 121.612 268.403 113.711V113.665V113.618V113.571V113.523V113.475V113.426V113.376V113.326V113.276V113.225V113.173V113.121V113.069V113.016V112.962V112.908V112.853V112.798V112.743V112.687V112.63V112.573V112.515V112.457V112.399V112.34V112.28V112.22V112.159V112.098V112.037V111.975V111.913V111.85V111.786V111.723V111.658V111.594V111.529V111.463V111.397V111.33V111.263V111.196V111.128V111.06V110.991V110.922V110.852V110.783V110.712V110.641V110.57V110.498V110.426V110.354V110.281V110.208V110.134V110.06V109.985V109.91V109.835V109.759V109.683V109.607V109.53V109.453V109.375V109.297V109.219V109.14V109.061V108.981V108.901V108.821V108.741V108.66V108.578V108.497V108.415V108.332V108.25V108.167V108.083V108V107.916V107.831V107.747V107.662V107.576V107.491V107.405V107.318V107.232V107.145V107.058V106.97V106.882V106.794V106.706V106.617V106.528V106.439V106.349V106.259V106.169V106.078V105.988V105.897V105.805V105.714V105.622V105.53V105.438V105.345V105.252V105.159V105.065V104.972V104.878V104.784V104.689V104.595V104.5V104.405V104.309V104.214V104.118V104.022V103.926V103.829V103.733V103.636V103.538V103.441V103.344V103.246V103.148V103.05V102.951V102.853V102.754V102.655V102.556V102.457V102.357V102.257V102.157V102.057V101.957V101.857V101.756V101.656V101.555V101.454V101.352V101.251V101.149V101.048V100.946V100.844V100.742V100.639V100.537V100.435V100.332V100.229V100.126V100.023V99.9198V99.8165V99.713V99.6095V99.5058V99.402V99.2981V99.1941V99.09V98.9858V98.8815V98.7771V98.6726V98.568V98.4633V98.3586V98.2537V98.1488V98.0437V97.9386V97.8335V97.7282V97.6229V97.5175V97.4121V97.3066V97.201V97.0954V96.9897V96.884V96.7782V96.6724V96.5665V96.4606V96.3546V96.2486V96.1426V96.0365V95.9304V95.8243V95.7182V95.612V95.5058V95.3996V95.2934V95.1871V95.0809V94.9746V94.8684V94.7621V94.6559V94.5496V94.4434V94.3371V94.2309V94.1246V94.0184V93.9122V93.8061V93.6999V93.5938V93.4877V93.3816V93.2756V93.1696V93.0636V92.9577V92.8518V92.746V92.6402V92.5345V92.4288V92.3232V92.2176V92.1121V92.0066V91.9012V91.7959V91.6907V91.5855V91.4804V91.3753V91.2704V91.1655V91.0607V90.9561V90.8514V90.7469V90.6425V90.5382V90.434V90.3299V90.2258V90.1219V90.0181V89.9144V89.8109V89.7074V89.6041V89.5009V89.3978V89.2948V89.192V89.0893V88.9867V88.8843V88.782V88.6799V88.5779V88.476V88.3743V88.2728V88.1714V88.0701V87.969V87.8681V87.7674V87.6668V87.5663V87.4661V87.366V87.2661V87.1664V87.0669V86.9675V86.8684V86.7694V86.6706V86.572V86.4736V86.3754V86.2774V86.1796V86.0821V85.9847V85.8875V85.7906V85.6939V85.5974V85.5011V85.405V85.3092V85.2136V85.1182V85.0231V84.9282V84.8335V84.7391V84.6449V84.551V84.4573V84.3638V84.2707V84.1777V84.0851V83.9927V83.9006V83.8087V83.7171V83.6258V83.5347V83.4439V83.3534V83.2632V83.1733V83.0836V82.9943V82.9052V82.8165V82.728V82.6398V82.5519V82.4644V82.3771V82.2901V82.2035V82.1172V82.0312V81.9455V81.8601V81.7751V81.6903V81.6059V81.5219V81.4382V81.3548V81.2717V81.189V81.1066V81.0246V80.943V80.8616V80.7807V80.7001V80.6198V80.5399V80.4604V80.3813V80.3025V80.224V80.146V80.0683V79.9911V79.9141V79.8376V79.7615V79.6857V79.6104V79.5354V79.4609V79.3867V79.3129V79.2396V79.1666V79.0941V79.0219V78.9502V78.8789V78.808V78.7375V78.6675V78.5979V78.5287V78.4599V78.3916V78.3237V78.2563V78.1893V78.1227V78.0566V77.9909V77.9257V77.861V77.7967V77.7328V77.6694V77.6065V77.544V77.4821V77.4205V77.3595V77.2989V77.2388V77.1792V77.1201V77.0615V77.0033V76.9457V76.8885V76.8318V76.7757V76.72V76.6648V76.6102V76.556V76.5024V76.4493V76.3966V76.3446V76.293V76.2419V76.1914V76.1414V76.092V76.043V75.9946V75.9468V75.8995V75.8527V75.8065V75.7608V75.7157V75.6711V75.6271V75.5836V75.5407V75.4984V75.4567V75.4155V75.3748V75.3348V75.2953V75.2564V75.2181V75.1803V75.1432V75.1066V75.0707V75.0353V75.0005V74.9663V74.9327V74.8998V74.8674V74.8356V74.8045V74.7739V74.744V74.7147V74.686V74.6579V74.6305V74.6037V74.5775V74.552V74.5271V74.5028V74.4792V74.4562V74.4338V74.4121V74.3911V74.3707V74.351V74.3319V74.3135V74.2957V74.2786V74.2622V74.2465V74.2314V74.217V74.2033V74.1902V74.1779V74.1662V74.1552V74.1449V74.1353V74.1264V74.1182V74.1107V74.1039V74.0978V74.0924V74.0878V74.0838V74.0805V74.078V74.0762V74.0751Z' fill='black' stroke='black' stroke-width='0.474485'/%3E%3Cpath d='M192.66 116.901L193.25 116.358C201.569 109.589 206.726 104.91 211.26 99.3273C213.528 96.5351 216.827 91.1705 217.895 88.8747C218.969 86.5648 219.441 84.6519 219.441 83.29C219.441 82.7071 219.004 81.9943 217.879 81.1763C216.795 80.3875 215.732 79.6474 214.089 78.9901L213.131 78.607L213.625 77.7014C214.217 76.6172 215.013 75.4179 215.637 74.6896L215.66 74.6629L215.685 74.638C215.856 74.4666 216.056 74.2927 216.303 74.1692C216.572 74.035 216.836 73.9893 217.093 73.9893C218.262 73.9893 220.213 74.3234 222.192 74.8932C224.172 75.4634 226.314 76.3076 227.82 77.3982L227.827 77.4027L227.833 77.4073C228.315 77.769 228.693 78.1995 228.935 78.7694C229.169 79.3202 229.246 79.9335 229.246 80.6136C229.246 83.4006 225.372 93.3833 225.126 95.1251C224.88 96.867 230.699 102.254 236.04 105.678C240.857 108.767 242.793 109.911 243.039 110.034C243.36 110.2 247.346 112.925 247.462 112.994C247.718 113.175 248.032 113.475 248.134 113.959C248.23 114.41 248.099 114.837 247.934 115.19C247.475 116.17 246.864 117.428 246.244 118.231C245.933 118.633 245.622 118.995 245.343 119.269C245.204 119.405 245.059 119.535 244.913 119.64C244.798 119.722 244.472 120.425 243.415 120.314C242.357 120.202 241.217 119.445 240.632 119.089C239.028 118.042 235.584 116.118 231.875 113.389C228.166 110.661 225.835 109.651 219.441 102.535C211.181 112.054 207.542 115.19 199.585 122.18C199.263 122.463 198.767 122.706 198.218 122.782C197.574 122.87 196.959 122.665 196.408 122.183L193.01 117.786L192.66 116.901Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M219.047 162.573C216.052 158.891 214.436 154.47 214.436 149.887C214.436 138.197 224.957 127.559 242.025 127.559C259.093 127.559 269.614 138.197 269.614 149.887C269.614 154.47 267.997 158.891 265.003 162.573H251.153C256.903 160.011 260.145 155.061 260.145 149.887C260.145 142.406 253.365 135.391 242.025 135.391C230.685 135.391 223.905 142.406 223.905 149.887C223.905 155.061 227.147 160.011 232.897 162.573H219.047Z' fill='black'/%3E%3Cpath d='M75.4383 124.854C75.9802 125.254 76.765 125.458 77.8864 125.119C80.321 124.383 79.2301 124.895 86.5945 121.363C93.9588 117.83 96.7002 116.249 102.312 112.058C108.965 117.469 113.238 120.253 119.264 123.404C119.264 123.404 122.372 125.071 122.84 125.168C123.307 125.264 124.095 124.224 124.095 124.224C125.163 122.855 125.718 122.049 125.903 121.779L125.914 121.764C126.088 121.51 127.13 119.967 127.13 119.967C127.398 119.625 127.433 119.204 127.297 118.847C127.189 118.564 126.993 118.367 126.866 118.254C126.598 118.017 126.23 117.808 125.914 117.643L123.51 116.447C118.699 114.123 113.145 111.247 108.339 107.084C112.419 102.477 115.99 97.5456 117.007 96.1519C118.023 94.7582 119.279 92.6676 120.681 90.6265C122.082 88.5855 123 85.8387 122.473 84.4908C121.946 83.1427 120.736 82.0263 119.075 82.0263C118.14 82.0263 114.843 81.7091 113.45 81.7935C113.246 81.8058 113.039 81.8183 112.831 81.8308C111.18 81.9293 109.381 82.0263 107.687 82.0263H104.1V75.4079C104.1 74.8854 103.997 74.3149 103.486 73.8605C103.092 73.5106 102.523 73.3107 101.973 73.1272L101.955 73.1215L101.938 73.1165C100.705 72.7567 99.5172 72.3163 99.1731 72.1958C98.829 72.0754 97.4329 71.501 96.5981 71.501C96.3271 71.501 95.9759 71.5337 95.6175 71.7009C95.2446 71.875 94.9351 72.161 94.6998 72.5533L94.6946 72.5619L94.6896 72.5707C94.2256 73.3827 93.8351 73.9939 93.7483 74.3346C93.6614 74.6753 93.1522 75.6395 93.7483 76.3994C94.3443 77.1592 94.9804 77.149 95.6175 77.5228C96.2546 77.8965 96.5234 78.066 96.8381 78.3282C97.4217 78.8146 97.5594 79.3689 97.5594 80.2391V82.0263H90.545C90.545 82.0263 83.6752 82.0263 81.9682 82.0197C80.2611 82.0131 77.234 81.8029 76.5847 82.5142C76.5191 82.6238 76.3368 82.8244 76.2541 83.1291C76.1715 83.4339 76.1527 83.7557 76.1489 84.1686C76.1489 84.8034 77.6158 86.4533 77.874 86.7467C78.1321 87.0401 79.7132 88.5582 79.7132 88.5582C80.3156 89.1147 81.9698 88.904 82.7499 88.983C83.53 89.062 83.4772 89.0801 85.7518 89.0577L92.2071 88.9896H111.366C108.67 97.366 100.423 104.402 93.0908 109.062C85.7585 113.722 80.0973 116.147 72.0204 118.391C71.029 118.667 71.3043 119.365 71.5659 119.679C71.881 120.309 72.3436 121.105 72.8142 121.83L74.3862 123.86L74.3862 123.86C74.6388 124.13 75.0406 124.561 75.4383 124.854Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M148.107 131.107C149.436 131.176 151.226 131.268 151.486 131.528C152.159 132.2 152.405 133.164 152.405 134.27V164.354C152.405 165.783 151.968 166.854 151.134 167.539C150.337 168.195 149.339 168.359 148.498 168.359H143.572V154.653L143.568 154.653V138.509H100.409V154L100.401 154V168.359H96.8598C95.3379 168.359 93.9574 167.902 92.977 166.777C92.0169 165.675 91.5726 164.082 91.5726 162.086V139.988C91.5726 138.958 91.1709 138.233 90.4977 137.674C89.7875 137.084 89.2321 136.854 88.8273 136.696C88.7502 136.666 88.6783 136.641 88.6098 136.617C88.3188 136.515 88.0906 136.436 87.7964 136.095C87.4486 135.692 87.5846 135.163 87.6849 134.774C87.6894 134.757 87.6938 134.739 87.6981 134.723C87.7293 134.6 87.7582 134.464 87.7923 134.304C87.8677 133.95 87.968 133.479 88.1724 132.782C88.3188 132.283 88.5253 131.737 88.8273 131.297C89.1235 130.865 89.6385 130.363 90.414 130.363C91.2074 130.363 91.8722 130.436 92.7563 130.534C93.2133 130.584 93.729 130.641 94.3514 130.698L94.5055 130.712C96.4216 130.886 98.2935 131.053 99.522 131.053H137.652C138.603 131.053 140.166 130.992 141.878 130.918C143.307 126.348 144.768 121.145 144.875 116.656C144.945 113.719 144.841 108.171 144.72 106.308C144.662 105.407 144.599 104.679 144.55 104.169H124.546L124.337 103.506C124.03 102.534 123.726 101.344 123.499 100.245C123.41 99.8173 123.331 99.5406 123.267 99.3187C123.17 98.9822 123.109 98.772 123.109 98.3522C123.109 97.6697 123.246 96.8984 123.951 96.4287C124.259 96.2237 124.601 96.1311 124.912 96.0832C125.225 96.035 125.573 96.0229 125.932 96.0229C126.294 96.0229 127.617 96.1051 129.327 96.2114C130.124 96.2609 131.004 96.3156 131.91 96.3696C134.81 96.5426 138.031 96.713 139.92 96.713H144.456V79.844C144.456 79.2154 144.352 78.9599 144.228 78.7794C144.063 78.5389 143.786 78.3128 143.159 77.8425C142.667 77.4736 141.748 76.9927 140.567 76.523C139.404 76.06 138.05 75.6327 136.726 75.3491L135.766 75.1434L136.005 74.191C136.163 73.5575 136.397 72.8314 136.642 72.1861C136.875 71.5724 137.148 70.9535 137.405 70.5611C137.639 70.1788 137.944 69.8994 138.311 69.7283C138.669 69.561 139.021 69.5283 139.291 69.5283C140.911 69.5283 143.422 69.8626 145.852 70.3212C148.128 70.7509 149.592 71.3074 151.009 71.8462C151.104 71.8822 151.199 71.9182 151.293 71.954C151.865 72.1625 152.407 72.4201 152.797 72.8309C153.237 73.2941 153.391 73.8456 153.391 74.4212V111.198C153.391 115.399 153.324 122.905 152.405 124.988C151.486 127.07 150.039 128.257 148.517 129.497C147.695 130.167 147.272 130.528 147.034 130.732C146.832 130.904 146.763 130.963 146.696 131.001C146.867 131.043 147.427 131.072 148.107 131.107Z' fill='black'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_529_9532)'%3E%3Crect x='-0.202881' y='-21.8447' width='1120.46' height='217.018' fill='url(%23paint0_linear_529_9532)'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_529_9532' x1='213.79' y1='454.345' x2='440.091' y2='645.169' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%235D7FE4'/%3E%3Cstop offset='0.47' stop-color='%233366FF'/%3E%3Cstop offset='1' stop-color='%235D7FE4'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_529_9532'%3E%3Crect width='1120' height='170' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); --main-notice-off: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36.7586 19.7334C38.5656 21.456 39.3385 24.428 36.7586 27.008' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M38.6487 16.9033C41.9627 20.2174 43.2356 25.25 38.6487 29.8369' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M13.2202 28.4831V19.2513L29.5299 13.0967V34.6377L13.2202 28.4831Z' stroke='%232851CE' stroke-width='1.25' stroke-linejoin='round'/%3E%3Cpath d='M13.2202 19.5586H6.45013V28.175H10.1429M13.2202 28.175H10.1429M10.1429 28.175C10.8609 31.1497 12.4201 37.1607 12.9124 37.4069C13.5279 37.7146 16.798 37.1064 16.6052 36.176C16.4124 35.2456 13.5279 33.7141 14.4511 28.7905' stroke='%232851CE' stroke-width='1.25' stroke-linejoin='round'/%3E%3Cmask id='path-5-inside-1_549_7829' fill='white'%3E%3Crect x='28.9723' y='11.25' width='4.10413' height='25.2338' rx='1.23092'/%3E%3C/mask%3E%3Crect x='28.9723' y='11.25' width='4.10413' height='25.2338' rx='1.23092' stroke='%232851CE' stroke-width='2.5' stroke-linejoin='round' mask='url(%23path-5-inside-1_549_7829)'/%3E%3C/svg%3E%0A"); --main-manage-off: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_549_7776)'%3E%3Cpath d='M27.1923 20.4902H9.42816V29.2963H27.1923V20.4902Z' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M31.6348 26.6543H4.98865V39.8616H31.6348V26.6543Z' fill='white' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.98871 26.6541L9.42791 20.4902' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M27.1921 20.4902L31.6349 26.6541' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22.6252 32.9499C22.6252 33.5046 22.1762 33.9571 21.6176 33.9571H15.0026C14.4477 33.9571 13.9987 33.5082 13.9987 32.9499C13.9987 32.3952 14.4477 31.9463 15.0026 31.9463H21.6176C22.1725 31.9463 22.6252 32.3952 22.6252 32.9499Z' fill='white' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M25.0236 8.88867H11.5964V23.5703H25.0236V8.88867Z' fill='white' stroke='%232851CE' stroke-width='1.25'/%3E%3Cpath d='M15.163 12.874H21.4568' stroke='%232851CE' stroke-width='1.25' stroke-linejoin='round'/%3E%3Cpath d='M15.1631 16.2275H21.4569' stroke='%232851CE' stroke-width='1.25' stroke-linejoin='round'/%3E%3Cpath d='M15.1631 19.585H21.4569' stroke='%232851CE' stroke-width='1.25' stroke-linejoin='round'/%3E%3Cpath d='M42.7112 14.9072H34.5192V39.8657H42.7112V14.9072Z' fill='white' stroke='%232851CE' stroke-width='1.25'/%3E%3Cpath d='M40.8715 18.0596H36.3593V30.8764H40.8715V18.0596Z' fill='white' stroke='%232851CE' stroke-width='1.25'/%3E%3Cpath d='M40.5136 35.2849C40.5136 36.3652 39.6374 37.241 38.5532 37.241C37.4689 37.241 36.5928 36.3652 36.5928 35.2849C36.5928 34.2047 37.4726 33.3252 38.5532 33.3252C39.6338 33.3252 40.5136 34.2011 40.5136 35.2849Z' fill='white' stroke='%232851CE' stroke-width='1.25'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_549_7776'%3E%3Crect width='39' height='32.25' fill='white' transform='translate(4.34998 8.25)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); --main-report-off: url("data:image/svg+xml,%3Csvg width='49' height='48' viewBox='0 0 49 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_529_9646)'%3E%3Cpath d='M18.3506 21.5684V27.3024H42.2419V8.79004H18.3506V15.6265' fill='white'/%3E%3Cpath d='M18.3506 21.5684V27.3024H42.2419V8.79004H18.3506V15.6265' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M42.2423 8.79056H44.0217V5.86719H16.5681V8.79056H18.351' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M12.9843 12.6856C12.9843 14.3269 11.8665 15.6583 10.491 15.6583C9.11559 15.6583 7.9978 14.3269 7.9978 12.6856C7.9978 11.0443 9.1121 9.71289 10.491 9.71289C11.87 9.71289 12.9843 11.0443 12.9843 12.6856Z' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M5.88082 28.6199C4.83616 28.6199 3.98999 27.764 3.98999 26.7074V19.0326C3.98999 17.976 4.83616 17.1201 5.88082 17.1201H14.5271' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M6.59448 41.3836V20.6875' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M10.209 41.3849V29.79' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M14.0081 17.1201H24.2178C25.0431 17.1201 25.7117 17.7964 25.7117 18.6311C25.7117 19.4659 25.0431 20.1421 24.2178 20.1421L13.8096 20.1914V41.3841' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M22.78 11.9072H37.8092' stroke='%232851CE' stroke-width='1.25'/%3E%3Cpath d='M22.78 15.2217H37.8092' stroke='%232851CE' stroke-width='1.25'/%3E%3Cpath d='M26.8093 18.5322H37.8096' stroke='%232851CE' stroke-width='1.25'/%3E%3Cpath d='M22.78 21.8467H37.8092' stroke='%232851CE' stroke-width='1.25'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_529_9646'%3E%3Crect width='41.25' height='36.75' fill='white' transform='translate(3.38062 5.25)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); --main-sched-off: url("data:image/svg+xml,%3Csvg width='49' height='48' viewBox='0 0 49 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_529_9607)'%3E%3Cpath d='M18.4382 31.3168V38.4562H24.3957H30.3533H36.3149H42.2724V32.7696V27.0872V21.4047V15.7181L40.8263 14.2612L39.3843 12.8084L37.9382 11.3515L36.492 9.89453H31.9807H27.4651H22.9496H18.4382V17.0381V27.0955' fill='white'/%3E%3Cpath d='M18.4382 31.3168V38.4562H24.3957H30.3533H36.3149H42.2724V32.7696V27.0872V21.4047V15.7181L40.8263 14.2612L39.3843 12.8084L37.9382 11.3515L36.492 9.89453H31.9807H27.4651H22.9496H18.4382V17.0381V27.0955' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M40.6456 16.8108H38.12H35.5903V14.2622V11.7178' fill='white'/%3E%3Cpath d='M40.6456 16.8108H38.12H35.5903V14.2622V11.7178' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24.3955 20.9941H30.353H36.3147' fill='white'/%3E%3Cpath d='M24.3955 20.9941H30.353H36.3147' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24.3955 25.1787H30.353H36.3147' fill='white'/%3E%3Cpath d='M24.3955 25.1787H30.353H36.3147' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24.3955 29.3623H30.353H36.3147' fill='white'/%3E%3Cpath d='M24.3955 29.3623H30.353H36.3147' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.61054 16.3794C7.11614 15.8813 6.31686 15.8813 5.82246 16.3794C5.32806 16.8775 5.32806 17.6828 5.82246 18.1809L7.9937 20.3684L9.78177 18.5669L7.61054 16.3794Z' fill='white' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.9939 20.3679L21.1449 33.6172C21.6393 34.1153 24.3544 36.0454 24.8488 35.5474C25.3432 35.0493 23.4274 32.3139 22.933 31.8158L9.78197 18.5664L7.9939 20.3679Z' fill='white' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24.8445 35.1816H29.36' stroke='%232851CE' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_529_9607'%3E%3Crect width='39' height='30.75' fill='white' transform='translate(4.73047 9)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); --main-notice-on: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36.7586 19.7334C38.5656 21.456 39.3385 24.428 36.7586 27.008' stroke='white' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M38.6487 16.9033C41.9627 20.2174 43.2356 25.25 38.6487 29.8369' stroke='white' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M13.2202 28.4831V19.2513L29.5299 13.0967V34.6377L13.2202 28.4831Z' stroke='white' stroke-width='1.25' stroke-linejoin='round'/%3E%3Cpath d='M13.2202 19.5586H6.45013V28.175H10.1429M13.2202 28.175H10.1429M10.1429 28.175C10.8609 31.1497 12.4201 37.1607 12.9124 37.4069C13.5279 37.7146 16.798 37.1064 16.6052 36.176C16.4124 35.2456 13.5279 33.7141 14.4511 28.7905' stroke='white' stroke-width='1.25' stroke-linejoin='round'/%3E%3Cmask id='path-5-inside-1_549_7909' fill='white'%3E%3Crect x='28.9723' y='11.25' width='4.10413' height='25.2338' rx='1.23092'/%3E%3C/mask%3E%3Crect x='28.9723' y='11.25' width='4.10413' height='25.2338' rx='1.23092' stroke='white' stroke-width='2.5' stroke-linejoin='round' mask='url(%23path-5-inside-1_549_7909)'/%3E%3C/svg%3E%0A"); --main-manage-on: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_549_7856)'%3E%3Cpath d='M27.1923 20.4902H9.42816V29.2963H27.1923V20.4902Z' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M31.6348 26.6543H4.98865V39.8616H31.6348V26.6543Z' fill='%233366FF' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.98871 26.6541L9.42791 20.4902' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M27.1921 20.4902L31.6349 26.6541' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22.6252 32.9499C22.6252 33.5046 22.1762 33.9571 21.6176 33.9571H15.0026C14.4477 33.9571 13.9987 33.5082 13.9987 32.9499C13.9987 32.3952 14.4477 31.9463 15.0026 31.9463H21.6176C22.1725 31.9463 22.6252 32.3952 22.6252 32.9499Z' fill='%233366FF' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M25.0236 8.88867H11.5964V23.5703H25.0236V8.88867Z' fill='%233366FF' stroke='white' stroke-width='1.25'/%3E%3Cpath d='M15.163 12.874H21.4568' stroke='white' stroke-width='1.25' stroke-linejoin='round'/%3E%3Cpath d='M15.1631 16.2275H21.4569' stroke='white' stroke-width='1.25' stroke-linejoin='round'/%3E%3Cpath d='M15.1631 19.585H21.4569' stroke='white' stroke-width='1.25' stroke-linejoin='round'/%3E%3Cpath d='M42.7112 14.9072H34.5192V39.8657H42.7112V14.9072Z' fill='%233366FF' stroke='white' stroke-width='1.25'/%3E%3Cpath d='M40.8715 18.0596H36.3593V30.8764H40.8715V18.0596Z' fill='%233366FF' stroke='white' stroke-width='1.25'/%3E%3Cpath d='M40.5136 35.2849C40.5136 36.3652 39.6374 37.241 38.5532 37.241C37.4689 37.241 36.5928 36.3652 36.5928 35.2849C36.5928 34.2047 37.4726 33.3252 38.5532 33.3252C39.6338 33.3252 40.5136 34.2011 40.5136 35.2849Z' fill='%233366FF' stroke='white' stroke-width='1.25'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_549_7856'%3E%3Crect width='39' height='32.25' fill='white' transform='translate(4.34998 8.25)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); --main-report-on: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_549_7933)'%3E%3Cpath d='M18.1203 21.5684V27.3024H42.0116V8.79004H18.1203V15.6265' fill='%233366FF'/%3E%3Cpath d='M18.1203 21.5684V27.3024H42.0116V8.79004H18.1203V15.6265' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M42.0119 8.79056H43.7913V5.86719H16.3377V8.79056H18.1206' stroke='white' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M12.7538 12.6856C12.7538 14.3269 11.636 15.6583 10.2606 15.6583C8.88512 15.6583 7.76733 14.3269 7.76733 12.6856C7.76733 11.0443 8.88163 9.71289 10.2606 9.71289C11.6395 9.71289 12.7538 11.0443 12.7538 12.6856Z' stroke='white' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M5.65035 28.6199C4.60569 28.6199 3.75952 27.764 3.75952 26.7074V19.0326C3.75952 17.976 4.60569 17.1201 5.65035 17.1201H14.2966' stroke='white' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M6.36395 41.3836V20.6875' stroke='white' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M9.97858 41.3849V29.79' stroke='white' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M13.7776 17.1201H23.9874C24.8126 17.1201 25.4812 17.7964 25.4812 18.6311C25.4812 19.4659 24.8126 20.1421 23.9874 20.1421L13.5791 20.1914V41.3841' stroke='white' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M22.5497 11.9072H37.5788' stroke='white' stroke-width='1.25'/%3E%3Cpath d='M22.5497 15.2217H37.5788' stroke='white' stroke-width='1.25'/%3E%3Cpath d='M26.5788 18.5322H37.579' stroke='white' stroke-width='1.25'/%3E%3Cpath d='M22.5497 21.8467H37.5788' stroke='white' stroke-width='1.25'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_549_7933'%3E%3Crect width='41.25' height='36.75' fill='white' transform='translate(3.15021 5.25)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); --main-sched-on: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_549_7917)'%3E%3Cpath d='M18.2076 31.3168V38.4562H24.1652H30.1227H36.0843H42.0418V32.7696V27.0872V21.4047V15.7181L40.5957 14.2612L39.1537 12.8084L37.7076 11.3515L36.2615 9.89453H31.7501H27.2345H22.719H18.2076V17.0381V27.0955' fill='%233366FF'/%3E%3Cpath d='M18.2076 31.3168V38.4562H24.1652H30.1227H36.0843H42.0418V32.7696V27.0872V21.4047V15.7181L40.5957 14.2612L39.1537 12.8084L37.7076 11.3515L36.2615 9.89453H31.7501H27.2345H22.719H18.2076V17.0381V27.0955' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M40.4149 16.8108H37.8893H35.3596V14.2622V11.7178' fill='%233366FF'/%3E%3Cpath d='M40.4149 16.8108H37.8893H35.3596V14.2622V11.7178' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24.1649 20.9941H30.1224H36.0841' fill='%233366FF'/%3E%3Cpath d='M24.1649 20.9941H30.1224H36.0841' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24.1649 25.1787H30.1224H36.0841' fill='%233366FF'/%3E%3Cpath d='M24.1649 25.1787H30.1224H36.0841' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24.1649 29.3623H30.1224H36.0841' fill='%233366FF'/%3E%3Cpath d='M24.1649 29.3623H30.1224H36.0841' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.37995 16.3794C6.88555 15.8813 6.08627 15.8813 5.59187 16.3794C5.09747 16.8775 5.09747 17.6828 5.59187 18.1809L7.76311 20.3684L9.55118 18.5669L7.37995 16.3794Z' fill='%233366FF' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.76331 20.3679L20.9143 33.6172C21.4087 34.1153 24.1238 36.0454 24.6182 35.5474C25.1126 35.0493 23.1968 32.3139 22.7024 31.8158L9.55138 18.5664L7.76331 20.3679Z' fill='%233366FF' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24.614 35.1816H29.1295' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_549_7917'%3E%3Crect width='39' height='30.75' fill='white' transform='translate(4.5 9)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); max-width: 1120px; margin: 0 auto; height: 100vh; align-items: center; justify-content: center; .main-hero-img { background-image: var(--header-main-img); background-repeat: no-repeat; width: 100%; height: 168.36px; } .main-search { margin-top: 64px; width: 100%; .search_keyword { form { border-radius: 16px; box-shadow: 0px 10px 35px 0px #00000029; & .text-field { input { border-top-right-radius: 16px; border-bottom-right-radius: 16px; } button { background-color: #3366FF; border-top-right-radius: 16px; border-bottom-right-radius: 16px; } } } } } .main-direction-btns { display: flex; justify-content: space-between; width: 100%; margin-top: 80px; button { width: 262px; background-color: #fff; height: 96px; padding: 24px 32px; border-radius: 12px; box-shadow: 0 0 0 1px #BDBDBD; font-size: 26px; font-weight: 700; line-height: 31.03px; padding-left: 104px; text-align: left; &:hover { background-color: #3366FF; color: #fff; box-shadow: 0px 0px 20px 0px #3366FF66; } &.sched { background-image: var(--main-sched-off); background-repeat: no-repeat; background-position: 32px center; &:hover { background-image: var(--main-sched-on); } } &.manage { background-image: var(--main-manage-off); background-repeat: no-repeat; background-position: 32px center; &:hover { background-image: var(--main-manage-on); } } &.report { background-image: var(--main-report-off); background-repeat: no-repeat; background-position: 32px center; &:hover { background-image: var(--main-report-on); } } &.notice { background-image: var(--main-notice-off); background-repeat: no-repeat; background-position: 32px center; &:hover { background-image: var(--main-notice-on); } } } } } } .autocomplete-box { position: absolute; border: 1px solid #ccc; max-height: 262px; overflow-y: auto; background-color: #fff; width: calc(100% - 4px); box-shadow: 0px 4px 13.8px 0px #00000026; padding-top: 8px; padding-bottom: 8px; padding-left:16px; .autocomplete-item { padding: 8px; cursor: pointer; font-size: 18px; font-weight: 400; line-height: 25.2px; height: 41px; display: flex; align-items: center; &:hover, &.highlighted { color: #3366FF; font-weight: 700; } } &::-webkit-scrollbar { width: 5px; } &::-webkit-scrollbar-thumb { background: #3366FF; border-radius: 50px; } &::-webkit-scrollbar-track { background: #F0F0F0; border: 0px solid #F0F0F0; border-radius: 50px; } &::-webkit-scrollbar-corner { background: #fff; } } .error-page { --icon-404: url("data:image/svg+xml,%3Csvg width='241' height='195' viewBox='0 0 241 195' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_493_40872)'%3E%3Crect x='20.7542' y='16' width='200' height='155' rx='12.4788' fill='white'/%3E%3Crect x='23.2542' y='18.5' width='195' height='150' rx='9.97881' stroke='%23D3D5D7' stroke-width='5'/%3E%3C/g%3E%3Crect x='21.7542' y='46' width='194' height='2' rx='1' stroke='%23D3D5D7' stroke-width='2'/%3E%3Crect x='32.7542' y='28' width='7.99996' height='8' rx='2.10169' fill='%23D3D5D7'/%3E%3Crect x='46.7542' y='28' width='7.99996' height='8' rx='2.10169' fill='%23D3D5D7'/%3E%3Crect x='60.7542' y='28' width='7.99996' height='8' rx='2.10169' fill='%23D3D5D7'/%3E%3Cpath opacity='0.5' d='M117.835 68.75C118.797 67.0833 121.203 67.0833 122.165 68.75L156.806 128.75C157.768 130.417 156.566 132.5 154.641 132.5H85.359C83.4345 132.5 82.2317 130.417 83.1939 128.75L117.835 68.75Z' stroke='%23212B36' stroke-opacity='0.2' stroke-width='5'/%3E%3Crect x='117.5' y='88.7847' width='5' height='22.3174' rx='2.5' fill='%23646B72'/%3E%3Crect x='117.5' y='115.102' width='5' height='5' rx='2.5' fill='%23646B72'/%3E%3Cdefs%3E%3Cfilter id='filter0_d_493_40872' x='0.75415' y='0' width='240' height='195' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.0979167 0 0 0 0 0.220313 0 0 0 0 0.5875 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_493_40872'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_493_40872' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A"); --icon-permission-error: url("data:image/svg+xml,%3Csvg width='240' height='195' viewBox='0 0 240 195' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_497_841)'%3E%3Crect x='20' y='16' width='200' height='155' rx='12.4788' fill='white'/%3E%3Crect x='22.5' y='18.5' width='195' height='150' rx='9.97881' stroke='%23D3D5D7' stroke-width='5'/%3E%3C/g%3E%3Crect x='21' y='46' width='194' height='2' rx='1' stroke='%23D3D5D7' stroke-width='2'/%3E%3Crect x='32' y='28' width='7.99996' height='8' rx='2.10169' fill='%23D3D5D7'/%3E%3Crect x='46' y='28' width='7.99996' height='8' rx='2.10169' fill='%23D3D5D7'/%3E%3Crect x='60' y='28' width='7.99996' height='8' rx='2.10169' fill='%23D3D5D7'/%3E%3Ccircle cx='120' cy='110' r='35.5' stroke='%23D3D5D7' stroke-width='5'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M137.268 96.7678C138.244 95.7915 138.244 94.2085 137.268 93.2322C136.291 92.2559 134.709 92.2559 133.732 93.2322L120.75 106.214L107.768 93.2322C106.791 92.2559 105.209 92.2559 104.232 93.2322C103.256 94.2085 103.256 95.7915 104.232 96.7678L117.214 109.75L104.232 122.732C103.256 123.709 103.256 125.291 104.232 126.268C105.209 127.244 106.791 127.244 107.768 126.268L120.75 113.286L133.732 126.268C134.709 127.244 136.291 127.244 137.268 126.268C138.244 125.291 138.244 123.709 137.268 122.732L124.286 109.75L137.268 96.7678Z' fill='%23646B72'/%3E%3Cdefs%3E%3Cfilter id='filter0_d_497_841' x='0' y='0' width='240' height='195' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.0979167 0 0 0 0 0.220313 0 0 0 0 0.5875 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_497_841'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_497_841' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A"); height: calc(100vh - 20px); width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; &.code-404 { gap: 40px; .error-icon { background-image: var(--icon-404); background-repeat: no-repeat; background-position: center center; width: 250px; height: 180px; } } &.code-permission-error { gap: 40px; .error-icon { background-image: var(--icon-permission-error); background-repeat: no-repeat; background-position: center center; width: 250px; height: 180px; } } } .login-page { --id-icon: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12.5C14.21 12.5 16 10.71 16 8.5C16 6.29 14.21 4.5 12 4.5C9.79 4.5 8 6.29 8 8.5C8 10.71 9.79 12.5 12 12.5ZM12 14.5C9.33 14.5 4 15.84 4 18.5V19.5C4 20.05 4.45 20.5 5 20.5H19C19.55 20.5 20 20.05 20 19.5V18.5C20 15.84 14.67 14.5 12 14.5Z' fill='%23999999'/%3E%3C/svg%3E%0A"); --pw-icon: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.5C12.5304 17.5 13.0391 17.2893 13.4142 16.9142C13.7893 16.5391 14 16.0304 14 15.5C14 14.9696 13.7893 14.4609 13.4142 14.0858C13.0391 13.7107 12.5304 13.5 12 13.5C11.4696 13.5 10.9609 13.7107 10.5858 14.0858C10.2107 14.4609 10 14.9696 10 15.5C10 16.0304 10.2107 16.5391 10.5858 16.9142C10.9609 17.2893 11.4696 17.5 12 17.5ZM18 8.5C18.5304 8.5 19.0391 8.71071 19.4142 9.08579C19.7893 9.46086 20 9.96957 20 10.5V20.5C20 21.0304 19.7893 21.5391 19.4142 21.9142C19.0391 22.2893 18.5304 22.5 18 22.5H6C5.46957 22.5 4.96086 22.2893 4.58579 21.9142C4.21071 21.5391 4 21.0304 4 20.5V10.5C4 9.96957 4.21071 9.46086 4.58579 9.08579C4.96086 8.71071 5.46957 8.5 6 8.5H7V6.5C7 5.17392 7.52678 3.90215 8.46447 2.96447C9.40215 2.02678 10.6739 1.5 12 1.5C12.6566 1.5 13.3068 1.62933 13.9134 1.8806C14.52 2.13188 15.0712 2.50017 15.5355 2.96447C15.9998 3.42876 16.3681 3.97995 16.6194 4.58658C16.8707 5.19321 17 5.84339 17 6.5V8.5H18ZM12 3.5C11.2044 3.5 10.4413 3.81607 9.87868 4.37868C9.31607 4.94129 9 5.70435 9 6.5V8.5H15V6.5C15 5.70435 14.6839 4.94129 14.1213 4.37868C13.5587 3.81607 12.7956 3.5 12 3.5Z' fill='%23999999'/%3E%3C/svg%3E%0A"); height: calc(100vh - 20px); width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; .login-title { margin-bottom: 8px; } form { width: 420px; display: flex; flex-direction: column; gap: 32px; input { flex: 1 1 auto; height: 49px; padding-left: 48px; border-radius: 8px; border: initial; box-shadow: 0 0 0 1px #DCDCDC; font-size: 18px; font-weight: 400; line-height: 25.2px; background-image: var(--id-icon); background-repeat: no-repeat; background-position: 16px center; &[type="password"] { background-image: var(--pw-icon); } &::placeholder { color: #999999; } } button { height: 58px; font-size: 24px; font-weight: 700; line-height: 33.6px; } } } .spinner-wrap { >div { flex: 1 1 auto; } } .spinner { color: #3366FF; font-size: 45px; text-indent: -9999em; overflow: hidden; width: 1em; height: 1em; border-radius: 50%; position: relative; transform: translateZ(0); animation: spinAnimation 1.7s infinite ease, round 1.7s infinite ease; } @keyframes spinAnimation { 0% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } 5%, 95% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } 10%, 59% { box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; } 20% { box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; } 38% { box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; } 100% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } } @keyframes round { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } }