@import url('https://fonts.googleapis.com/css2?family=Bona+Nova+SC:ital,wght@0,400;0,700;1,400&display=swap');


:root {
	--main_c: #1e3135;
    --main_c2: #f8f4eb;
}




body {height:100%;}
html {height:100%;}

.eng {font-family:' '}

#wrap { position:relative; width:100%; display:inline-block}

.in {width:100%; margin:0 auto; max-width:1200px; }
.flex {display:flex; }
.flex.gap10 {gap:10px}
.flex.gap20 {gap:20px}
.flex.gap30 {gap:30px}
.ac {align-items:center !important; }
.as {align-items:flex-start !important; }
.ad {align-items:flex-end !important; }
.jt {justify-content:flex-start !important; }
.jc {justify-content:center !important; }
.js {justify-content:space-between !important; }
.t_color {color:var(--main_c) !important; }

.basic_btn {border:1px solid #333; padding:10px 50px; display:inline-block}
.basic_btn.w_type {border:1px solid #fff; color:#fff}
 
.box_100 { width: 100%; display:inline-block}



#container {  width:100%; display:inline-block;  overflow-x:hidden}

@media screen and (max-width:1200px){
  .in {box-sizing:border-box; padding:0 5%}
}

 

@media screen and (max-width: 900px){

		.flex {flex-wrap:wrap}
		.m_flex {flex-wrap:nowrap; width:100%}
		.s_t {font-size:.93em}
		.m_100 {width:100%}

		.basic_btn {  padding:10px 0; width:47%; max-width:170px;  text-align:center }

}


.g_bg {background-color:#f5f5f5; padding:100px 0}

.s_t {color:#333; font-size:.93em}


.tab {display:flex; width:100%; position:relative; margin-bottom:20px;   background-color:#eee;   }
.tab:after {content:''; width:100%; height:1px; background-color:var(--main_c); position:absolute; bottom:0px; left:0}
.tab li {width:50%; font-size:1.1em; text-align:center; line-height:35px; padding:5px 20px; position:relative; z-index:99; cursor:pointer}
.tab li a {width:100%; display:inline-block}
.tab li.on {background-color:var(--main_c); font-weight:400; color:#fff}
.tab li a {color:#222}
.tab li.on a {color:#fff}


.tab2 {display:flex; gap:5px;  width:100%; position:relative;   flex-wrap:wrap}
.tab2 li { font-size:1em; text-align:center; border:1px solid #333; position:relative; z-index:99; box-sizing:border-box;}
.tab2 li a {display:inline-block; padding:7px 30px; box-sizing:border-box;}
.tab2 li.on {background-color:#333; font-weight:400;}
.tab2 li a {color:#333}
.tab2 li.on a {color:#fff}


@media screen and (max-width:900px){
 	.tab2  {margin-bottom:10px}
	.tab2 li { font-size:.96em;  }
	.tab2 li a {padding:6px 15px;}


}


.shop .tab {margin-bottom:40px}

a.s_btn {display:inline-block; box-sizing:border-box; border:1px solid var(--main_c); color:var(--main_c);   text-align:center; width:70px; font-size:.95em;  line-height:34px; background-color:#fff }
a.s_btn i {margin-right:3px}
a.s_btn2 {display:inline-block; box-sizing:border-box;  border:1px solid #111; color:#111;   text-align:center; padding:0 15px; font-size:.95em;  line-height:34px; }
 


table.basic {width:100%}
table.basic th {border:1px solid #ddd; padding:10px; font-weight:500; background-color:#333; color:#fff}
table.basic td {border:1px solid #ddd; padding:10px; text-align:center}
table.basic td a:hover {text-decoration:underline}

 
ul.basic {width:100%;}
ul.basic > li {display:flex; margin-bottom:3px; }
ul.basic > li:before {content:'·'; flex-shrink:0;  margin-right:10px; box-sizing:border-box; border-radius:50%; }

 
.bg_box {background-color:#f9f9f9; box-sizing:border-box; padding:15px}
.bg_box2 {background-color:#f2f2f2; box-sizing:border-box; padding:17px}

  
.main_product:nth-child(even) {
    background: #f9f9f9;
    padding: 100px 0;
    box-sizing: border-box;
}
ul.product {gap:1%; }
ul.product * {transition: all 0.3s ease-out; }
ul.product li {width:33.3333%; text-align:center;  }
ul.product li .photo {width:100%; overflow:hidden; padding-bottom:70%; margin-bottom:20px;  position:relative; cursor:pointer;  }
ul.product li .photo img {  width:100%; position:absolute; left:50%; bottom:0; transform: translate(-50%, 0); }
ul.product li .photo:hover img { width:110%;} 
ul.product li div {margin-top:10px; color:#555; font-weight:300; font-size:1em}
ul.product li a h5 {font-size:1.2em; font-weight:600; color:#333}
ul.product li p {margin-top:10px; color:#111; font-weight:500; font-size:1.1em}
ul.product li p span {font-size:15px; color:#555; font-weight:200; text-decoration: line-through;}
		ul.product li span.del {position:absolute; font-size:16px; left:20px; top:20px; font-weight:200; width:60px; height:60px;  display:flex; align-items:center;   justify-content:center;
		border-radius:50%;
		background-color:var(--main_c);; 		 
		color:#fff;
		
}
ul.product li label {position:absolute; font-size:13px; left:20px; top:20px; font-weight:200; width:50px; height:50px;  display:flex; align-items:center;   justify-content:center; 		border-radius:50%;
		background: rgba(0, 0, 0, .1);
		backdrop-filter: blur(20px);
		color:#fff; 
}
ul.product li label  + label {left:90px} 
ul.product li label.soldout{background:rgb(255 54 54 / 71%);}



@media screen and (max-width:900px){
	ul.product {gap:30px 0; justify-content:space-between  }
	ul.product li {width:48%;  }
	ul.product li a h5 {font-size:1.1em;  3}
    ul.product li label {width:40px; height:40px; font-size:10px; left:10px; top:10px; backdrop-filter: blur(10px);}
    ul.product li span.del {width:53px; height:53px; font-size:15px}

}



footer {padding:70px 0; color:#333; background:#efeee8; margin-top:100px;  line-height:1.45; font-size:.93em; font-weight:300 }
footer > div > div {display:flex; flex-direction:column; gap:5px}
footer ul {margin-top:20px; gap:10px}
footer h4 {font-size:1.2em; font-weight:600; color:#000 }
footer h5 {font-size:1.1em;  font-weight:600; color:#000 }

@media screen and (max-width:900px){

	footer {padding:30px 0;    }
	footer > div > div {width:100%;   margin-top:20px }

}