/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box { margin-bottom: 40px; }
section .title_box .area_title {font-size: 30px;display: flex;align-items: center;font-weight: 500;}
section .title_box .area_title:before{content:'';display: inline-block;width: 30px;height: 2px;background: var(--secondary);margin-right: 20px;}
section .title_box .area_title:after{content:'';display: inline-block;width: 30px;height: 2px;background: var(--secondary);margin-left: 20px;}
section .title_box .sub_title {font-size: 20px;font-family: 'Open Sans', sans-serif;color: var(--info);text-transform: uppercase;font-weight: 600;}

/* bg_box */
.bg_box { width: 100%; height: 100%; background: no-repeat 50% / cover; background-attachment: fixed; opacity: .3; top: 0; left: 0; }
.bg_box:before {width: 100%;height: 100%;display: block;background: rgba(var(--white-rgb), .75);content: "";}

/* about_area */
#about_area{background-image: url(/images/40/about-bg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#about_area:after{content:'';background: linear-gradient(300deg,var(--primary) -20%, #00551a 110%);height: 100%;width: 473px;position: absolute;left: 225px;top: 0;transform: skewX(35deg);}
#about_area >div{display:flex;flex-wrap: wrap;}
#about_area .info_box article {margin-bottom: 30px;width: 90%;line-height: 210%;letter-spacing: 1.5px;font-weight: 300;text-align: justify;font-size: 21px;}
#photo_list, #photo_list .img_scale, #photo_list .img_scale img{height:100%;}

/* product_area */
#product_area{z-index:1;}
#product_area:after{content:'';right: -80px;top: 0;position: absolute;width: 250px;height: 100%;background: linear-gradient(-180deg,var(--white) 15%, #61b213 100%);z-index: 2;transform-origin: bottom;transform: skewX(-5deg);}
#product_area:before{content:'';left: -80px;top: 0;position: absolute;width: 210px;height: 100%;background: linear-gradient(180deg,#61b213 0%, var(--white) 85%);z-index: 2;transform-origin: bottom;transform: skewX(-5deg);}
#product_area .bg_box{opacity: 0;display: none;}
#product_area .title_box .area_title{justify-content: center;}
#product_area ul{display:flex;flex-wrap: wrap;justify-content: center;}
#product_area ul:hover li{opacity:.5}
#product_area ul:hover li:hover{opacity:1}
#product_area li{width: calc(100%/4);overflow: hidden;}
#product_area li >div{margin: 0 15px;overflow: hidden;}
#product_area li .photo{position: relative;}
#product_area li .photo:before{content:'';position: absolute;width: 50px;height: 100%;background: #fff;transform: skewX(-5deg);left: -30px;bottom: 0;}
#product_area li .photo:after{content:'';position: absolute;width: 50px;height: 100%;background: #fff;transform: skewX(-5deg);right: -30px;bottom: 0;}
#product_area .info_box{padding: 5px 10px;position: absolute;bottom: 30px;background: var(--white);width: calc(100% - 20px);/* transform: skewX(5deg); */left: -5px;}
#product_area .info_box h3{text-align:center;height: auto;font-weight: 500;font-size: 23px;letter-spacing: 5px;}
#product_area li:nth-child(3) .info_box h3{margin-left: -20px;}

/* news_area */
#news_area{background-image: url(/images/40/new-bg.jpg);background-repeat: no-repeat;background-position: 0% 0%;background-size: 60%;z-index: 2;}
#news_area .bg_box{background: linear-gradient(155deg,var(--primary) -20%, #00551a 80%);opacity: 1;width: 50%;height: 110%;right: -10%;top: -5%;left: unset;transform: skewX(-20deg);}
#news_area .workframe{display:flex;flex-wrap: wrap;justify-content: space-between;width: var(--width-xl);align-items: center;}
#news_area .title_box{order:2;margin: 0;width: 350px;}
#news_area .title_box *{color:var(--white)}
#news_area .title_box .more_btn{background:var(--white);color: var(--info);}
#news_area .title_box .more_btn:before{background: #e6e6e6;}
#news_area .title_box .area_title:before{background:var(--white)}
#news_area .title_box .area_title{margin-bottom: 60px;}
#news_area .list_box{width: calc(100% - 670px);}
#news_area ul li {position: relative;}
#news_area ul li:last-child:after{display:none;}
#news_area ul li:after {content:'';width: 100%;height: 5px;display: block;margin: 30px 0;background: linear-gradient(to right, #dadada, #dadada 2px, transparent 2px, transparent 4px);background-repeat: repeat-x;background-size: 4px 1px;background-position: 50% 50%;border-right: 1px solid #dadada;border-left: 1px solid #dadada;}
#news_area ul li a{display:block;white-space: unset;}
#news_area ul li a .top_news_list_head { font-size: 12px; color: #9B9B9B;}
#news_area ul li .top_news_list_head span {display: inline-block;font-weight: 500;font-size: 17px;letter-spacing: 2px;}
#news_area ul li .top_news_list_head span:nth-child(1) {width: 110px;margin-right: 20px;position: relative;font-family: 'Lato', sans-serif;letter-spacing: 0;}
#news_area ul li .top_news_list_head span:nth-child(1):after {content: "";background: #DCDDE3;width: 1px;height: 11px;position: absolute;right: 0px;top: calc(50% - 4px);display: block;}
#news_area ul li .top_news_list_title {margin-top: 12px;padding-right: 55px;position: relative;font-weight: 500;font-size: 22px;color: #000;overflow: hidden;height: 36px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
#news_area ul li .top_news_list .news_list_btn { top: 14px;}
#news_area ul li .news_list_btn {height: 0px;width: 0px;position: absolute;top: 50%;right: 20px;transform: translate(50%,-50%);border: 4px solid #41A317;border-radius: 50px;transition: all .3s;}
#news_area ul li .news_list_btn:after { content: ""; background: url(/images/40/news_arrow.svg) no-repeat center / contain; width: 10px; height: 7px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0); transition: all .4s;}
#news_area ul li:hover .news_list_btn:after { transform: translate(-50%,-50%) scale(1);}
#news_area ul li:hover .news_list_btn { height: 37px; width: 37px; border: 1px solid #41A317;}
#news_area ul li .time { font-size: 12px; color: #404040; }
#news_area ul li .txt { height: 60px; -webkit-line-clamp: 2; }

