@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap');



:root {
	--lmb-width:272px;

	--section-lr:2.5vw;
	--section-tb:60px;

	--section-tb-inver:-60px;
	--section-lr-inver:-2.5vw;

	--main-color: #72cb00;
	--main-color-2: #0d7b26;
	--main-color-3: #e2f3c7;
	--main-color-4: #e7fffb;
	--point-color: ;

	--main-gradient:linear-gradient(140deg, var(--main-color),var(--main-color-2));
	--main-gradient-btn:linear-gradient(140deg, var(--main-color-3),var(--main-color-4));
	--main-gradient-line:linear-gradient(140deg, var(--main-color-2),var(--main-color));

	--box-shadow-color:#27a52b9c;

	--white:#fff;
	--black:#000;
	--black80:#333;
	--black60:#666;
	--black40:#999;
	--black20:#CCC;
	--black10:#E6E6E6;
	--black5:#F2F2F2;


	--bg-color:#ebf3e6;
	




	--fs-big-title: 40px;
	--fs-middle-title: 32px;
	--fs-semi-title: 28px;
	--fs-sub-title: 20px;
	--fs-body-title: 16px;
	--fs-body: 13px;
	--fs-discript: 11px;

	--fw-800:800;
	--fw-700:700;
	--fw-600:600;
	--fw-500:500;
	--fw-normal:400;
	--fw-200: 400;

	--fstyle-main:'Noto Sans KR', sans-serif;
	--fstyle-01: ;
	--fstyle-02: ;

	--type-big-title:var(--fw-800) var(--fs-big-title)/1.4em var(--fstyle-main) ;
	--type-middle-title:var(--fw-800) var(--fs-middle-title)/1.4em var(--fstyle-main) ;
	--type-semi-title:var(--fw-700) var(--fs-semi-title)/1.5em var(--fstyle-main) ;
	--type-sub-title:var(--fw-600) var(--fs-sub-title)/1.5em var(--fstyle-main) ;
	--type-body-title:var(--fw-600) var(--fs-body-title)/1.6em var(--fstyle-main) ;
	--type-body:var(--fw-normal) var(--fs-body)/1.6em var(--fstyle-main);
	--type-discript:var(--fw-normal) var(--fs-discript)/1.6em var(--fstyle-main);




	--box-padding:40px;
	--box-r:24px;
	--box-shadow:4px 4px 12px #0000002c;



	--btn-r:16px;

	--max-contain-width:760px;
}

* {
	margin-block-start: 0px;
	margin-block-end: 0px;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	line-height:1.65em;
	letter-spacing:-0.045em;
	font:var(--type-body);
}


article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
html {
	overflow-x:auto;
	overflow-y:scroll;
	scroll-behavior: smooth;

}


body {
	font-family: 'Noto Sans KR', sans-serif;
}

h1 {font:var(--type-big-title);}
h2 {font:var(--type-middle-title);}
h3 {font:var(--type-semi-title);}
h4 {font:var(--type-sub-title);}
h5 {font:var(--type-body-title);}



span, strong {vertical-align:baseline;}
nav, ul {list-style:none;}


input, textarea, select {font-family:'Noto Sans KR', sans-serif; font-size:inherit; vertical-align:middle;padding: 0; margin: 0; border: none;outline:none;}

input, textarea {padding: 5px 10px;}

