//bootstrap color
:root{
	// red & pink
	--bs-red:220, 53, 69; //#dc3545
	--bs-red-primary:206, 25, 34; //#ce1922
	--bs-red-danger:220, 53, 69; //#dc3545
	--bs-red-lava:233, 27, 37; //#e91b25
	--bs-red-chili:205, 22, 38; //#cd1626
	--bs-red-origin:255, 0, 0; //#ff0000
	--bs-red-bright:253, 13, 13; //#FD0D0D
	--bs-red-rose-madder:223, 23, 43; //#DF172B
	--bs-red-cornell:177, 31, 31; //#B11F1F
	--bs-pink:214, 51, 132; //#d63384
	--bs-pink-peach:255, 147, 147; //#ff9393
	--bs-pink-pearl:255, 235, 235; //#ffebeb
	--bs-pink-salmon:248, 126, 126; //#f87e7e
	--bs-pink-magenta:255, 0, 255; //#FF00FF
	--bs-pink-limited:243, 108, 214; //#f36cd6
	--bs-pink-light-rose:255, 199, 209; //#FFC7D1
	// orange & yellow
	--bs-coral-light:229, 132, 137; //#E58489
	--bs-orange:253, 126, 20; //#fd7e14
	--bs-orange-mango:255, 139, 51; //#FF8B33
	--bs-orange-tahiti:255, 128, 0;//#FF8000
	--bs-orange-sand:226, 148, 117;//#E29475
	--bs-yellow:255, 193, 7; //#ffc107
	--bs-yellow-orange:255, 165, 0; //#FFA500
	--bs-yellow-beer:255, 179, 16; //#FFB310
	// green & blue & purple
	--bs-green:25, 135, 84; //#198754
	--bs-green-teal:32, 201, 151; //#20c997
	--bs-green-clover:40, 167, 69; //#28A745
	--bs-green-mid:60, 166, 91; //#3CA65B
	--bs-green-olive:172, 221, 109;//#acdd6d
	--bs-blue:13, 110, 253; //#0d6efd
	--bs-blue-powder:192, 219, 234; //#C0DBEA
	--bs-blue-biloba-flower:153, 170, 238; //#99AAEE
	--bs-blue-light-steel:114, 134, 211; //#7286D3
	--bs-blue-cyan:13, 202, 240; //#0dcaf0
	--bs-blue-info:13, 202, 240; //#0dcaf0
	--bs-blue-azure:0, 157, 255; //#009dff
	--bs-blue-kashmir:78, 108, 163; //#4E6CA3
	--bs-blue-science:2, 98, 205; //#0262cd
	--bs-blue-crystal:110, 168, 254; //#6EA8FE
	--bs-blue-origin:0, 0, 255; //#0000ff
	--bs-blue-cobalt:28, 28, 205; //#1c1ccd
	--bs-blue-deep-sky:0, 123, 255;//#007BFF
	--bs-blue-royal-azure:1, 67, 163;//0143a3
	--bs-blue-dodger-blue:61, 136, 250;//#3D88FA
	--bs-blue-soft:95, 145, 251;//#5f91fb
	--bs-purple:111, 66, 193; //#6f42c1
	--bs-purple-indigo:102, 16, 242; //#6610f2
	//brown
	--bs-brown-quicksand:177, 155, 143;//#B19B8F
	--bs-brown-taupe:107, 82, 69;//#6B5245
	// white
	--bs-white:255, 255, 255; //#ffffff
	--bs-white-smoke:245, 245, 245; //#F5F5F5
	--bs-white-spring:247, 247, 247; //#f7f7f7
	--bs-white-snow:249, 249, 249; //#f9f9f9
	--bs-white-porcelain:242, 242, 242; //#f2f2f2
	--bs-white-baja:255, 250, 209; //#fffad1
	--bs-white-seaShell:240, 240, 240;//##F0F0F0
	--bs-white-smoke:245, 245, 247;//#F5F5F7
	--bs-white-green:223, 240, 216;//#DFF0D8
	// silver & gray
	--bs-silver:199, 199, 199; //#c7c7c7
	--bs-silver-chalice:172, 174, 175; //#ACAEAF
	--bs-silver-aluminium:170, 170, 170; //#AAAAAA
	--bs-gray:108, 117, 125; //#6c757d
	--bs-gray-100:248, 249, 250; //#f8f9fa
	--bs-gray-200:233, 236, 239; //#e9ecef
	--bs-gray-250:233, 233, 233; //#e9e9e9
	--bs-gray-300:222, 226, 230; //#dee2e6
	--bs-gray-400:206, 212, 218; //#ced4da
	--bs-gray-500:173, 181, 189; //#adb5bd
	--bs-gray-600:146, 146, 146; //#929292
	--bs-gray-700:73, 80, 87; //#495057
	--bs-gray-800:52, 58, 64; //#343a40
	--bs-gray-dust:209, 209, 209; //#D1D1D1
	--bs-gray-cloud:181, 181, 181; //#B5B5B5
	--bs-gray-pastel:204, 204, 204; //#CCCCCC
	--bs-gray-ghost:203, 203, 203; //#CBCBCB
	--bs-gray-pastel-lavender:206, 206, 206; //#CECECE
	--bs-gray-dust-storm:207, 207, 207;//#cfcfcf
	--bs-gray-iron-sky:203, 211, 218;//#CBD3DA
	--bs-gray-cottonSeed:193, 185, 185;//#C1B9B9
	--bs-gray-dawn:162, 162, 162; //#A2A2A2
	--bs-gray-ash:187, 187, 187; //#bbbbbb
	--bs-gray-ashPink:186, 186, 186; //#bababa
	--bs-gray-softPeach:237, 237, 237; //#ededed
	--bs-gray-platinum:226, 226, 226; //#E2E2E2
	--bs-gray-soft:235, 235, 235; //#EBEBEB
	--bs-gray-soft-peach:239, 239, 239;//#efefef
	--bs-gray-gainsBoro:219, 219, 219; //#DBDBDB
	--bs-gray-moon-mist:221, 221, 221; //#DDDDDD
	--bs-gray-pearl:223, 223, 223; //#dfdfdf
	--bs-gray-gunsmoke:135, 135, 135; //#878787
	--bs-gray-border:195, 195, 195; //#c3c3c3
	--bs-gray-wenge:85, 85, 85; //#555555
	--bs-gray-charcoal:64, 69, 73; //#404549
	--bs-gray-gravel:64, 67, 70; //#404346
	--bs-gray-boulder:119, 119, 119; //#787676
	--bs-gray-quill:213, 213, 213;//#D5D5D5
	--bs-gray-granite:124, 124, 124;//#C7C7C7C
	--bs-gray-medium:127, 127, 127;//#7F7F7F
	--bs-gray-monsoon:136, 136, 136;//#888888
	//dark & black
	--bs-dark:33, 37, 41; //#212529
	--bs-dark-dune:51, 51, 51; //#333333
	--bs-dark-mirage:34, 34, 34; //#222222
	--bs-dark-metal:45, 46, 52; //#2d2e34
	--bs-dark-charcoal:47, 52, 56; //#2F3438
	--bs-dark-onyx: 14, 14, 14; //#0E0E0E
	--bs-dark-night: 9, 10, 11; //#090A0B
	--bs-dark-sea:40, 40, 40; //#282828
	--bs-dark-deep:33, 33, 33; //#212121
	--bs-dark-green:24, 22, 19;//#181613
	--bs-black:0, 0, 0; //#000000
	--bs-black-eel:68, 68, 68; //#444444
	--bs-black-cement:45, 46, 52; //#2D2E34
}



