/* section */
section {padding: 70px 0;}
section.section_pad {}
section >* { z-index: 3; }
section .title_box { margin-bottom: 40px; }
section .title_box .area_title {font-weight: 500;font-size: 35px;line-height: 120%;color: #2d2d2d;letter-spacing: 5px;}
section .title_box .sub_title {font-weight: 300;font-size: 23px;font-family: 'Fahkwang', sans-serif;color: var(--primary);}

/* bg_box */
.bg_box { width: 100%; height: 100%; background: no-repeat 50% / cover; background-attachment: fixed; opacity: .3; top: 0; left: 0; }

/* about_area */
#about_area{border-bottom: 1px solid #eee;}
#about_area:after{content:'';height: 100%;width: 1px;position: absolute;top: 0;left: 7%;background: #eee;}
#about_area .img_scale{display:flex;flex-wrap: wrap;justify-content: space-between;}
#about_area .img_scale img{width: 48%;-webkit-transform: scale(1);}
#about_area .info_box article {margin-bottom: 30px;width: 100%;line-height: 210%;letter-spacing: 1.5px;font-weight: 300;text-align: justify;}
#about_area .info_box a{z-index: 9;}

/* product_area */
#product_area{padding-bottom:0;}
#product_area:after{content:'';position: absolute;right: -50px;top: -40px;width: 350px;height: 80px;background: #eee;transform: skewX(-30deg);z-index: 4;}
#product_list{display:flex;flex-wrap: wrap;}
#product_list li{width: calc(100%/5);}
#product_list li img{width:100%;-webkit-filter: saturate(0.25);}
#product_list li:hover img{-webkit-filter: saturate(1);}
#product_list li .info_box{bottom: 30px;width: calc(100% - 60px);left: 30px;height: calc(100% - 60px);background: none;border: 1px solid rgb(238 238 238 / 40%);display: flex;justify-content: center;align-items: center;}
#product_list li:hover .info_box{border:1px solid #fff;}
#product_list li .info_box h3{height:auto;color: var(--white);font-size: 18px;letter-spacing: 2px;font-weight: 400;background: var(--triadic1);padding: 5px 20px;}
#product_list li:hover .info_box h3{background: rgb(0 0 0 / 75%);}

/* news_area */
#news_area .n_bg_box{width: 72%;height: 50%;left: 5%;bottom: 0;-webkit-filter: grayscale(1);background-repeat: no-repeat;background-position: 50% 70%;background-size: cover;opacity: .05;-moz-transform: scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);
transform:scaleX(-1);}
#news_area:after{content:'';width: 1px;height: 100%;position: absolute;top: 0;left: 5%;background: #eee;}
#news_area:before{content:'';width: 1px;height: 100%;position: absolute;top: 0;right: 5%;background: #eee;}
#news_area .workframe{display:flex;justify-content: space-between;flex-wrap: wrap;width: var(--width-lg);}
#news_area .title_box{width:20%;margin: 0;}
#news_area .list_box {width: 75%;}
#news_area .list_box li{border-top: 1px solid #e4e4e4;position: relative;}
#news_area .list_box li:first-child{border:0;}
#news_area .list_box li:after{content:'';position: absolute;left: 0;top: 0;z-index: -1;width: 0;height: 100%;background: #eee;opacity: .35;}
#news_area .list_box li:hover:after{width:100%;}
#news_area .list_box .info_box {padding: 30px 0;display: flex;flex-direction: column;justify-content: center;}
#news_area .list_box .info_box svg{position:absolute;right: 0;}
#news_area .list_box .info_box p a { margin-right: 10px; max-width: calc(100% - 100px); font-weight: 400; z-index: 2; }
#news_area .list_box .info_box p .time {font-weight: 500;font-family: 'Fahkwang', sans-serif;font-size: 14px;color: #555;}
#news_area .list_box .info_box h3 {height: auto;font-size: 18px;color: var(--black);font-weight: 400;}