select::-ms-expand { 
	display: none;
}
select {
	-o-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

select {
  background: url(../images/CaretDown.svg) calc(100% - 5px) center no-repeat;
  background-size: 20px;
  padding: 5px 30px 5px 10px;
}


textarea {resize:vertical; overflow:auto;}
fieldset {border:0 none;}
legend {visibility:hidden; height:0; font:0/0 a;}
legend, {margin-left:-7px;}
caption {visibility:hidden; height:0; font:0/0 a;}
a {margin:0; padding:0; text-decoration:none;}
a:hover {}
a:focus, button:focus {outline:thin dotted;}
a:active {background-color:transparent;}
table {border-collapse:collapse; border-spacing:0;}
img {-ms-interpolation:bicubic;    vertical-align: sub;}
strong {vertical-align:top;}
button, input[type="reset"], input[type="submit"] {
	-webkit-appearance:button; cursor:pointer; vertical-align:baseline; font-family: inherit; line-height: inherit; letter-spacing:inherit;
}
input[type="checkbox"], input[type="radio"] {
	box-sizing:border-box; padding:0;  margin:0;
}







input[type="checkbox"], input[type="radio"]{display:none;}

input[type="checkbox"] + label, input[type="radio"] + label{cursor:pointer;}

input[type="checkbox"] + label > span, input[type="radio"] + label > span{
	vertical-align: middle;
	padding-left: 5px;
	color:var(--black80);
}

input[type="checkbox"].big + label > span{
	vertical-align: middle;
	padding-left: 5px;
	font-size:var(--fsize-body-title);
}


/* label:before¿¡ üũÇϱâ Àü »óÅ CSS */
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
	content:"";
	display:inline-block;
	width:16px;
	height:16px;
	border:1px solid var(--black20);
	border-radius: 4px;
	vertical-align:middle;
	background:var(--white);
}

input[type="checkbox"].circle_check + label:before{
	content:"";
	display:inline-block;
	width:18px;
	height:18px;
	background-image: url(../images/Check.svg);
	border:1px solid var(--black20);
	border-radius: 50em;
	vertical-align:middle;
	background-repeat: no-repeat;
	background-size: 80%;
    background-position: center;
}

input[type="checkbox"].circle_check.big + label:before{
	content:"";
	display:inline-block;
	width:24px;
	height:24px;
	background-image: url(../images/Check.svg);
	border:1px solid var(--black20);
	border-radius: 50em;
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
}

/* label:before¿¡ üũ µÈ »óÅ CSS */  
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before{
	content:"";
	background-color:var(--main-color);
	border-color:var(--main-color);
	background-image: url(../images/Check.svg);
	background-repeat: no-repeat;
    background-blend-mode: color-dodge;
    background-size: 80%;
    background-position: center;
}

input[type="checkbox"].circle_check:checked + label:before{
	content:"";
	background-color:var(--main-color);
	border-color:var(--main-color);
	background-image: url(../images/Check.svg);
	background-repeat: no-repeat;
    background-blend-mode: color-dodge;
    background-size: 80%;
    background-position: center;
}

input[type="checkbox"].circle_check.big:checked + label:before{
	content:"";
	background-color:var(--main-color);
	border-color:var(--main-color);
	background-image: url(../images/Check.svg);
	background-repeat: no-repeat;
    background-blend-mode: color-dodge;
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
}


.container-wrap {
	max-width:var(--max-contain-width);
	margin:0 auto;
}

.container {
	padding:var(--section-tb) var(--section-lr);

	&.align-c-item {
		item-align:center;
		text-align:center;
	}
}

.txt-a-l {text-align:left;}




.label_input{
	display: block;
}


.label_input > span{
	color:var(--black60);
	margin-bottom:4px;
	display: flex;
    align-items: center;
}

.label_input.pilsu > span:before{
	content:"";
	width:14px;
	height:14px;
	background-image: url(../images/Check.svg);
	background-size: cover;
	margin-right:8px;
	display: block;
	filter: invert(100%) hue-rotate(238deg) sepia(70%) saturate(880%) contrast(940%);
}












input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
button::-moz-focus-inner, input::-moz-focus-inner {
	border:0; padding:0; margin:0;
}
































.clearfix:after {content:'';display:block;clear:both}
.blind {position:absolute;overflow:hidden;clip:rect(0 0 0 0);margin:-1px;width:1px;height:1px}

a {
	text-decoration-line: none;
	text-decoration : none;
	color: inherit
}

a:focus, a:active {outline:none;}






/********** ¹öÆ° ¸ðÀ½ ºÎºÐ **********/
.btn_wrap {width:100%; display:flex; padding-top:48px; gap:8px;}

.btn_wrap_nonepd {width:100%; display:flex; padding-top:0;}

.btn_wrap .btn-2col, .btn_wrap_nonepd .btn-2col {width:100%; display:flex; flex-direction: row; justify-content: space-between;}


.btn_wrap .btn-2col .btn, .btn_wrap_nonepd .btn-2col .btn {
	width:50%;
	gap:8px;
	margin-bottom:0;
}

