#wrap { z-index: 5; }

/* section */
section {padding: 80px 0;}
section >* { z-index: 3; }
section .title_box {margin-bottom: 20px;font-size: 30px;text-align: center;color: var(--primary);text-transform: uppercase;}
section .clip { margin: auto; width: 100%; }
section .clip img {height: auto;}
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }
section .clip video { width: auto; height: 100%; top: 50%; left: 50%; }

/* product_sub_list */
#product_sub_list >div { margin: auto; width: 100%; }
#product_sub_list li { width: 210px; }
#product_sub_list li .clip { height: 210px; -webkit-clip-path: url(#clip_sub_product); clip-path: url(#clip_sub_product); }
#product_sub_list li h3 { font-weight: 300; }

/* product_area */
#product_area{}
#product_area h2.title_box{text-align: left;font-size: 24px;font-weight: 600;}

/* product_list */
#product_list li{padding: 20px 30px;background-color: rgb(252 252 252 / 15%);width: calc(100% - 60px);display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;margin: 2px 0;}
#product_list li >div{width:25%;}
#product_list li .clip{display:flex;align-items: center;margin: 0;}
#product_list li .review, #product_list li .buttons{width: calc(25%/2);text-align: center;}
#product_list li .review a{font-size: 14px;color: var(--white);text-decoration: revert;}
#product_list li .buttons a{font-size: 15px;font-weight: 500;background: var(--primary);color: #231f1f;display: inline-block;padding: 10px 20px;border-radius: 50px;}
#product_list .info{width: 45%;margin-left: 5%;}
#product_list .info h4{font-size: 18px;}
#product_list li .clip .photo{overflow:hidden;width: 25%;margin-right: 5%;border-radius: 5px;}
#product_list li .clip .photo img{background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#product_list li h3 {font-size: 18px;font-weight: 500;}
#product_list li #SeoStarRating font:first-child, #product_list li #SeoStarRating font:last-child{display:none;}
#product_list li #SeoStarRating font{color:gold;}
#product_list li #SeoStarRating font span{margin-right: 2px;font-size: 19px;line-height: 100%;}
#product_list li #SeoStarRating font .star, #SeoStarRating font .star-half-o{color: gold;}
#product_list li #SeoStarRating font .star-o{color: #ccc;}

/* about_area */
#about_area {padding: 0;z-index: 5;}
#about_area .title_box {padding-bottom: 0;text-align: left;margin: 0 0 10px;font-size: 22px;}
#about_area h2 { font-size: 45px; font-style: italic; }
#about_area article {margin-bottom: 30px;line-height: 210%;font-weight: 400;width: 100%;font-size: 16px;text-align: justify;}
#about_area .clip { -webkit-clip-path: url(#clip_about); clip-path: url(#clip_about); }
#about_area .about_sub_1 { width: 350px; top: -10vw; left: -3vw; }
#about_area .about_sub_1 .clip { -webkit-clip-path: url(#clip_about_sub_1); clip-path: url(#clip_about_sub_1); }
#about_area .about_sub_2 { width: 300px; top: -3vw; right: 2vw; }
#about_area .about_sub_2 .clip { -webkit-clip-path: url(#clip_about_sub_2); clip-path: url(#clip_about_sub_2); }
#about_area .about_sub_3 { width: 300px; bottom: -11vw; left: 35vw; }
#about_area .about_sub_3 .clip { -webkit-clip-path: url(#clip_about_sub_3); clip-path: url(#clip_about_sub_3); }

/* custom_area */
#custom_area{padding-bottom:0;}
#custom_area h3.title_box {font-size: 20px;text-align: left;margin: 0 0 30px;}
#custom_area ul{display:flex;flex-wrap: wrap;justify-content: space-between;}
#custom_area ul li{width: calc((100%/4) - 30px);}
#custom_area ul li >div {margin: 0;border: 1px solid #ddd;border-radius: 5px;padding: 35px;}
#custom_area ul li .clip {width: 90px;}
#custom_area ul li h3 {margin: 20px 0 5px;font-size: 17px;text-align: center;}
#custom_area ul li article {font-weight: 300;font-size: 14px;overflow: hidden;height: auto;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}