/* book_area */
#book_area .list_box img { height: 450px; }
#book_area .list_box .img_box { border: var(--white) solid; border-width: 0 1px 1px 0; }
#book_area .list_box .img_box:before , #book_area .list_box .img_box:after { position: absolute; width: 100%; height: 100%; background: var(--white); z-index: 9; opacity: .4; content: ""; }
#book_area .list_box .img_box:after { right: 0; bottom: 0; }
#book_area .list_box .atag_item { z-index: 10; }
#book_area .list_box .badge { margin: auto; padding: 10px 20px; max-width: calc(80% - 40px); height: 34px; line-height: 36px; font-size: 20px; }

/* youtube_box */
#youtube_box { min-height: 1px; padding-bottom: 30%; }
#youtube_box a { position: absolute; background: var(--white); display: flex; top: 50%; left: 50%; z-index: 99; }
#youtube_box a i { margin: auto; font-size: 30px; color: var(--primary); }
#youtube_box iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; }

/* custom_area */
#custom_area { margin: 0; padding: 5vw 0 3vw; }
#custom_area:before { position: absolute; width: 100%; height: 75%; background: rgba(var(--primary-rgb), .1); display: block; bottom: 0; left: 0; opacity: .3; content: ""; }
#custom_box { padding: 8vw 0 5vw; }
#custom_box li .row { margin: 30px 20px; padding: 30px; border-bottom: 2px var(--primary) solid; }
#custom_box li .row h2 { font-size: 20px; }
#custom_box li .row article { margin-top: 30px; line-height: 200%; }

@-webkit-keyframes spineer { 0% { -webkit-box-shadow: 0 0 0 0 var(--info); } 70% { -webkit-box-shadow: 0 0 0 20px transparent; } 100%{ -webkit-box-shadow: 0 0 0 0 transparent; } }
@keyframes spineer { 0% { box-shadow: 0 0 0 0 var(--info); } 70% { box-shadow: 0 0 0 20px transparent; } 100%{ box-shadow: 0 0 0 0 transparent; } }

@media screen and (min-width: 1281px){
	#book_area .list_box li:hover .badge { background: var(--primary); color: var(--white); }
	#custom_box li:hover .row { box-shadow: 0 4px 17px 0 rgba(var(--black-rgb), .2); }
}
@media screen and (max-width: 1440px){
	#about_area:after{left:2.5%;}
	#about_area:before{font-size: 110px;bottom: 96px;}
}
@media screen and (max-width: 1024px){
	#news_area .title_box, #news_area .list_box{width:100%;}
	#news_area .workframe{width: 70%;flex-direction: column;}
	#product_list li{width: calc(100%/3);}
	#product_list li:nth-child(4), #product_list li:nth-child(5){width:50%;}
	#product_list li:nth-child(4) img, #product_list li:nth-child(5) img{height: 350px;}
	#about_area:after{display:none;}
	#about_area .info_box{margin-top:20px;}
	#about_area:before{bottom: 41%;left: unset;right: 0;}
}
@media screen and (max-width: 768px){
	#about_area:before{bottom: 50%;}
	#news_area .list_box .info_box { padding: 15px 0; }
	#youtube_box { padding-bottom: 60vw; }
	#custom_box li .row { margin: 10px 15px; padding: 10px 0; }
}
@media screen and (max-width: 640px){
	#about_area .img_scale img{width:100%;}
	#about_area .img_scale img:first-child{display:none;}
	#news_area .list_box .info_box h3{font-size: 17px;width: 85%;}
	section .title_box .area_title{font-size: 30px;}
	#product_list li{width: 100% !important;margin: 5px 0;}
	#product_list li img, #product_list li:nth-child(4) img, #product_list li:nth-child(5) img{height: 250px;}
	section{padding: 40px 0;}
	#about_area:before{display:none;}
	#book_area .list_box img { height: 65vw; }
	#product_area:after{height: 20px;top: -10px;width: 90%;}
}
@media screen and (max-width: 450px){
	#product_area .bgBox { width: 100%; object-fit: cover; }
}