.btn_wrap .btn-2col.btn-2col-w-free .btn, .btn_wrap_nonepd .btn-2col.btn-2col-w-free .btn {
	width:fit-content;
}




.btn {
	border-radius:4px;
	background:var(--white);
	color:var(--black80);
	min-width:80px;
	text-align:center;
	border: none;
	transition:all 0.3s ease;
	padding:6px 8px;
	display: flex;
    align-items: center;
    justify-content: center;
	word-break: auto-phrase;
	line-height: 1.5em;
	white-space: nowrap;
}



.btn:last-child {
	margin-bottom:0;
}

.btn img.btn-front-icon {padding-right:4px;}
.btn img.btn-back-icon {padding-left:4px;}

.btn-middle {font-size:var(--fsize-body-title); padding:12px 20px; }

.btn-big {font-size:var(--fsize-sub-title); padding:16px; }



.btn:hover {scale: 104%; transition:all 0.3s ease;}



.btn.black {background:var(--black80);color:var(--white);border:1px solid var(--black80);}

.btn.color {background:var(--point-color);color:var(--white);border:1px solid var(--point-color);}

.btn.gradient {background:var(--main-gradient);color:var(--white);border:1px solid var(--main-color);}

.btn.disable {background:var(--black5);color:var(--black20);border:1px solid var(--black5);}



.btn.outline {background:none; color:var(--white); border:1px solid var(--white);}

.btn.outline-black {background:var(--white); color:var(--black80); border:1px solid var(--black80);}

.btn.outline-color {background:var(--white); color:var(--point-color); border:1px solid var(--point-color);}

.btn.outline-gradient {background:var(--white); color:var(--main-gradient); border:1px solid var(--main-gradient);}

.btn.outline-disable {background:var(--white); color:var(--black20); border:1px solid var(--black20);}

.sns_btn {border-radius: 50em;}

.sns_btn.naver {background: #0CB75B; color:var(--white);}

.sns_btn.kakao {background: #FED500;color:#483631;}



.btn.play-icon:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/play.svg) center no-repeat;
	background-size:cover;
}

.btn.play-icon-reverse:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/play.svg) center no-repeat;
	background-size:cover;
	filter: invert(200%) brightness(200%);
}

.btn.add-icon:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/PlusCircle.svg) center no-repeat;
	background-size:cover;
}

.btn.add-icon-reverse:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/PlusCircle.svg) center no-repeat;
	background-size:cover;
	filter: invert(200%) brightness(200%);
}

.btn.del-icon:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/MinusCircle.svg) center no-repeat;
	background-size:cover;
}

.btn.del-icon-reverse:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/MinusCircle.svg) center no-repeat;
	background-size:cover;
	filter: invert(200%) brightness(200%);
}

.btn.check-icon:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/CheckCircle.svg) center no-repeat;
	background-size:cover;
	filter: invert(200%) brightness(200%);
}

.btn.check-icon-reverse:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/CheckCircle.svg) center no-repeat;
	background-size:cover;
	filter: invert(200%) brightness(200%);
}

.btn.check-icon-white-reverse:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/CheckCircle.svg) center no-repeat;
	background-size:cover;
	filter: invert(50%) brightness(400%) contrast(200%);
}

.btn.write-icon:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/Pencil.svg) center no-repeat;
	background-size:cover;
}


.btn.heart_icon:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/Heart.svg) center no-repeat;
	background-size:cover;
}

.btn.heart_icon.on:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/Heart_on.svg) center no-repeat;
	background-size:cover;
}

.btn.cancel-icon:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/CLOSE.svg) center no-repeat;
	background-size:cover;
}



/********** ¹öÆ° ¸ðÀ½ ºÎºÐ end **********/



/********** °øÅë¿ä¼Ò container ºÎºÐ **********/

/**** flex °ü·Ã ºÎºÐ ****/
.flex {display:flex;}

.flex-colrum {flex-direction: column;}

.space-between {justify-content:space-between}

.justify-content-c {justify-content:center !important;}

.justify-content-c .btn {width:fit-content !important;}

.align-items-c {align-items:center;}

.justify-content-flex-end {justify-content: flex-end;}


/**** flex °ü·Ã ºÎºÐ end ****/


