/* section */
section { padding: 5vw 0; }
section >* { z-index: 3; }
section .title_box {margin-bottom: 10px;}
section .title_box font {text-transform: uppercase;line-height: 100%;letter-spacing: 8px;font-weight: bold;font-size: 100px;color: #292929;font-family: 'Roboto', sans-serif;}
section .title_box font:last-child {margin-left: 15px;}
section .title_box .page_title {font-size: 23px;margin-top: -60px;color: #fff;letter-spacing: 2px;font-weight: bold;display: inline-block;background: #000;padding: 0 20px;}
section.bg_box { background: no-repeat 50% / cover; background-attachment: fixed; }

/* about_area */
#about_area, #product_area{border: 30px solid #292929;}
#about_area .img_item {order: 1;height: 100%;}
#about_area .img_item img {width: 100%;height: 100%;}
#about_area .img_item a { padding: 20px 35px; letter-spacing: 5px; text-transform: uppercase; font-size: 13px; right: 30px; bottom: -30px; z-index: 3; }
#about_area .info_item article {margin-bottom: 20px;width: 90%;line-height: 200%;letter-spacing: 2px;font-weight: 100;font-size: 15px;color: #fff;text-align: justify;}
#about_area .info_item a.more_btn{padding: 10px 30px;margin-top: 20px;background: #84bb0d;}

/* list_box */
.list_box .info_box h3 {height: 30px;font-weight: 400;font-size: 16px;color: #fff;}

/* news_area */
#news_area .title_box{text-align:center;margin-bottom: 30px;}
#news_area .title_box p{text-align:center;}
#news_area .title_box font{color: #fff;}
#news_area .title_box .page_title{background: #292929;padding: 0 30px;margin: 0;}
#news_area .list_box .row { padding-bottom: 30px; }
#news_area .list_box .row img { height: 320px; }
#news_area .list_box .row .info_box { padding: 15px; width: calc(100% - 70px); box-shadow: 0 0 10px rgba(var(--black-rgb), .3); left: 20px; bottom: 0; }
#news_area .list_box .row .info_box p * {font-weight: 100;font-size: 14px;color: #fff;}
#news_area .list_box .row .info_box p a {margin-right: 10px;padding: 0 2px;max-width: calc(100% - 82px);height: 23px;z-index: 2;color: #fff;}

/* product_area */
#product_area .workframe{ width: var(--width-xxl);}
#product_area .title_box, #product_area .title_box p{text-align:center;}
#product_area .title_box .page_title{background:none;}
#product_area img.img_cover {background: none;border: 3px solid #fff;border-radius: 50%;height: calc(100% - 6px);width: calc(100% - 6px);}
#product_area .list_box ul li:hover img.img_cover{border: 3px solid rgb(0 0 0 / 0%);}
#product_area .row .info_box >div {margin: auto;padding: 35px;}
#product_area .row .info_box >div p{width:50px;margin:0 auto;}
#product_area .row .info_box >div p img{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
#product_area .row .info_box h3 {margin: 10px 0;color: #fff;text-align: center;}
#product_area .row .info_box .line {width: 50px;height: 3px;background: #fff;margin: 0 auto 10px;}
#product_area .row .img_box b {font-weight: 300;font-size: 14px;overflow: hidden;height: 155px;display: block;color: #fff;text-align: justify;line-height: 190%;}
#product_area .row .img_box p{display: block;padding: 50px;position: absolute;top: 0;left: 0;height: calc(100% - 100px);background: rgb(0 0 0 / 50%);border-radius: 50%;}
#product_area .row .info_box .price { margin-top: 15px; min-height: 30px; }
#product_area .row .info_box .price font { margin-left: 20px; font-weight: 300; }
#product_area .list_box ul{text-align:center;}
#product_area .list_box ul li{display:inline-block;width:calc((100%/5) - 5px);}
#product_area .list_box ul li .row{margin: 15px;}
#product_area .row:hover .img_box { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1);}
#product_area .row:hover .info_box { transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0);}

/* book_area */
#book_area .row img { height: 400px; }
#book_area .row .info_box { padding: 100px 15px 60px; width: calc(100% - 30px); background: -webkit-linear-gradient(top,transparent 0,rgba(var(--black-rgb), .01) 2%, rgba(var(--black-rgb), .8) 90%); background: linear-gradient(to bottom,transparent 0,rgba(var(--black-rgb), .01) 2%, rgba(var(--black-rgb), .8) 90%); bottom: -20px; left: 0; }

@media screen and (min-width: 1281px){
	#about_area .d_flex { align-items: center; }
	#news_area .list_box .row:hover .info_box { bottom: 30px; }
	#product_area .row:hover .info_box .line { width: 100%; }
	#book_area .row:hover .info_box { bottom: 0; }
}
@media screen and (max-width: 1440px){
    #product_area .workframe{width:95%;}
    #product_area .row .img_box b{height: 130px;}
    #product_area .row .info_box h3{    font-size: 15px;}
}
@media screen and (max-width: 1280px){
	#product_area .list_box ul li{ width: calc((100%/3) - 5px);}
	section .title_box font{font-size: 80px;}
	#about_area .img_item:before , #about_area .img_item img { width: 100%; }
	#about_area .img_item img { height: 100%; }
	#product_area .row .img_box p {height: calc(100% - 200px);padding: 100px;}
	#about_area, #product_area {padding-bottom:100px}

}
@media screen and (max-width: 1024px){
	#product_area .list_box ul li{ width: calc(50% - 5px);}
	#product_area .row .img_box p {height: calc(100% - 100px);padding: 50px;}
	#about_area .img_item {width: 100%;margin: 0 0 0 auto;order: inherit;}
	#about_area .img_item:before { border: 0; background: rgba(var(--secondary-rgb), .6); top: 0; right: 0; z-index: 2; }
	#about_area .info_item { margin-top: -80px; z-index: 4; }
}
@media screen and (max-width: 768px){
	#about_area .info_item article{width:100%;}
	#about_area .img_item { width: 80vw; height: 50vw; }
	#product_area .list_box {}
	#product_area .row .info_box >div { width: calc(100% - 60px); }
	#product_area .row .info_box article { height: 50px; -webkit-line-clamp: 2; }
	#book_area .row img { height: 350px; }
}
@media screen and (max-width: 640px){
	#about_area .img_item { width: 100%; height: 60vw; }
	#about_area .img_item:before { background: rgba(var(--secondary-rgb), 0); }
	#about_area .info_item {display: block;width: 100%;margin: 40px 0 0;}
}
@media screen and (max-width: 500px){
	#product_area .list_box ul li{ width: calc(100% - 5px);}
	section .title_box font{font-size: 45px;letter-spacing: 0;}
	section .title_box .page_title{margin-top: 0;padding: 0;background: none;font-size: 20px;}
	#product_area .list_box { width: 100%; }
    #about_area, #product_area{border: 10px solid #eee;}
    #product_area .list_box ul{width:80%;margin:0 auto;}
}