/* section */
section {padding: 5vw 0;}
section.section_pad { padding: 5vw 0; }
section >* { z-index: 3; }
section .title_box { margin-bottom: 40px; }
section .title_box .area_title {font-weight: 400;font-size: 72px;font-family: 'Oswald', sans-serif;text-transform: uppercase;color: #202020;letter-spacing: 5px;}
section .title_box .sub_title {font-weight: 400;font-size: 24px;margin-left: 30px;letter-spacing: 10px;color: #464545;}

/* 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(--primary-rgb), .2); content: ""; }
.bg_box.white:before { background: rgba(var(--white-rgb), .2); }

/* about_area */
#about_area{position:relative;padding-top: 0;padding-bottom: 2vw;}
#about_area .workframe{display:flex;flex-wrap: wrap;justify-content: space-between;align-items: center;width: var(--width-xl);margin-right: 13%;}
#about_area .img_box{order:2;width: 55%;margin: -50px 0 0;}
#about_area .info_box{margin: 0;width: 45%;}
#about_area .info_box .area_title{font-size: 33px;font-weight: 600;color: var(--primary);line-height: 150%;}
#about_area .info_box article {margin-bottom: 30px;width: 100%;line-height: 210%;letter-spacing: 1.5px;font-weight: 300;color: var(--black);}

/* product_area */
#product_area{padding:0;}
#product_list{display:flex;flex-wrap: wrap;}
#product_list li{width:calc(100%/4)}
#product_list .row{margin: 0;}
#product_list .info_box{width: 100%;height: 100%;background: rgb(45 45 45 / 50%);bottom: 0;left: 0;display: flex;align-items: flex-end;justify-content: center;}
#product_list li:hover .info_box{background: rgb(45 45 45 / 75%);}
#product_list .info_box:after{content:'';width: 190px;height: 190px;border-radius: 50%;border: 2px solid #fff;position: absolute;top: 30%;opacity: 0;background-image: url(/images/40/icon-product.png);background-repeat: no-repeat;background-position: 0% 100%;background-size: auto;}
#product_list li:hover .info_box:after{    background-position: 50% 50%;}
#product_list li:hover .info_box:after{opacity:1;}
#product_list .info_box >div{margin: 75px 45px;width: calc(100% - 90px);}
#product_list .info_box h3{font-size: 35px;height: 98px;-webkit-line-clamp: 2;font-family: 'Oswald', sans-serif;font-weight: 200;color: var(--white);text-transform: uppercase;line-height: 140%;padding-right: 30px;}
#product_list .info_box article{font-size: 19px;height: auto;color: var(--white);margin-top: 30px;}

/* news_area */
#news_area .list_box img { height: 320px; }
#news_area .list_box .info_box { padding: 15px 30px; }
#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 { width: 90px; font-weight: 300; }
#news_area .list_box .info_box h3 { height: 34px; font-size: 20px; }

/* book_area */
#book_area .workframe{width: var(--width-xl);}
#book_area .title_box{display:flex;flex-wrap: wrap;justify-content: flex-end;flex-direction: column;align-items: flex-start;position: relative;}
#book_area .title_box a{position:absolute;right: 0;bottom: 20px;}
#book_area .list_box img {height: 350px;}
#book_area .list_box li {margin: 15px;}
#book_area .list_box .info{bottom:0;padding: 20px 30px;height: calc(100% - 40px);width: calc(100% - 60px);display: flex;flex-direction: column;justify-content: flex-end;align-items: flex-start;background: linear-gradient(180deg,rgb(0 0 0 / 0%), rgb(0 0 0 / 50%));}
#book_area .list_box .info p{color: #fff;background: var(--primary);width: auto;padding: 5px 17px;font-size: 15px;margin-bottom: 10px;}
#book_area .list_box .info h3{color:#fff;height: auto;font-size: 20px;font-weight: 400;}
#book_area .list_box li a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 10;}
#book_area .list_box .img_box:before , #book_area .list_box .img_box:after {position: absolute;width: 100%;height: 100%;background: var(--black);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 .workframe{width:90%;margin: 0 auto;}
	#product_list .info_box:after{top:15%;}
	#product_list .info_box h3{padding-right:0;}
	#product_list .info_box >div{margin-right: 20px;width: calc(100% - 65px);}
}
@media screen and (max-width: 1280px){
	#product_list li{width:50%;}
	#product_list .row img{width:100%;height: 500px;}
	#product_list .info_box h3{height:auto;-webkit-line-clamp: 1;}
	#book_area .workframe{width:90%}
}
@media screen and (min-width: 769px){
	.slick-prev, .slick-next{display: none !important;}
}
@media screen and (max-width: 768px){
	#book_area .slick-prev{left: 46px;z-index: 9;}
	#book_area .slick-prev:before{content:url(/images/40/arrow-left.png);opacity: 1;zoom: 50%;}
	#book_area .slick-next{right: 46px;z-index: 9;}
	#book_area .slick-next:before{content:url(/images/40/arrow-right.png);opacity: 1;zoom: 50%;}
	#about_area .img_box{position:absolute;right: -10%;width: 60%;top: -100px;}
	#news_area .list_box .info_box { padding: 15px 0; }
	#youtube_box { padding-bottom: 60vw; }
	#custom_box li .row { margin: 10px 15px; padding: 10px 0; }
	section, #about_area{padding:50px 0;}
	#about_area .info_box{width: 70%;}
	#about_area .info_box article{margin-top: 60px;}
	#contact_area .title_box{display:flex;flex-direction: column;align-items: center;}
	#contact_area a{position:relative;margin-top: 40px;}
	#contact_area a b{margin:0;}
}
@media screen and (max-width: 640px){
	#product_list .row img{height: 400px;}
	#product_list li{width: 100%;}
	#about_area .info_box article{margin-top: 150px;}
	#book_area .list_box img { height: 65vw; }
	#about_area .info_box .area_title{letter-spacing:0;}
	#about_area .info_box{width: 100%;}
	#about_area .img_box{top: 70px;}
	#product_list .info_box:after{display:none;}
	#product_list .info_box h3{-webkit-line-clamp: 2;}
	section .title_box .area_title{font-size: 50px;}
	#book_area .title_box a{display:none;}
	#book_area .title_box{margin-bottom:20px;}
}