/**** °¡·ÎÆø °ü·Ã ****/
.w-100 {width:100%;}
.w-80 {width:80%;}
.w-70 {width:70%;}
.w-60 {width:60%;}
.w-50 {width:50%;}
.w-40 {width:40%;}
.w-30 {width:30%;}
.w-20 {width:20%;}

.w-1-3 {width:calc(33.3% - calc(var(--section-lr)/2));}
.w-2-3 {width:calc(66.6% - calc(var(--section-lr)/2));}

.w-1-4 {width:calc(25% - calc(var(--section-lr)/2));}
.w-3-4 {width:calc(75% - calc(var(--section-lr)/2));}

.w-1-5 {width:calc(20% - calc(var(--section-lr)/2));}
.w-3-5 {width:calc(60% - calc(var(--section-lr)/2));}
.w-4-5 {width:calc(80% - calc(var(--section-lr)/2));}


.w-1-6 {width:calc(16.66% - calc(var(--section-lr)/2));}
.w-3-6 {width:calc(49.98% - calc(var(--section-lr)/2));}
.w-4-6 {width:calc(66.46% - calc(var(--section-lr)/2));}
.w-5-6 {width:calc(83.3% - calc(var(--section-lr)/2));}


.w-con {width:fit-content !important;}

.m-w-100 {width:100;}
/**** °¡·ÎÆø °ü·Ã end****/



/**** °£°Ý Á¶Á¤ ****/
.pd-t-0 {padding-top:0px !important;}
.pd-t-4 {padding-top:4px !important;}
.pd-t-8 {padding-top:8px !important;}
.pd-t-12 {padding-top:12px !important;}
.pd-t-16 {padding-top:16px !important;}
.pd-t-20 {padding-top:20px !important;}
.pd-t-24 {padding-top:24px !important;}
.pd-t-32 {padding-top:32px !important;}
.pd-t-40 {padding-top:40px !important;}
.pd-t-60 {padding-top:60px !important;}



.pd-r-0 {padding-right:0px !important;}
.pd-r-4 {padding-right:4px !important;}
.pd-r-8 {padding-right:8px !important;}
.pd-r-12 {padding-right:12px !important;}
.pd-r-16 {padding-right:16px !important;}
.pd-r-20 {padding-right:20px !important;}
.pd-r-24 {padding-right:24px !important;}
.pd-r-32 {padding-right:32px !important;}
.pd-r-40 {padding-right:40px !important;}
.pd-r-60 {padding-right:60px !important;}


.pd-b-0 {padding-bottom:0px !important;}
.pd-b-4 {padding-bottom:4px !important;}
.pd-b-8 {padding-bottom:8px !important;}
.pd-b-12 {padding-bottom:12px !important;}
.pd-b-16 {padding-bottom:16px !important;}
.pd-b-20 {padding-bottom:20px !important;}
.pd-b-24 {padding-bottom:24px !important;}
.pd-b-32 {padding-bottom:32px !important;}
.pd-b-40 {padding-bottom:40px !important;}
.pd-b-60 {padding-bottom:60px !important;}



.pd-l-0 {padding-left:0px !important;}
.pd-l-4 {padding-left:4px !important;}
.pd-l-8 {padding-left:8px !important;}
.pd-l-12 {padding-left:12px !important;}
.pd-l-16 {padding-left:16px !important;}
.pd-l-20 {padding-left:20px !important;}
.pd-l-24 {padding-left:24px !important;}
.pd-l-32 {padding-left:32px !important;}
.pd-l-40 {padding-left:40px !important;}
.pd-l-60 {padding-left:60px !important;}






.mg-t-0 {margin-top:0px !important;}
.mg-t-4 {margin-top:4px !important;}
.mg-t-8 {margin-top:8px !important;}
.mg-t-12 {margin-top:12px !important;}
.mg-t-16 {margin-top:16px !important;}
.mg-t-20 {margin-top:20px !important;}
.mg-t-24 {margin-top:24px !important;}
.mg-t-32 {margin-top:32px !important;}
.mg-t-40 {margin-top:40px !important;}
.mg-t-60 {margin-top:60px !important;}



