:root { 
	--main-color: #108a43;
	--sub-color: #f0595c;
	--table-line:#bfbfbf;
	--lightgray:#777777;
	--lightgray2:#ababab;
}

/* common */
.sub{position:relative; top:100px; padding-bottom:100px;}
.sect-wrap{max-width:1280px; margin:0 auto; padding:0 15px; position:relative;}
.sub .sect1{margin-top:120px;}
.sub .last-article{margin-bottom:200px;}
.pro .sect-wrap{max-width:1380px;padding:0 10px;}

.sub_tit{font-size:3.8rem;color:#222;font-weight:600;margin-bottom:30px;}
.top_txt{text-align:center;margin-bottom:90px;}
.top_txt h1{font-size:4.8rem;color:#000;font-weight:bold;letter-spacing:-0.2px;}
.top_txt p{font-size:2.4rem;color:var(--main-color);line-height:36px;margin-top:20px;letter-spacing:-0.2px;}
.top_txt p.top_des{font-size:2rem;color:#333;line-height:38px;letter-spacing:-0.2px;margin-top:30px;}

.sub_txtBox{text-align:center;width:100%;}
.sub_txtBox h1{font-size:5rem;font-weight:600;margin-bottom:80px;color:#333;}

/* ----- sub_vis ----- */
.sub-visual{overflow:hidden;position:relative;max-width:1735px;width:100%;height:468px;margin:auto;border-radius:15px;}
.sub-visual_img{width:100%;height:468px;background-repeat: no-repeat; background-position: center; background-size: cover;}
.skin .sub-visual_img{background-image:url('../images/skin_bg.png');}
.makeup .sub-visual_img{background-image:url('../images/makeup_bg.png');}
.hair .sub-visual_img{background-image:url('../images/hair_bg.png');}
.body .sub-visual_img{background-image:url('../images/body_bg.png');}

/* category */
.category-btn-wrapper > ul{display:flex;justify-content:center;align-items:center;gap:25px;margin:0 auto 70px;}
.category-btn-wrapper > ul > li{transition:0.3s;position:relative;}
.category-btn-wrapper > ul > li::after{content:'';width:1px;height:12px;background:#666;position:absolute;top:10px;right:-13px;}
.category-btn-wrapper > ul > li > a{width:100%;display:block;transition:0.3s;color:#666;font-size:1.4rem;line-height:32px;font-family:'Roboto';}
.category-btn-wrapper > ul > li:last-child::after{display:none;}
.category-btn-wrapper > ul > li:hover > a, .category-btn-wrapper > ul > li.on > a{
	color:var(--main-color);
	text-shadow:
    0 .3px 0 rgba(16,138,67,.45),
    .3px 0 0 rgba(16,138,67,.45),
    0 -.3px 0 rgba(16,138,67,.45),
    -.3px 0 0 rgba(16,138,67,.45);
  transition: color .2s ease, text-shadow .2s ease;
}


/* responsive */
@media screen and (max-width:1750px) { 
	.sub-visual_bg{padding:0 3rem;}
	.sub-visual_img{border-radius:15px;}
}
@media screen and (max-width:1320px) { 
	.sub-visual_bg{padding:0 1.5rem;}
	.sub_txtBox h1{font-size:5.5rem;}
}
@media screen and (max-width:980px) { 
	.category-btn-wrapper > ul{gap:0 25px;flex-wrap:wrap;}
}
@media screen and (max-width:820px) { 
	.sub_txtBox h1{font-size:4.8rem;margin-bottom:20px;}
	.sub-visual{height:300px;}
	.sub-visual_img{height:300px;}
}
@media screen and (max-width:768px) { 
}
@media screen and (max-width:660px) { 
	.sub_txtBox h1{font-size:4rem;}
	.category-btn-wrapper > ul{gap:0 15px;padding:0 3px;margin:0 auto 50px;}
	.category-btn-wrapper > ul > li > a{font-size:1.3rem;line-height:26px;}
	.category-btn-wrapper > ul > li::after{height:10px;top:9px;right:-8px;}
}
@media screen and (max-width:500px) { 
	.sub_txtBox h1{font-size:3.5rem;}
	.sub-visual{height:220px;}
	.sub-visual_img{height:220px;}
	.top_txt{margin-bottom:50px;}
}
@media screen and (max-width:450px) { 
}
@media screen and (max-width:390px) { 
}