/* section */
section {padding: 8vw 0 5vw;}
section >* { z-index: 3; }
section .title_box {margin-bottom: 40px;padding: 0 50px;position: relative;}
section .title_box font {text-transform: uppercase;line-height: 100%;letter-spacing: 0.4px;font-size: 64px;font-family: 'Montserrat', sans-serif;color: var(--primary);font-weight: 700;}
section .title_box font:last-child {color: var(--info);}
section .title_box .page_title {font-weight: 500;font-size: 25px;color: #333333;position: relative;padding-left: 55px;letter-spacing: 3.5px;margin-top: 10px;}
section .title_box .page_title::before {content: '';position: absolute;left: 0;top: 50%;margin-top: -0.5px;width: 35px;height: 1px;background-color: #606263;}
section.bg_box {background: no-repeat 50% / cover;background-attachment: fixed;}
section.bg_box:after { background: -webkit-linear-gradient(bottom,rgba(var(--secondary-rgb), 1) 0%,rgba(var(--secondary-rgb), .7) 100%); background: linear-gradient(to top,rgba(var(--secondary-rgb), 1) 0%,rgba(var(--secondary-rgb), .7) 100%); opacity: 1; }


/* about_area */
#about_area{
position: relative;}
#about_area .img_item {margin-bottom: 30px;order: 1;}
#about_area .img_item:before { position: absolute; width: 90%; height: 100%; border: 1px rgba(var(--info-rgb), .1) solid; display: block; top: 30px; right: 30px; content: ""; }
#about_area .img_item img {width: 90%;}
#about_area .img_item a {padding: 20px 35px;letter-spacing: 3px;text-transform: uppercase;font-size: 13px;right: 30px;bottom: -30px;z-index: 3;background: #ed683e;}
#about_area .info_item article {margin-bottom: 30px;width: 100%;line-height: 180%;letter-spacing: 0.5px;font-weight: 300;color: #000;}
#about_area::after {content: "";position: absolute;left: 0;top: -70px;z-index: -1;width: 950px;height: 100%;background-image: url(/images/39/aboutBg.png);background-repeat: no-repeat;background-position: left bottom;}
#about_area:before{position: absolute;content: '';width: 320px;height: 670px;right: 0px;top: 50px;background-image: url(/images/39/index-aboutbg2.png);z-index: 0;}
@keyframes bgWhirligig-2 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }


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

/* news_area */
#headBan{position: relative;}
#news_area{position: relative;padding: 10vw 0 10vw;}
#news_area .nowrap_box{position: relative;justify-content: space-between;width: 90%;margin: auto;}
#news_area .list_box .nowrap_box{padding: 20px 10px;width: 90%;}
#news_area .bg_box {width: 80%;height: 100%;margin: auto;background: no-repeat 50% / cover;background-attachment: fixed;opacity: 1;top: 0;left: 50%;transform: translateX(-50%);z-index: 0;}
#news_area .bg_box:before { width: 100%; height: 100%; display: block; background: rgba(var(--primary-rgb), .2); content: ""; }
#news_area .bg_box.white:before { background: rgba(var(--white-rgb), .2); }
#news_area .title_box font{color: #fff;font-size: 32px;}
#news_area .title_box font:last-child{margin-left: 0;font-size: 64px;font-family: 'Montserrat', sans-serif;}
#news_area .title_box .page_title{color: #ffffff;padding-left: 0;font-weight: 500;}
#news_area .title_box .page_title::before{background-color: #ffffff;display: none;}
#news_area .title_box{padding: 30px 30px;justify-content: center;-ms-align-items: center;align-items: center;margin-right: 60px;width: 20%;margin-bottom: 0;}
#news_area .list_box{width: 670px;background-color: var(--primary);}
#news_area .list_box .slick-dots{margin-top: 0;bottom: 15px;}
#news_area .list_box li{position: relative;padding: 0 10px;margin: 15px 0;}
#news_area .list_box .row {padding-bottom: 0px;margin: 0;}
#news_area .list_box .row img { height: 320px; }
#news_area .list_box .row .info_box {padding: 0px 0px;width: calc(100% - 0px);left: 20px;bottom: 0;background-color: #fff0;display: flex;}
#news_area .list_box .row .info_box p {width: 100px;}
#news_area .list_box .row .info_box p font  {font-weight: 400;font-size: 14px;color: #7591c3;margin-right: 12px;}
#news_area .list_box .row .info_box p a {margin-right: 10px;max-width: calc(100% - 82px);z-index: 2;color: #696969;}
#news_area .list_box .row .info_box .txt_clamp {width: calc((100% / 1) - 100px);}
#news_area a.more_btn{right: -70px;bottom: -10px;background: var(--info);padding: 20px 90px;transition: all .2s ease;font-family: 'Montserrat', sans-serif;font-weight: 700;text-transform: uppercase;font-size: 14px;}
#news_area a.more_btn span:before {width: 30px;height: 30px;display: block;line-height: 30px;margin: auto;position: absolute;top: 0;left: 5px;right: 0;bottom: 0;text-align: center;content: ">";color: #ffffff;}
#news_area a.more_btn:hover{right: -50px;bottom: 0px;background: var(--primary);}