.mg-r-0 {margin-right:0px !important;}
.mg-r-4 {margin-right:4px !important;}
.mg-r-8 {margin-right:8px !important;}
.mg-r-12 {margin-right:12px !important;}
.mg-r-16 {margin-right:16px !important;}
.mg-r-20 {margin-right:20px !important;}
.mg-r-24 {margin-right:24px !important;}
.mg-r-32 {margin-right:32px !important;}
.mg-r-40 {margin-right:40px !important;}
.mg-r-60 {margin-right:60px !important;}



.mg-b-0 {margin-bottom:0px !important;}
.mg-b-4 {margin-bottom:4px !important;}
.mg-b-8 {margin-bottom:8px !important;}
.mg-b-12 {margin-bottom:12px !important;}
.mg-b-16 {margin-bottom:16px !important;}
.mg-b-20 {margin-bottom:20px !important;}
.mg-b-24 {margin-bottom:24px !important;}
.mg-b-32 {margin-bottom:32px !important;}
.mg-b-40 {margin-bottom:40px !important;}
.mg-b-60 {margin-bottom:60px !important;}



.mg-l-0 {margin-left:0px !important;}
.mg-l-4 {margin-left:4px !important;}
.mg-l-8 {margin-left:8px !important;}
.mg-l-12 {margin-left:12px !important;}
.mg-l-16 {margin-left:16px !important;}
.mg-l-20 {margin-left:20px !important;}
.mg-l-24 {margin-left:24px !important;}
.mg-l-32 {margin-left:32px !important;}
.mg-l-40 {margin-left:40px !important;}
.mg-l-60 {margin-left:60px !important;}

/**** °£°Ý Á¶Á¤ end ****/




/**** »ö»ó ºÎºÐ ****/
.main-color {color:var(--main-color);}

.bg-color {
	background:var(--main-gradient-btn);
}

.bg-gray {
	background:#fbfbfb;
}

colored {color:var(--main-color);}

red{color:red; margin-left:4px;}

.white {color:var(--white);}

.red{color:red;}

.gray {color:var(--black40);}

/**** »ö»ó ºÎºÐ end ****/














/**** ¸»ÁÙÀÓ ºÎºÐ ****/
.txt_ellipsis {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	white-space: normal;
	text-overflow: ellipsis;
	word-wrap: break-word;
}

.txt_ellipsis.line_1 {
	-webkit-line-clamp: 1;
}

.txt_ellipsis.line_2 {
	-webkit-line-clamp: 2;
}

.txt_ellipsis.line_3 {
	-webkit-line-clamp: 3;
}


/**** ¸»ÁÙÀÓ ºÎºÐ end ****/



/********** °øÅë¿ä¼Ò ºÎºÐ end **********/










/********** ¸®½ºÆ® ºÎºÐ **********/
.item-list-wrap {
	display: grid;
	gap: 15px;

	&.col-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	&.col-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	&.col-4 {
		grid-template-columns: repeat(4, 1fr);
	}
	&.col-5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.item-box {
		padding:var(--box-padding);
		border-radius:var(--box-r);
		box-shadow:var(--box-shadow);
		background:white;
		transition:ease 0.3s;
		display: flex;
        align-items: center;
        justify-content: space-between;
		

		.img-wrap.box {
			padding:8px;
			background: #f1f1f1;
            border-radius: var(--btn-r);
            display: inline-block;
			margin-bottom:5px;
		}

		.img-wrap.circle {
			opacity:0.5;
		}


		&:hover {
			scale:1.05;
			background:var(--main-gradient);
			color:white;

			.img-wrap.box {	
				background: white;

				svg path, svg rect {stroke:var(--main-color);}
			}

			.img-wrap.circle {
				svg path {stroke:white;}
			}
		}
	}

}










.img-wrap {line-height:1em;}


.top-area-wrap {
	margin-bottom:40px;
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

	.top-area-badge {
		display: inline-flex;
		align-items: center;
		padding: 5px 20px;
		border: 2px solid transparent;
		border-radius: 10px;
		color: white;
		background-image: var(--main-gradient), var(--main-gradient-line);
		background-origin: border-box;
		background-clip: padding-box, border-box;
		box-shadow: 0 0 10px 1px var(--box-shadow-color);

		svg {
			path:first-child {stroke:white;}
			path:nth-child(2) {fill:white;}
		}
	}


	.title-discript {
		font-size:20px;
		color:#11486d;
	}

}



