@charset "UTF-8";

@font-face {
    font-family: 'LOTTERIADDAG';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/LOTTERIADDAG.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'RiaSans-ExtraBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2410-1@1.0/RiaSans-ExtraBold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/*=================================================================================
* root
=================================================================================*/
:root {
	/* gray */
	--color-gray-100: #fff;
	--color-gray-200: #f7f7f7;
	--color-gray-300: #e1e1e1;
	--color-gray-400: #d7d7d7;
	--color-gray-500: #ccc;
	--color-gray-600: #949494;
	--color-gray-700: #454545;
	--color-gray-800: #323232;
	--color-gray-900: #121212;
	/* blue */
	--color-blue-100: #EFFAFF;
	--color-blue-200: #D5E0FD;
	--color-blue-300: #A9BDF4;
	--color-blue-400: #678DED;
	--color-blue-500: #3C67D6;
	--color-blue-600: #1845B5;
	--color-blue-700: #0D2D81;
	--color-blue-800: #081C50;
	--color-blue-900: #020C26;
	/* violet */
	--color-violet-100: #F8F4FF;
	--color-violet-200: #DACDF4;
	--color-violet-300: #BE9FF4;
	--color-violet-400: #7C3AEF;
	--color-violet-500: #6421D8;
	--color-violet-600: #511DAC;
	--color-violet-700: #380F80;
	--color-violet-800: #250A53;
	--color-violet-900: #14052E;
	/* green */
	--color-green-100: #EDFFEB;
	--color-green-200: #CAF4C8;
	--color-green-300: #84DE7F;
	--color-green-400: #45D93C;
	--color-green-500: #2EB525;
	--color-green-600: #1D9312;
	--color-green-700: #15720A;
	--color-green-800: #0E4B06;
	--color-green-900: #052701;
	/* orange */
	--color-orange-100: #FFF7EA;
	--color-orange-200: #FFE9C4;
	--color-orange-300: #FFD084;
	--color-orange-400: #FFA71A;
	--color-orange-500: #EA9D21;
	--color-orange-600: #C78417;
	--color-orange-700: #A56C11;
	--color-orange-800: #764D0B;
	--color-orange-900: #402801;
	/* red */
	--color-red-100: #FFF0F0;
	--color-red-200: #FFD0D0;
	--color-red-300: #FD7A7A;
	--color-red-400: #FF4D4D;
	--color-red-500: #EF2222;
	--color-red-600: #D01F20;
	--color-red-700: #9B1716;
	--color-red-800: #6E0B0B;
	--color-red-900: #380606;
	/* default */
	--color-blue: #2156CE;
    --color-indigo: #6610f2;
    --color-purple: #6f42c1;
    --color-pink: #d63384;
    --color-red: #dc3545;
    --color-orange: #fd7e14;
    --color-yellow: #ffc107;
    --color-green: #198754;
    --color-teal: #20c997;
    --color-cyan: #2199CE;
    --color-black: #000000;
    --color-white: #ffffff;
	/* point */
	--color-light: #F9F9F9;
    --color-primary: #1B84FF;
    --color-secondary: #F1F1F4;
    --color-success: #17C653;
    --color-info: #7239EA;
    --color-warning: #F6C000;
    --color-danger: #F8285A;
	/* font */
	--font-size-s: 13px;
	--font-size-m: 15px;
	--font-size-l: 18px;
	--font-size-b: 21px;
	--font-size-title1: 24px;
	--font-size-title2: 27px;
	--font-size-title3: 32px;
	--font-size-event1: 46px;
	--font-size-event2: 56px;
	--font-size-event3: 64px;
	--font-ria:"RiaSans-ExtraBold";
	--font-lotte:"LOTTERIADDAG";
}

/*=================================================================================
* icon
=================================================================================*/
.icon { display: inline-block; }
.icon.ic-quick-01 { background: url("../img/quick-icon-01.svg"); width: 48px; height: 48px; }
.icon.ic-quick-02 { background: url("../img/quick-icon-02.svg"); width: 48px; height: 48px; }
.icon.ic-quick-03 { background: url("../img/quick-icon-03.svg"); width: 48px; height: 48px; }
.icon.ic-quick-04 { background: url("../img/quick-icon-04.svg"); width: 48px; height: 48px; }
.icon.ic-quick-05 { background: url("../img/quick-icon-05.svg"); width: 48px; height: 48px; }


/*=================================================================================
* align
=================================================================================*/
.text-left { text-align: left!important; }
.text-right { text-align: right!important; }
.text-center { text-align: center!important; }

/*=================================================================================
* button
=================================================================================*/
.btn { display: inline-block; position: relative; background-color: var(--color-blue-500); color: var(--color-gray-100); border-radius: 5px; }
.btn.round { border-radius: 50px; }
.btn.small { padding: 7px 10px; }
.btn.medium { padding: 15px 30px; }
.btn.big { padding: 20px 45px; }
.btn.full { width: 100%; }

/*=================================================================================
* box
=================================================================================*/
.line-item-red { border: solid 1px var(--color-red); color: var(--color-red); padding: 3px 7px; border-radius: 5px; }
.line-item-blue { border: solid 1px var(--color-blue); color: var(--color-blue); padding: 3px 7px; border-radius: 5px; }

/*=================================================================================
* font
=================================================================================*/
.text-s { font-size: var(--font-size-s)!important; }
.text-m { font-size: var(--font-size-m)!important; }
.text-l { font-size: var(--font-size-l)!important; }
.text-b { font-size: var(--font-size-b)!important; }
.text-title1 { font-size: var(--font-size-title1)!important; }
.text-title2 { font-size: var(--font-size-title2)!important; }
.text-title3 { font-size: var(--font-size-title3)!important; }
.text-event1 { font-size: var(--font-size-event1)!important; }
.text-event2 { font-size: var(--font-size-event2)!important; }
.text-event3 { font-size: var(--font-size-event3)!important; }
.te-light { font-weight: 100; }
.te-bold { font-weight: 700; }
.te-black { font-weight: 900; }
.te-red { color: var(--color-red); }
.te-blue { color: var(--color-blue); }
.te-white { color: var(--color-white); }
.te-through { text-decoration: line-through; }
.te-underline { text-decoration: underline; }
.te-gray500 { color: var(--color-gray-500); }
.te-gray600 { color: var(--color-gray-600); }
.te-gray700 { color: var(--color-gray-700); }

/*=================================================================================
* width
=================================================================================*/
.w10 { width: 10%!important; }
.w20 { width: 20%!important; }
.w30 { width: 30%!important; }
.w40 { width: 40%!important; }
.w50 { width: 50%!important; }
.w60 { width: 60%!important; }
.w70 { width: 70%!important; }
.w80 { width: 80%!important; }
.w90 { width: 90%!important; }
.w100 { width: 100%!important; }

/*=================================================================================
* margin
=================================================================================*/
.m0 { margin: 0!important; }
.m10 { margin: 10px!important; }
.m20 { margin: 20px!important; }
.m30 { margin: 30px!important; }
.m40 { margin: 40px!important; }
.m50 { margin: 50px!important; }
.mt0 { margin-top: 0!important; }
.mt5 { margin-top: 5px!important; }
.mt10 { margin-top: 10px!important; }
.mt15 { margin-top: 15px!important; }
.mt20 { margin-top: 20px!important; }
.mt25 { margin-top: 25px!important; }
.mt30 { margin-top: 30px!important; }
.mt35 { margin-top: 35px!important; }
.mt40 { margin-top: 40px!important; }
.mt45 { margin-top: 45px!important; }
.mt50 { margin-top: 50px!important; }
.mt55 { margin-top: 55px!important; }
.mt60 { margin-top: 60px!important; }
.mt65 { margin-top: 65px!important; }
.mt70 { margin-top: 70px!important; }
.mt75 { margin-top: 75px!important; }
.mt80 { margin-top: 80px!important; }
.mt85 { margin-top: 85px!important; }
.mt90 { margin-top: 90px!important; }
.mt95 { margin-top: 95px!important; }
.mt100 { margin-top: 100px!important; }
.mr0 { margin-right: 0!important; }
.mr5 { margin-right: 5px!important; }
.mr10 { margin-right: 10px!important; }
.mr15 { margin-right: 15px!important; }
.mr20 { margin-right: 20px!important; }
.mr25 { margin-right: 25px!important; }
.mr30 { margin-right: 30px!important; }
.mr35 { margin-right: 35px!important; }
.mr40 { margin-right: 40px!important; }
.mr45 { margin-right: 45px!important; }
.mr50 { margin-right: 50px!important; }
.mr55 { margin-right: 55px!important; }
.mr60 { margin-right: 60px!important; }
.mr65 { margin-right: 65px!important; }
.mr70 { margin-right: 70px!important; }
.mr75 { margin-right: 75px!important; }
.mr80 { margin-right: 80px!important; }
.mr85 { margin-right: 85px!important; }
.mr90 { margin-right: 90px!important; }
.mr95 { margin-right: 95px!important; }
.mr100 { margin-right: 100px!important; }
.mb0 { margin-bottom: 0!important; }
.mb5 { margin-bottom: 5px!important; }
.mb10 { margin-bottom: 10px!important; }
.mb15 { margin-bottom: 15px!important; }
.mb20 { margin-bottom: 20px!important; }
.mb25 { margin-bottom: 25px!important; }
.mb30 { margin-bottom: 30px!important; }
.mb35 { margin-bottom: 35px!important; }
.mb40 { margin-bottom: 40px!important; }
.mb45 { margin-bottom: 45px!important; }
.mb50 { margin-bottom: 50px!important; }
.mb55 { margin-bottom: 55px!important; }
.mb60 { margin-bottom: 60px!important; }
.mb65 { margin-bottom: 65px!important; }
.mb70 { margin-bottom: 70px!important; }
.mb75 { margin-bottom: 75px!important; }
.mb80 { margin-bottom: 80px!important; }
.mb85 { margin-bottom: 85px!important; }
.mb90 { margin-bottom: 90px!important; }
.mb95 { margin-bottom: 95px!important; }
.mb100 { margin-bottom: 100px!important; }
.ml0 { margin-left: 0!important; }
.ml5 { margin-left: 5px!important; }
.ml10 { margin-left: 10px!important; }
.ml15 { margin-left: 15px!important; }
.ml20 { margin-left: 20px!important; }
.ml25 { margin-left: 25px!important; }
.ml30 { margin-left: 30px!important; }
.ml35 { margin-left: 35px!important; }
.ml40 { margin-left: 40px!important; }
.ml45 { margin-left: 45px!important; }
.ml50 { margin-left: 50px!important; }
.ml55 { margin-left: 55px!important; }
.ml60 { margin-left: 60px!important; }
.ml65 { margin-left: 65px!important; }
.ml70 { margin-left: 70px!important; }
.ml75 { margin-left: 75px!important; }
.ml80 { margin-left: 80px!important; }
.ml85 { margin-left: 85px!important; }
.ml90 { margin-left: 90px!important; }
.ml95 { margin-left: 95px!important; }
.ml100 { margin-left: 100px!important; }

/*=================================================================================
* padding
=================================================================================*/
.p0 { padding: 0!important; }
.p10 { padding: 10px!important; }
.p20 { padding: 20px!important; }
.p30 { padding: 30px!important; }
.p40 { padding: 40px!important; }
.p50 { padding: 50px!important; }
.pt0 { padding-top: 0!important; }
.pt5 { padding-top: 5px!important; }
.pt10 { padding-top: 10px!important; }
.pt15 { padding-top: 15px!important; }
.pt20 { padding-top: 20px!important; }
.pt25 { padding-top: 25px!important; }
.pt30 { padding-top: 30px!important; }
.pt35 { padding-top: 35px!important; }
.pt40 { padding-top: 40px!important; }
.pt45 { padding-top: 45px!important; }
.pt50 { padding-top: 50px!important; }
.pt55 { padding-top: 55px!important; }
.pt60 { padding-top: 60px!important; }
.pt65 { padding-top: 65px!important; }
.pt70 { padding-top: 70px!important; }
.pt75 { padding-top: 75px!important; }
.pt80 { padding-top: 80px!important; }
.pt85 { padding-top: 85px!important; }
.pt90 { padding-top: 90px!important; }
.pt95 { padding-top: 95px!important; }
.pt100 { padding-top: 100px!important; }
.pr0 { padding-right: 0!important; }
.pr5 { padding-right: 5px!important; }
.pr10 { padding-right: 10px!important; }
.pr15 { padding-right: 15px!important; }
.pr20 { padding-right: 20px!important; }
.pr25 { padding-right: 25px!important; }
.pr30 { padding-right: 30px!important; }
.pr35 { padding-right: 35px!important; }
.pr40 { padding-right: 40px!important; }
.pr45 { padding-right: 45px!important; }
.pr50 { padding-right: 50px!important; }
.pr55 { padding-right: 55px!important; }
.pr60 { padding-right: 60px!important; }
.pr65 { padding-right: 65px!important; }
.pr70 { padding-right: 70px!important; }
.pr75 { padding-right: 75px!important; }
.pr80 { padding-right: 80px!important; }
.pr85 { padding-right: 85px!important; }
.pr90 { padding-right: 90px!important; }
.pr95 { padding-right: 95px!important; }
.pr100 { padding-right: 100px!important; }
.pb0 { padding-bottom: 0!important; }
.pb5 { padding-bottom: 5px!important; }
.pb10 { padding-bottom: 10px!important; }
.pb15 { padding-bottom: 15px!important; }
.pb20 { padding-bottom: 20px!important; }
.pb25 { padding-bottom: 25px!important; }
.pb30 { padding-bottom: 30px!important; }
.pb35 { padding-bottom: 35px!important; }
.pb40 { padding-bottom: 40px!important; }
.pb45 { padding-bottom: 45px!important; }
.pb50 { padding-bottom: 50px!important; }
.pb55 { padding-bottom: 55px!important; }
.pb60 { padding-bottom: 60px!important; }
.pb65 { padding-bottom: 65px!important; }
.pb70 { padding-bottom: 70px!important; }
.pb75 { padding-bottom: 75px!important; }
.pb80 { padding-bottom: 80px!important; }
.pb85 { padding-bottom: 85px!important; }
.pb90 { padding-bottom: 90px!important; }
.pb95 { padding-bottom: 95px!important; }
.pb100 { padding-bottom: 100px!important; }
.pl0 { padding-left: 0!important; }
.pl5 { padding-left: 5px!important; }
.pl10 { padding-left: 10px!important; }
.pl15 { padding-left: 15px!important; }
.pl20 { padding-left: 20px!important; }
.pl25 { padding-left: 25px!important; }
.pl30 { padding-left: 30px!important; }
.pl35 { padding-left: 35px!important; }
.pl40 { padding-left: 40px!important; }
.pl45 { padding-left: 45px!important; }
.pl50 { padding-left: 50px!important; }
.pl55 { padding-left: 55px!important; }
.pl60 { padding-left: 60px!important; }
.pl65 { padding-left: 65px!important; }
.pl70 { padding-left: 70px!important; }
.pl75 { padding-left: 75px!important; }
.pl80 { padding-left: 80px!important; }
.pl85 { padding-left: 85px!important; }
.pl90 { padding-left: 90px!important; }
.pl95 { padding-left: 95px!important; }
.pl100 { padding-left: 100px!important; }