/* news2_area */
#news2_area h2.title_box {display:flex;align-items: center;justify-content: space-between;margin: 0 15px 40px;}
#news2_area h2.title_box:before{content:'';display: inline-block;width: 35%;height: 1px;background: #ddd;}
#news2_area h2.title_box:after{content:'';display: inline-block;width: 35%;height: 1px;background: #ddd;}
#news2_area ul{display:flex;flex-wrap: wrap;}
#news2_area li{width: calc(100%/4);}
#news2_area li >div{margin: 15px;}
#news2_area li .img_box  {border-radius: 5px;height: 200px;}
#news2_area li .info_box {margin: 15px 0 0;}
#news2_area li .time {font-weight: 400;font-size: 13px;color: #989898;}
#news2_area li .more_btn { margin-left: 10px; padding: 2px 15px; max-width: calc(100% - 105px); height: 22px; font-weight: 100; font-size: 13px; z-index: 6; }
#news2_area li h3 {margin-bottom: 10px;height: 53px;line-height: 150%;font-size: 18px;-webkit-line-clamp: 2;}
#news2_area li article{height: auto;-webkit-line-clamp: 3;font-size: 14px;line-height: 160%;color: #7d7d7d;}

/* news_area */
#news_area{background: #2d2d2d;}
#news_area .title_box{margin-bottom: 50px;}
#news_area li .img_box {border-radius: 5px;height: 190px;}
#news_area li .info_box { margin: 10px 15px 0; }
#news_area li .time { width: 65px; font-weight: 400; font-size: 13px; }
#news_area li .more_btn { margin-left: 10px; padding: 2px 15px; max-width: calc(100% - 105px); height: 22px; font-weight: 100; font-size: 13px; z-index: 6; }
#news_area li h3 {margin-top: 10px;height: auto;line-height: 150%;font-size: 18px;-webkit-line-clamp: 1;text-align: center;color: var(--white);font-weight: 400;}

/* book_area */
#book_area li h3 { margin-top: 10px; height: 30px; font-size: 18px; }

/* photo_area */
#photo_area .item { width: 260px; height: 110px; }
#photo_area .item img { height: 100%; }

/* faq_list */
#faq_list { margin-bottom: 50px; }
#faq_list li {border-bottom: 1px rgba(var(--gray-rgb), .7) dashed;}
#faq_list li .title { padding: 20px 20px 20px 0; }
#faq_list li .title font { vertical-align: top; }
#faq_list li .title .txt {margin-left: 10px;width: calc(100% - 50px);font-size: 18px;color: var(--white);font-weight: 400;}
#faq_list li .title .icon {width: 40px;height: 30px;}
#faq_list li .title .icon:before , #faq_list li .title .icon:after { position: absolute; margin: auto; width: 14px; height: 2px; background: var(--primary); display: block; top: calc((100% - 2px) / 2); left: calc((100% - 14px) / 2); content: ""; }
#faq_list li .info {padding: 30px 50px;font-size: 15px;color: var(--white);background: rgb(255 255 255 / 25%);}

@media screen and (max-width: 1440px){
	#about_area .about_sub_1 , #about_area .about_sub_2 , #about_area .about_sub_3 { width: 20vw; }
}
@media screen and (max-width: 1024px){
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
	#news2_area li{width: 50%;}
	#product_list li .clip{width:100%;}
	#product_list li .clip .photo{width: 60px;margin-right: 20px;}
	#product_list li .review, #product_list li .buttons{width: calc(40%/2);}
	#product_list .info{width: 60%;margin-left: 0;}
	#product_list li .buttons a{display:block;text-align: center;padding: 10px 0;}
}
@media screen and (max-width: 980px){
	#news2_area h2.title_box:before, #news2_area h2.title_box:after{width: 20%;}
	#custom_area ul li{width: calc((100%/2) - 15px);margin: 15px 0;}
	section {padding: 50px 0;}
	#about_area #about_info { margin-bottom: 8vw; }
	#about_area .about_sub_2 { top: auto; bottom: 35vw; width: 35vw; }
	#about_area .about_sub_3 { width: 29vw; left: 10vw; }
}
@media screen and (max-width: 760px){
	#product_sub_list >div { margin: 10px auto 50px; }
	#product_sub_list li { width: 150px; }
	#product_sub_list li .clip { height: 150px; }
	#product_list li .info_box { width: 45vw; height: 30vw; }
}
@media screen and (max-width: 550px){
	#news2_area li{width: 100%;}
	#news2_area h2.title_box:before, #news2_area h2.title_box:after{width: 5%;}
	#custom_area ul li{width: 100%;margin: 15px 0;}
	#product_list li .review, #product_list li .buttons{width: 50%;text-align: left;}
	#product_list .info{width:100%;margin: 5px 0;}
	#product_list li{padding:15px;width: calc(100% - 32px);}
	#product_sub_list li { margin: 10px; width: 35vw; }
	#product_sub_list li .clip { height: 35vw; }
	#product_list { width: 90vw; }
	#product_list li .info_box { width: 55vw; height: 40vw; }
	#about_area #about_img { width: 80vw; }
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area li .row { margin: auto; width: 280px; }
}
@media screen and (max-width: 480px){
	#book_area li .row { margin: auto; width: 250px; }
}