/* product_area */
#product_area{padding: 3vw 0 5vw;}
#product_area .title_box{width: 60%;}
#product_area .title_box p,#product_area .title_box .page_title{padding-left: 0;display: flex;flex-direction: column;}
#product_area .title_box .more{position: absolute;right: 150px;top: 80px;}
#product_area .title_box .more span {content: "";width: 200px;height: 50px;background-color: #333333;display: block;position: absolute;-webkit-transform: skew(-40deg);transform: skew(-40deg);transition: all .2s ease;z-index: -1;top: -10px;left: -10px;}
#product_area .title_box .more a:before {content: "";width: 200px;height: 50px;background-color: #bbb;-webkit-transform: skew(-40deg);transform: skew(-40deg);display: block;position: absolute;transition: all .2s ease;z-index: -1;top: 0px;left: 0px;}
#product_area .title_box .more a{display: inline-block;}
#product_area .title_box .more font{font-size: 14px;color: var(--white);padding: 0 30px;}
#product_area .title_box .page_title::before{display: none;}
#product_area ul{display: flex;flex-wrap: wrap;}
#product_area ul li{margin: 8px;width: calc((100% / 5) - 16px);position: relative;}
#product_area .row{margin: 0;}
#product_area ul li .info_box{top: 280px;right: 0;z-index: 10;background-color: #ffffff;width: 100%;height: auto;margin: 0  0 0 auto;padding-bottom: 60px;}
#product_area .row .img_box{margin-bottom: 0;}
#product_area img {background: #fff;width: 100%;aspect-ratio: 1/1;object-fit: contain;}
#product_area .row .info_box >div {margin: auto;width: calc(100% - 0px);}
#product_area .row .info_box h3 {z-index: 5;overflow: hidden;white-space: nowrap;font-size: 18px;font-weight: 500;letter-spacing: 0.5px;display: inline-block;color: var(--info);padding: 8px 10px;position: absolute;left: 50%;transform: translateX(-50%);bottom: 10px;}
#product_area .row .info_box .line {content: '';width: 0;height: 4px;background: var(--primary);position: absolute;bottom: -6px;left: 50%;opacity: .7;}
#product_area .row .info_box article {height: 45px;font-weight: 300;font-size: 16px;-webkit-line-clamp: 3;color: #000;display: none;}
#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 ul li::before {content: '';width: calc(100% - 10px);height: calc(100% - 10px);background: #fff;position: absolute;top: 0px;left: 0px;border: 1px solid transparent;box-shadow: 0 10px 24px rgb(0 0 0 / 11%);}