.top-area-box-wrap {
	display:flex;
	gap:20px;
	padding:var(--box-padding);
	border-radius:var(--box-r);
	background:white;
	box-shadow:var(--box-shadow);

	.top-area-box-title-wrap {width:55%;}
	.btn_wrap.flex-colrum {width:45%;}
 
	.btn_wrap{padding-top:0;gap:10px;}

	.top-area-box-title {
		text-align:left;
		margin-bottom: 8px;

		.img-wrap svg {width:48px; height:48px;}
	}

	

	.title-discript {font-size:15px; text-align:left;}

	.btn {
		padding: 20px;
		border-radius: var(--btn-r);
		background: var(--main-gradient-btn);
        border: 1px solid var(--main-color);
        box-shadow: 0px 0px 6px var(--box-shadow-color);
        box-sizing: border-box;
		gap:10px;
		justify-content: flex-start;

		&:hover {
			
		}

		.img-wrap.box {
			padding:8px;
			background:white;
			border-radius:var(--btn-r);
		}

		
		span {font-size:13px; color: var(--main-color);font-weight:700;filter: brightness(0.8);}
		p {font:var(--type-body-title);}
	}
}

.m-only {display:none;}


.footer {
	background:var(--black60);
	color:white;

	.ft_wrap {
		max-width:var(--max-contain-width);
		margin:0 auto;

		.footer_btns_mo {
			display:flex;
			gap:20px;
			margin-bottom:20px;

			.footer_btns {
				font-size:16px;
				font-weight:800;
			}
		}

		.ft-copy {
			margin-top:20px;
			opacity:0.5;
			font:var(--type-discript);
		}
	}


}






@media (max-width: 767px) {


:root {

	--box-padding:28px;
	--box-shadow:4px 4px 12px #0000002c;

}


.item-list-wrap {
	display: grid;
	gap: 10px;

	&.col-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	&.col-3 {
		grid-template-columns: repeat(2, 1fr);
	}
	&.col-4 {
		grid-template-columns: repeat(2, 1fr);
	}
	&.col-5 {
		grid-template-columns: repeat(2, 1fr);
	}


}

.top-area-box-wrap {
	gap:40px;
	flex-direction:column;
	max-width: 100%;

	.top-area-box-title-wrap {width:100%;}
	.btn_wrap.flex-colrum {width:100%;}
 
	.btn_wrap{padding-top:0;gap:10px;}

	.top-area-box-title {
		text-align:left;
		margin-bottom: 6px;

		.img-wrap svg {width:40px; height:40px;}
	}

}



}






@media (max-width: 479px) {


:root {
	--lmb-width:272px;

	--section-tb:40px;


	--fs-big-title: 32px;
	--fs-middle-title: 28px;
	--fs-semi-title: 24px;
	--fs-sub-title: 18px;
	--fs-body-title: 15px;
	--fs-body: 13px;
	--fs-discript: 11px;


	--box-padding:20px;
	--box-r:20px;
	--box-shadow:4px 4px 12px #0000002c;

	--btn-r:12px;

}

.top-area-wrap {
	margin-bottom:20px;

    .title-discript {
        font-size: 16px;
        color: #11486d;
    }
}


.item-list-wrap {

	&.col-2 {
		grid-template-columns: repeat(1, 1fr);
	}
	&.col-3 {
		grid-template-columns: repeat(1, 1fr);
	}
	&.col-4 {
		grid-template-columns: repeat(1, 1fr);
	}
	&.col-5 {
		grid-template-columns: repeat(1, 1fr);
	}


	.item-box {
		padding:30px 20px;

		.item-box-left {
			display: flex;
			align-items: center;
			gap: 10px;
		}
	}

}


.top-area-box-wrap {
	gap:20px;


	
	.top-area-box-title {
		text-align:center;
		margin-bottom: 5px;

		.img-wrap svg {width:40px; height:40px;}
	}

	
	.title-discript {font-size:13px; text-align:center;}

	.btn {
		padding: 15px;
		gap:10px;

		
		.img-wrap.box {padding:8px;}
		span {font-size:12px;}
	}
}


.m-only {display:block;}


}