.section_area {padding: 5vw 0;}
.section_area .title_box { margin-bottom: 40px; }
.section_area .title_box .area_title {font-weight: 400;font-size: 40px;color: var(--white);}
.section_area .title_box .sub_title {font-family: "Mulish", sans-serif;text-transform: uppercase;letter-spacing: 2px;font-weight: bold;}
.section_area .list_box { margin-top: 2vmax; }
.section_area .list_box .item_row { margin: 0 1em; }
.section_area .list_box .slick-dots { position: relative; margin: 1em 0; bottom: 0; }

/* product_area */
#product_area{position:relative;z-index: 4;}
#product_area .fixTxt{position:absolute;right: -10%;top: -50%;width: 30%;}
#product_area .paroller{position:absolute;top: 40%;left: -1%;}
#product_area .list_box li >div >p{background:var(--primary);padding: 10px 20px;margin-top: -20px;border-radius: 10px;color: var(--white);position: relative;z-index: 5;display: flex;align-items: center;justify-content: center;}
#product_area .list_box li >div >p button{color:white;letter-spacing: 2px;font-weight: bold;font-size: 13px;}
#product_area li:hover >div >p{background:var(--triadic1)}
#product_area li:hover .h3{color:var(--triadic1)}
#product_area .info_box{display: flex;background: var(--white);padding: 7vw 30px 50px;margin: -7vw 0 0;z-index: -2;flex-direction: column;align-items: center;border-radius: 30px;}
#product_area .info_box p{font-size:13px;color: var(--info);}
#product_area .info_box .h3{color:var(--primary);font-size:22px;font-weight:500;letter-spacing:1px;height:auto;margin-bottom:30px;}
#product_area .info_box article{height: 51px;-webkit-line-clamp: 2;padding: 0 30px;font-size: 15px;text-align: center;color: var(--info);}
#product_area .list_box li{margin: 0 30px;}
#product_area .list_box li >div{display: flex;flex-direction: column;align-items: center;}
#product_area .list_box li .photo{position:relative;width: 60%;}
#product_area .list_box li .bgBox{top: 40px;z-index: -1;border-radius: 330px;width: 70%;left: 20px;background: no-repeat 50% / cover;}

/* about_area */
#about_area{background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;padding: 0;}
#about_area:after{content:'';background: #140b0b;position: absolute;width: 100%;height: 60vh;opacity: .2;bottom: 3vw;z-index: -1;}
#about_area .workframe{width: min(90%, 1600px);display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;}
#about_area .pageh1{color:white;font-size: 22px;font-weight: 400;word-break: keep-all;width: 70%;margin-bottom: 20px;}
#about_area .info_box{width: 44%;margin-left: 5%;margin-top: 5%;}
#about_area .info_box article p {margin-bottom: 50px;width: 90%;line-height: 210%;font-weight: 400;font-size: 16px;text-align: justify;color: #fff;}
#photo_list{position:relative;}
#about_area .fly-out{position:absolute;z-index: 9;width: 105px;top: -230px;left: 80%;transition:unset;-webkit-transition:unset;-moz-transition:unset;-o-transition:unset;-ms-transition:unset;}
#photo_list .img_scale {margin: 0 20px 5%;border-radius: 36px;overflow: hidden;}
#photo_list .slick-current{margin-top: 5%;margin-bottom: 0;}
#photo_list img{aspect-ratio: 3 / 4.5;}

/* news_area */
#news_area{padding-top:3vw}
#news_area .videobox {bottom: 0;z-index: -4;opacity: .15;height: calc(100% + 3vw);}
#news_area .paroller{position:absolute;right: -20px;top: 5%;}
#news_area .list_box{height: 390px;}
#news_area .list_box .imgg{border-radius:25px;}
#news_area .list_box img {aspect-ratio: 4 / 3;width: 100%;}
#news_area .list_box .tt{position:absolute;bottom: 30px;background: rgb(35 32 27 / 80%);padding: 10px 40px;width: 100%;}
#news_area .list_box li:hover .tt{bottom:0;}
#news_area .list_box .tt h3{color:#fff;height: auto;font-size: 20px;-webkit-line-clamp: 2;text-align: center;font-weight: 300;}
#news_area .list_box .info_box { padding: 15px 30px; }
#news_area .list_box p  {margin-top: 30px;color: #fff;font-size: 15px;font-weight: 200;padding: 0 30px;height: 0;-webkit-line-clamp: 2;opacity: 0;display: none;}
#news_area .list_box li{margin: 25px 20px;}
#news_area .list_box li.slick-current{margin:0 20px;}
#news_area .list_box li.slick-current p{height:auto;opacity:1;display:-webkit-box;}
#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; }


@-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){
	#news_area .list_box{height: 350px;}
	#about_area{padding-bottom:7%}
	#product_area .paroller{top: 10%;width: 8%;}
}
@media screen and (max-width: 1280px){
	#news_area .list_box{height: 310px;}
}
@media screen and (max-width: 1024px){
	#news_area .paroller{width: 15%;top: -65%;}
	#news_area .list_box li{margin:25px 0;}
	#news_area .list_box li.slick-current{margin:0;}
	#about_area .fly-out{top: -120px;}
	#about_area:after{height:80vh}
	#photo_list img{aspect-ratio: 4 / 2.5;}
	#product_area .fixTxt{top:-25%;}
	#about_area .info_box article{width:80%;margin: 0 auto 50px;}
	#about_area .info_box{width: 100%;margin: 40px 0 0;text-align: center;}
	#photo_list .img_scale{margin-bottom:1%;}
	#photo_list .slick-current{margin-top:1%;margin-bottom:0;}
	#about_area .workframe{display:block;width: 100%;}
	#about_area .title_box{position: relative;width: 80%;left: 0;top: 0;margin: 0 auto 5vw;}
    #about_area .pageh1{width:80%;margin: 0 auto 20px;text-align: left;}
}
@media screen and (max-width: 768px){
    #news_area .list_box p{display:block;height: auto;opacity: 1;display: -webkit-box;}
    #product_area .fixTxt{right:0}
	.section_area{padding: 12vw 0;}
    #news_area{padding-top:5vw}
	#news_area .list_box{height:auto;}
	.section_area .title_box .area_title{font-size:35px;}
	#product_area .list_box li .bgBox{top: 20px;left: 13px;}
	#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){
	#news_area .list_box li{margin:0;}
	#news_area .list_box p{display:-webkit-box;opacity:1;height:auto;}
	section{padding:12vw 0;}
	#about_area{padding-bottom:10vw;}
	#about_area .fly-out{display:none;}
	#photo_list .img_scale, #photo_list .slick-current{margin:0 5px;}
	#product_area .info_box{margin-top: -20vw;padding: 20vw 0 50px;}
	#product_area .mmore{font-size:12px;}
	#product_area .paroller{display:none;}
	#product_area .fixTxt{top:-25%;width: 45%;}
	#book_area .list_box img { height: 65vw; }
}

@media screen and (max-width: 450px){
	#product_area .bgBox { width: 100%; object-fit: cover; }
}