/* 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 (max-width: 1366px){
	section .title_box font,#news_area .title_box font:last-child{
    font-size: 50px;
}
	#product_area .title_box p, #product_area .title_box .page_title,section .title_box .page_title{
    font-size: 22px;
}
}

@media screen and (min-width: 1281px){
	#about_area .d_flex { align-items: center; }
	#product_area .row:hover .info_box .line {width: calc(100% - 0px);left: 0;}
	#product_area .title_box .more:hover a span{background-color: var(--primary);}
	#product_area .title_box .more:hover a:before{top: -10px;left: 0px;}	
	#product_area .row:hover{transform: translate(0px, -10px);}
	#book_area .row:hover .info_box { bottom: 0; }
	#product_area::before {content: "";position: absolute;top: 0;left: 0;z-index: 0;width: calc((100% - 00px) / 2);height: 700px;background-color: var(--complement);}
}
@media screen and (max-width: 1280px){
	#about_area .img_item:before , #about_area .img_item img { width: 100%; }
	#about_area .img_item img { height: 100%; }
	#product_area .row .info_box {}
	#product_area .row .img_box {opacity: 1;}
	#news_area .bg_box{
    width: 100%;
}
	#news_area a.more_btn{
    right: 0;
    bottom: 0;
}
	#product_area .title_box{
    width: 100%;
    padding: 0;
    margin-top: 20px;
}
	#product_area .title_box .more{
    right: 30px;
}
		section .title_box font,#news_area .title_box font:last-child{
    font-size: 40px;
}
	#product_area .title_box p, #product_area .title_box .page_title,section .title_box .page_title{
    font-size: 20px;
}
}

@media screen and (max-width: 1024px){
	#about_area .img_item {width: 100%;margin: 0 0 30px auto;order: inherit;}
	#about_area .img_item:before {border: 0;top: 0;right: 0;z-index: 2;}
	#about_area .info_item {margin-top: 0px;z-index: 4;}
	#about_area::after{top: -283px;width: 950px;height: 870px;}
		#product_area ul{
    display: flex;
    flex-wrap: wrap;
}
	#product_area ul li{
    width: calc((100% / 2) - 16px);
}

	#news_area .title_box{
    margin-right: 0;
}
	#news_area .list_box{
    width: 580px;
}
}
@media screen and (max-width: 960px){
	#news_area{width: 100%;bottom: 0;padding: 10vw 0 19vw;}
	#news_area .list_box .row .info_box{padding: 10px 0;width: auto;}
	.list_box .info_box h3{margin: 0;}
	#news_area .nowrap_box{
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
}
	#news_area .title_box{
    width: auto;
}
	#news_area .list_box{
    width: 100%;
}
	#news_area a.more_btn{
    padding: 5px 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
}
@media screen and (max-width: 768px){
	#about_area .img_item { width: 80vw; height: 50vw; }
	#product_area .list_box {margin: auto;}
	#product_area .row .info_box >div {width: calc(100% - 10px);}
	#product_area .row .info_box article { height: 50px; -webkit-line-clamp: 2; }
	#book_area .row img { height: 350px; }
	#news_area .title_box .page_title{}
	#news_area .title_box{padding: 17px 0;}
}
@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 { margin-top: 40px; }
	#news_area .nowrap_box .title_box{}
	#about_area::after{top: -370px;background-position: top;}
	#about_area:before{right: -160px;top: 330px;background-size: 90%;background-repeat: no-repeat;}
	section .title_box font{font-size: 42px;}
	section .title_box {margin-bottom: 30px;}
	#product_area ul li{padding: 0px;width: calc((100% / 1) - 0px);}
	#product_area .row .info_box h3{right: 0;font-size: 16px;width: 80%;margin: auto;text-align: center;padding: 0 10px;}
	#news_area .list_box{width: 100%;}
	#news_area .list_box .slick-dots{margin-top: 0;bottom: 7px;}
	#product_area .row .info_box h3{
    font-size: 17px;
}
	#product_area .title_box{
    margin-bottom: 80px;
}
	#product_area .title_box .more{
    position: relative;
    top: 30px;
    right: -30px;
}
}
@media screen and (max-width: 500px){
	#product_area .list_box { width: 100%; }
}