//mixin
@mixin bold{
	font-weight:600;
	font-variation-settings:"wght" 600;
}
@mixin clear{
	&:after{clear:both; display:block; content:'';}
}
// $pos는 배경 이미지의 반복 방향을 지정. $x와 $y는 배경 이미지의 위치를 지정.
@mixin repeat-bg($imgpath, $pos, $x, $y){
	background:url('/img/'+$imgpath) repeat-#{$pos} $x $y;
}
@mixin color-bg($bg-color, $imgpath, $x, $y){
	background:$bg-color url('/img/'+$imgpath) no-repeat $x $y;
}
@mixin bg($imgpath, $x, $y){
	background:url('/img/'+$imgpath) no-repeat $x $y;
}
@mixin ellipsis($line-cnt){
    display:-webkit-box; overflow:hidden; text-overflow: ellipsis; -webkit-line-clamp: $line-cnt; -webkit-box-orient:vertical;
}


//reponsive
$breakpoint-sm-mobile:300px;
$breakpoint-md-mobile:415px;
$breakpoint-lg-mobile:500px;

$small: 768px;
$medium: 1024px;
$breakpoint-tablet:1024px;
$large: 1200px;
$x-large: 1400px;
//$breakpoint-desktop:1920px;


@mixin mobile-375{
    @media screen and (max-width : #{$breakpoint-sm-mobile}){
        @content;
    }
}
@mixin mobile-415{
    @media screen and (max-width : #{$breakpoint-md-mobile}){
        $input-pd:0.93rem !global; //먹히지 않음
        $icon-pd:3.43rem !global;  //먹히지 않음
        @content;
    }
}
@mixin mobile-500{
    @media screen and (max-width : #{$breakpoint-lg-mobile}){
        @content;
    }
}
@mixin small{
	@media screen and (max-width:$small){
		@content;
	}
}
@mixin medium{
	@media screen and (max-width: $medium){
		@content;
	}
}
//medium과 동일함
@mixin tablet-1024{
    @media screen and (max-width : #{$breakpoint-tablet}){
        @content;
    }
}
@mixin large{
	@media screen and (max-width: $large){
		@content;
	}
}
@mixin x-large{
	@media screen and (max-width: $x-large){
		@content;
	}
}