$colors: (
    wh: rgb(255,255,255),
    wh-opacity: rgba(255,255,255,.1),
    wh-opacity1: rgba(255,255,255,.45),
    wh-opacity2: rgba(255,255,255,.75),
    bl: rgb(0,0,0),
    bl-opacity: rgba(0,0,0,.25),
    bl-opacity1: rgba(0,0,0,.45),
    bl-opacity2: rgba(0,0,0,.75),
    dark: rgb(17,17,17),
    dark2: rgb(80,80,91),
    skin: rgb(255,82,29),
    navy: rgb(46,52,100),
    purple-pastel:rgb(121, 126, 254),
    orange-pastel:rgb(255, 144, 101),
    yellow-pastel:rgb(255, 201, 67),
    
    cha-bg-01:rgb(123, 216, 136),
    cha-bg-02:rgba(178, 111, 240, 1),
    cha-bg-03:rgba(255, 192, 63, 1),
    cha-bg-04:rgba(89, 191, 255, 1),
    cha-bg-05:rgba(121, 126, 254, 1),
    cha-bg-06:rgba(253, 141, 99, 1),
    cha-bg-07:rgba(254, 118, 159, 1),
    cha-bg-08:rgba(214, 123, 242, 1),

    mint:rgba(54,208,174),
    primary: rgb(0,120,200),
    secondary: rgb(173,181,189),
    success: rgb(44,181,126),
    info: rgb(71,188,232),
    warning: rgb(255,128,0),
    danger: rgb(229,38,0),
    yel: rgb(255,196,10),
	light:rgb(249,245,242),
    gray:rgb(102,102,102),
    gray-b:rgb(153,153,153),
    gray-m:rgb(219,219,219),
    gray-s:rgb(243,243,243),
	naver:rgb(33,197,6),
	kakao:rgb(255,238,0),
	youtube:rgb(255,0,0),
    kakao-brown: rgb(62,25,54),
    esg-green: rgb(25,154,72),
);
$font-sm:11px;
$font-md:13px;
$font-lg:15px;
$widths: (0:0, 1: 1 ,2: 2 ,3: 3,4: 4,5: 5,6: 6,7: 7,8: 8,9: 9, 10:10);

@function color($color-name) {
	@return map-get($colors, $color-name)
}
@each $width, $value in $widths {
  .border-#{$width} { border-width: #{$value}px !important; }
  .line-height-#{$width} { line-height: $value * 0.1 + 1 !important; }
  .letter-space-#{$width} { letter-spacing: -#{$value * 0.5}px !important; }
  .alpha-#{$width}{opacity:$value * 0.1}
  .font-weight-#{$width}{font-weight:#{$value * 100} !important}
  .opacity-#{$width}{opacity:$value * 0.1}
}
@each $color, $value in $colors {
  .btn-#{$color}, .bg-#{$color}, .badge-#{$color} { background-color: $value !important;}
  .point-#{$color} { &::after{background-color: $value !important;}}
  .btn-outline-#{$color} {color:$value !important;border-color:$value !important;}
  .text-#{$color} {color: $value !important; }
  .border-#{$color} {border-color: $value !important;transition:opacity .3s;}
  .list-circle.list-#{$color} li::before {background-color: $value !important;}
  .list-check.list-#{$color} li::before {color: $value !important;}
}
$fonts: ( 
    kr: Pretendard,
    en: Montserrat, 
    chungbuk: Chungbuk-National-University, 
    score: S-CoreDream, 
    gmarket: Gmarket Sans, 
);
@each $font, $value in $fonts {
    .font-#{$font} {font-family: "#{$value}" !important; }
}
$mobile-sm:319px;
$mobile:413px;
$tablet-sm:576px;
$tablet:768px;
$desktop:992px;
$desktop-xl:1200px;
$desktop-xxl:1400px;

$max-mobile-sm:320px;
$max-mobile:414px;
$max-tablet-sm:575px;
$max-tablet:767px;
$max-desktop:991px;
$max-desktop-xl:1199px;
$max-desktop-xxl:1399px;


@mixin desktop-xxl {
    @media (min-width: #{$desktop-xxl}) {
        @content;
    }
}
@mixin desktop-xl {
    @media (min-width: #{$desktop-xl}) {
        @content;
    }
}
@mixin desktop {
    @media (min-width: #{$desktop}) {
        @content;
    }
}
@mixin tablet {
    @media (min-width: #{$tablet}) {
        @content;
    }
}
@mixin tablet-sm {
    @media (min-width: #{$tablet-sm}) {
        @content;
    }
}
@mixin mobile {
    @media (min-width: #{$mobile}) {
        @content;
    }
}

@mixin max-desktop-xxl {
    @media (min-width: #{$max-desktop-xxl}) {
        @content;
    }
}
@mixin max-desktop-xl {
    @media (max-width: #{$max-desktop-xl}) {
        @content;
    }
}

@mixin max-desktop {
    @media (max-width: #{$max-desktop}) {
        @content;
    }
}
@mixin max-tablet {
    @media (max-width: #{$max-tablet}) {
        @content;
    }
}
@mixin max-tablet-sm {
    @media (max-width: #{$max-tablet-sm}) {
        @content;
    }
}
@mixin max-mobile {
    @media (max-width: #{$max-mobile}) {
        @content;
    }
}