/* book_area */
#book_area{z-index: 1;}
#book_area:after{content:'';top: 0;position: absolute;width: 490px;height: 100%;background: #89c42a;transform-origin: bottom;transform: skewX(-64deg);z-index: -1;left: -20px;}
#book_area .workframe{width: var(--width-xl);}
#book_area .bg_box{opacity:1;background-attachment: inherit;}
#book_area .bg_box:before{display:none;}
#book_area .slick-list{padding: 0 !important;}
#book_area .title_box .area_title{justify-content: center;}
#book_area .list_box img {height: 370px;}
#book_area .list_box li {margin: 0 20px;}
#book_area .list_box li .img_box{margin-top: 15px;}
#book_area .list_box .atag_item { z-index: 10; }
#book_area .list_box .badge {margin: 10px 0 0;height: auto;line-height: 36px;font-size: 23px;padding: 0;text-align: center;font-weight: 500;letter-spacing: 3px;}

/* 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 (max-width: 1680px){
	#about_area:after{left: 218px;}
}
@media screen and (max-width: 1440px){
	#about_area:after{left: 64px;width: 252px;}
	#product_area:before{width: 100px;}
	#product_area:after{width: 145px;}
	#book_area:after{width: 350px;left: -250px;}
}
@media screen and (max-width: 1366px){
	#book_area .workframe{width: 90%;}
	#about_area:after{left: 112px;width: 213px;}
}
@media screen and (min-width: 1281px){
	#custom_box li:hover .row { box-shadow: 0 4px 17px 0 rgba(var(--black-rgb), .2); }
}
@media screen and (max-width: 1280px){
	#about_area:after{left: 128px;width: 198px;}
	#news_area .workframe{width:90%;}
	#news_area{background-size: 75%;}
}
@media screen and (max-width: 1024px){
	#book_area:after{left: -190px;transform: skewX(-55deg);}
	#product_area:before{left: -170px;}
	#about_area .info_box{margin-top: 30px;}
	#about_area .info_box article{width:100%;}
	#product_area li{width:50%;margin-bottom: 30px;}
	#about_area:after{left: 170px;width: 341px;}
	#news_area .bg_box{width: 70%;height: 40%;}
	#news_area .workframe {justify-content: flex-end;}
	#news_area .list_box{width: 100%;}
	#news_area .title_box{order:0}
	#news_area .title_box .more_btn{display:none;}
}
@media screen and (max-width: 768px){
	#book_area:after{left: -190px;transform: skewX(-48deg);}
	#news_area .list_box .info_box { padding: 15px 0; }
	#youtube_box { padding-bottom: 60vw; }
	#custom_box li .row { margin: 10px 15px; padding: 10px 0; }
	#about_area:after{left: 137px;}
	#book_area .list_box img, #book_area .list_box li.slick-current img{height: 450px;}
}
@media screen and (max-width: 640px){
	#book_area:after{left: -120px;transform: skewX(-35deg);width: 220px;}
	#product_area:after{width: 110px;}
	#product_area:before{left: -240px;}
	#product_area li{width: 100%;}
	#news_area .bg_box{width: 110%;height: 34%;top: -2.5%;}
	section{padding:50px 0;}
	#about_area:after{left: 46px;width: 220px;transform: skewX(20deg);background: linear-gradient(360deg,var(--white) 25%, #62b315 110%);}
	#about_area .info_box article{width:100%;}
	#book_area .list_box img, #book_area .list_box li.slick-current img{height: 290px;}
}
@media screen and (max-width: 450px){
	#product_area .bgBox { width: 100%; object-fit: cover; }

}