/* BASIC css start */
:root {
    --cw-point-color1:#874e37;
    --cw-point-color2:#deae23;
    --cw-point-color3:#3e7443;
}

#container {background:#f9f5f2; padding-bottom:90px;}
section {max-width:1100px; margin:0 auto;}


.hero .pc {display:block;}
.hero .mo {display:none;}

.feature {background:#fff; padding: 30px;}
.feature .inner {display:flex; border-radius: 10px; margin-bottom:30px; overflow:hidden;}

.feature .inner .thumb {flex:1 1 40%;}
.feature .inner .thumb img {width:100%;}
.feature .inner .desc {flex:1 1 30%; margin:30px 0 30px 20px;}
.feature .inner .desc .tag {display:inline-block; border:1px solid; padding: 1px 10px; border-radius: 50px; font-size: 13px; margin-bottom:5px;}
.feature .inner .desc .name {font-size: 30px; font-weight: 700;}
.feature .inner .desc .content01 {margin:10px 0;}
.feature .inner .desc .content02 {font-size: 14px; color: #888;}
.feature .inner .desc .spec {margin-top:20px; padding-top:20px; border-top: 1px solid #bdbdbd;}
.feature .inner .desc .spec ul {display:flex; height: 25px; gap:10px; margin-bottom:10px;}
.feature .inner .desc .spec ul img {height:80%;}
.feature .inner .desc .spec ul li:nth-child(1) {max-width:10%;}
.feature .inner .target {flex:1 1 30%;  margin:30px 20px; padding:20px; border-radius: 10px;}
.feature .inner .target .title {display: inline-block; color: #fff; padding: 3px 12px; border-radius: 50px; font-size: 13px;}
.feature .inner .target .prd_name {font-weight: 500; margin: 12px 0;}
.feature .inner .target .prd_wrap {display:grid; gap:10px;}
.feature .inner .target .prd_wrap .prd_thumb {background: #fff; border-radius: 5px; overflow: hidden;}
.feature .inner .target .prd_wrap .prd_thumb .name {text-align: center; font-size: 14px; padding: 5px 0;}
.feature .inner .target .prd_wrap .prd_thumb img {width:100%;}

.CTA {text-align: center;}
.CTA a { display: inline-block; background: #333; color: #fff; padding: 10px 25px; font-size: 25px; margin-top: 50px;}


.feature .sauce01 {background-color: #874e3712;}
.feature .sauce01 .target {background: #874e3721;}
.feature .sauce01 .target .title {background: var(--cw-point-color1);}
.feature .sauce01 .desc .tag { border-color:var(--cw-point-color1); color:var(--cw-point-color1); }
.feature .sauce01 .target .prd_name {color:var(--cw-point-color1);}
.feature .sauce01 .target .prd_wrap {grid-template-columns: repeat(2, 1fr);}
.feature .sauce01 .target .prd_wrap .prd_thumb .name {color: var(--cw-point-color1);}
.feature .sauce01 .desc .spec ul li:nth-child(2) {color:var(--cw-point-color1);}

.feature .inner.sauce02 {background-color: #deae2326;}
.feature .sauce02 .target {background: #deae2321;}
.feature .sauce02 .target .title {background: var(--cw-point-color2);}
.feature .sauce02 .desc .tag { border-color:var(--cw-point-color2); color:var(--cw-point-color2); }
.feature .sauce02 .target .prd_name {color:var(--cw-point-color2);}
.feature .sauce02 .target .prd_wrap {grid-template-columns: repeat(3, 1fr);}
.feature .sauce02 .target .prd_wrap .prd_thumb .name {color: var(--cw-point-color2);}
.feature .sauce02 .desc .spec ul li:nth-child(2) {color:var(--cw-point-color2);}

.feature .inner.sauce03 {background-color: #3e744321;}
.feature .sauce03 .target {background: #3e744321;}
.feature .sauce03 .target .title {background: var(--cw-point-color3);}
.feature .sauce03 .desc .tag { border-color:var(--cw-point-color3); color:var(--cw-point-color3); }
.feature .sauce03 .target .prd_name {color:var(--cw-point-color3);}
.feature .sauce03 .target .prd_wrap {grid-template-columns: repeat(3, 1fr);}
.feature .sauce03 .target .prd_wrap .prd_thumb .name {color: var(--cw-point-color3);}
.feature .sauce03 .desc .spec ul li:nth-child(2) {color:var(--cw-point-color3);}


@media (max-width: 767.98px) {
.hero .pc {display:none;}
.hero .mo {display:block; width:100%;}
.feature .inner {display:block; padding-bottom:20px;}
.feature .inner .desc {margin:40px 25px;}

}
/* BASIC css end */

