#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .titleBox  {padding-bottom: 5vw;}
section .titleBox .h2 {font-size: 60px;color: var(--primary);font-weight: 700;line-height: 120%;letter-spacing: 1px;}
section .titleBox .h3{font-size: 60px;line-height: 120%;font-weight: 700;display: flex;align-items: center;letter-spacing: 1px;}
section .titleBox .h3 span{display:block;width: 75px;height: 6px;background: #ccc;margin-left: 50px;}
section .titleBox .h5{font-size: 28px;letter-spacing: 2px;margin-top: 0px;font-weight: 600;display: flex;align-items: center;margin-top: 10px;}
section .titleBox .h5 span{display:block;width: 75px;height: 6px;background: var(--primary);margin-left: 30px;}
section .clip { margin: auto; width: 100%; }
section .clip img { height: 100%; }
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }
section .clip video { width: auto; height: 100%; top: 50%; left: 50%; }

/* product_area */
#product_area:before{content:'';width: 110%;height: 25px;background: var(--primary);position: absolute;top: 0;transform: skewX(50deg);left: 15px;background: linear-gradient(136deg, #33007d, #da00f8, #33007d);}
#product_area:after{content:'';width: 105%;height: 500px;background: #f3f3f3;position: absolute;top: 25px;transform: skewX(50deg);left: 325px;z-index: -1;}

/* maintbox*/
#product_list.maintbox {margin: 70px 0 0;}
#product_list.maintbox .titleBox *{color:#262626;}
#product_list.maintbox ul{/* width: 80%; *//* float: none; */}
#product_list.maintbox ul:before{width: 110%;}
#product_list.maintbox li .clip{width: auto;}
#product_list.maintbox li .clip:after{display:none;}

/* product_list */
#product_list{overflow:hidden;}
#product_list .photo{width: 70%;margin: -10% auto 0;}
#product_list .titleBox:after{content:url(/images/44/img-cicle.png);position: absolute;bottom: 20%;z-index: -1;left: -7%;zoom: 14%;}
#product_list .workframe{width: min(90%, 1200px);}
#product_list .bg_box {width: 735px;height: 475px;float: right;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#product_list ul{/* width: 100%; *//* float: left; *//* position: relative; *//* height: 475px; */}
#product_list ul:before{content:'';width: 115%;height: 1px;position: absolute;left: -5%;background: #ddd;top: calc(60% + 45px);z-index: -1;}
#product_list li {margin: 0 10px;display: flex;flex-direction: column;align-items: center;}
#product_list li font{position: relative;background:#f3f3f3;font-family: "Rubik", sans-serif;font-size: 18px;width: 44px;height: 44px;display: flex;justify-content: center;align-items: center;border-radius: 50px;z-index: 2;font-weight: 500;}
#product_list li .clip{background:#f3f3f3;padding: 40px 40px 30px 30px;width: auto;border-radius: 21px;margin-top: -22px;box-shadow: 0 3px 24px rgb(0 0 0 / 20%);}
#product_list li .clip img{position:relative;z-index: 2;height: auto;}
#product_list li .clip:after{content:'';width: 40px;height: 40px;position: absolute;right: 21px;background: var(--primary);border-radius: 50px;opacity: .6;'CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX';top: 22px;}
#product_list li span{width:27px;height: 27px;display: flex;align-items: center;justify-content: center;border: 1px solid #c3c3c3;border-radius: 50px;margin: 30px 0 10px;background: var(--white);position: relative;}
#product_list li span:before{content:'';width: 1px;height: 48px;background: #ddd;position: absolute;top: -46px;z-index: -1;}
#product_list li span:after{content:'';width: 8px;height: 8px;background: var(--primary);border-radius: 50px;}
#product_list li h3{font-weight:400;font-size: 17px;text-align: center;}
ul#process {/* width: 1108px; */}

/* about_area */
#about_area{padding-top:0}
#about_area .title_box { padding-bottom: 0; }
#about_area .a_box{position: relative;width: 90%;margin: 0 0 0 auto;}
#about_area .h_box{margin-top: 2%;position: relative;z-index: 0;}
#about_area .fixTxt{color: #f1f1f1;font-size: 170px;font-weight: 700;position: absolute;bottom: -10px;left: 0;z-index: -1;text-transform: capitalize;}

/* history */
#history{position:relative;display: flex;align-items: center;width: 90%;margin: 0 auto;}
#history:after{content:'';position: absolute;width: 200%;height: 1px;background: #ddd;z-index: -1;left: -50%;}
#history li h3{color: #dcdcdc;font-family: "Rubik", sans-serif;font-size: 56px;font-weight: 500;}
#history li span{width:33px;height: 33px;background: var(--secondary);border-radius: 50px;display: flex;align-items: center;justify-content: center;position: relative;margin-bottom: 35px;margin-top: 65px;}
#history li.slick-current span{background: var(--secondary);}
#history li span:before{content:'';width: 1px;height: 53px;background: #dcdcdc;position: absolute;top: 33px;}
#history li span:after{content:'';width: 11px;height: 11px;position: absolute;background: var(--white);border-radius: 50px;}
#history li article{color: var(--secondary);font-size: 18px;width: 85%;padding-left: 40px;position: relative;font-weight: 600;}
#history li article:after{content:'';width: 8px;height: 8px;background: var(--gray);position: absolute;border-radius: 50px;left: 13px;top: 12px;}
#history .slick-prev{width: 58px;height: 58px;left: -15%;}
#history .slick-prev:before{content:url(/images/44/arrow-left.png);display: block;opacity: 1;}
#history .slick-next{width: 58px;height: 58px;right: -15%;}
#history .slick-next:before{content:url(/images/44/arrow-right.png);display: block;opacity: 1;}

/* bonew_area */
#bonew_area{background-image: url(/images/44/img-boonew-bg.png);background-repeat: no-repeat;background-position: 50% bottom;background-size: cover;}

/* news_area */
#news_area .workframe{width: 1160px;}
#news_area .titleBox {padding-bottom: 1vw;z-index: 2;position: relative;}
#news_area .titleBox .h3{text-align:center;display: flex;flex-direction: column;align-items: center;}
#news_area .titleBox .h3:before{content:'';display: block;width: 6px;height: 78px;margin: 0 auto 30px;background: var(--primary);}
#news_area .newsList{display:flex;justify-content: center;}
#news_area .tabs_btn{margin-bottom: 50px;}
#news_area .newsList:after{content:url(/images/44/img-cicle.png);position: absolute;bottom: -37%;z-index: -6;left: 36%;zoom: 14%;}
#news_area .tabs_btn a{padding: 3px 15px;font-size: 27px;letter-spacing:0;color:#2f2f2f;font-weight: 600;display:block}
#news_area .tabs_btn .active a{color: var(--primary);}
#news_area .tabs_body .tab_info{width:100%;top:0;left:0;opacity:0;pointer-events:none}
#news_area .tabs_body .tab_info.showBox{opacity:1;pointer-events:auto;}
#news_area .tabs_body .tab_info li{padding: 35px 0;border-bottom: 1px solid #c6c6c6;}
#news_area .tabs_body .tab_info li:first-child{}
#news_area .tabs_body .tab_info .items{}
#news_area .tabs_body .tab_info .items .Img{padding-bottom:20px;display:none;width:100%}
#news_area .tabs_body .tab_info .items .Img img{height:310px;width:100%;object-fit:cover}
#news_area .tabs_body .tab_info .items .Txt{width:100%;}
#news_area .tabs_body .tab_info .items .Txt >div:first-child{display:flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#news_area .tabs_body .tab_info .items .Txt .f_aitems_right{display:flex;align-items: center;justify-content: space-between;}
#news_area .tabs_body .tab_info .items .Txt .f_aitems_right h3{width: calc(100% - 50px);height: auto;font-weight: 400;}
#news_area .tabs_body .tab_info .items .Txt .f_aitems_right p svg{width:18px;height:18px;fill: #323232;}
#news_area .tabs_body .tab_info .items .Txt .time{display:flex;flex-wrap: wrap;align-items: center;font-size: 22px;font-weight: 500;font-family: "Rubik", sans-serif;letter-spacing: 2px;}
#news_area .tabs_body .tab_info .items .Txt .h3{width: calc(80% - 200px);height: auto;font-size: 22px;font-weight: 600;}
#news_area .tabs_body .tab_info .items .Txt .time font{font-size: 22px;font-weight: 500;font-family: "Rubik", sans-serif;color: #3b3b3b;}
#news_area .tabs_body .tab_info .items .Txt .time b{font-family: "Barlow", sans-serif;color: #8b8a8a;font-size: 16px;font-weight: 500;margin-left: 10px;margin-bottom: 5px;}
#news_area .tabs_body .tab_info li:first-child .items .Img{display:inline-block}
#news_area .tabs_body .tab_info li:first-child article,#news_area .tabs_body .tab_info  li:first-child .items .Txt .more{display:none}
#news_area .tabs_body .tab_info .items .Txt .more{width:auto;border:0px solid var(--info);padding:0}
#news_area .tabs_body .tab_info .items .Txt .more b.arrow{background-color:#ababab;height:1px;width:calc(100% - 60px)}
#news_area .tabs_body .tab_info .category{color: #7a7a7a;line-height:1;font-size: 22px;font-weight: 500;}

/* book_area */
#book_area .workframe{width: 1560px;margin-right: 70px;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-end;}
#book_area .booklist {width: 70%;}
#book_area .more_btn{padding-left:0;margin-top:80px;}
#book_area li h3 {margin-top: 10px;height: 30px;font-size: 18px;position: absolute;bottom: 20px;display: block;text-align: center;width: 100%;color: var(--white);font-weight: 400;letter-spacing: 1px;}
#book_area li .img_box{border-radius:25px;}
#book_area li .img_box:after{content:'';position: absolute;width: 100%;height: 100%;background: linear-gradient(180deg,rgb(0 0 0 / 0%), rgb(0 0 0 / 50%));top: 0;left: 0;}

/* photo_area */
#photo_area:before{content:'';width: 72px;height: 72px;position: absolute;bottom: 0;left: 5%;background: var(--primary);box-shadow: -72px -72px var(--primary);}
#photo_area:after{content:'';width: 100%;height: 55%;position: absolute;bottom: 0;left: 0;background: #f1f1f1;z-index: -1;}
#photo_area .workframe{width: 95%;margin: 0 0 0 auto;display: flex;justify-content: space-between;align-items: flex-start;flex-direction: row;}
#photo_area .titleBox {background:var(--primary);padding: 70px 65px 75px;width: 350px;}
#photo_area .titleBox *{color:#fff;}
#photo_area .titleBox .ttinfo{margin-top: 20px;}
#photo_area .titleBox h2{color:#5b0808}
#photo_area .tt{width: calc(100% - 480px);display: flex;flex-wrap: wrap;}
#photo_area .tt .ttinfo{padding: 0 35px;font-size: 18px;font-weight: 400;margin: 60px 0 45px;width: 100%;letter-spacing: 1.5px;}
#photo_area .tt .item{width: calc((100%/3) - 101px);margin: 0;border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;padding: 50px 50px 20px;position: relative;background: var(--white);}
#photo_area .tt .item:nth-child(6),#photo_area .tt .item:nth-child(7), #photo_area .tt .item:nth-child(8){border-bottom:0;}
#photo_area .tt .item:nth-child(6){border-right:0;}
#photo_area .tt .item h3{color:#303030;font-size:34px;font-weight: 500;display: flex;align-items: center;justify-content: space-between;}
#photo_area .tt .item h3 span{width:20px;height: 20px;background: var(--gray);border-radius: 50px;display: flex;justify-content: center;align-items: center;opacity: 0.5;}
#photo_area .tt .item h3 span:after{content:'';width: 0;height: 0;background: var(--primary);border-radius: 50px;z-index: -1;position: absolute;}
#photo_area .tt .item:hover h3 span:after{width: 40px;height: 40px;}
#photo_area .tt .item h3 span:before{content:'';width: 6px;height: 6px;background: var(--white);border-radius: 50px;}
#photo_area .tt .item p{color:#949494;font-size:22px;font-weight: 300;font-family: "Rubik", sans-serif;}
#photo_area .tt .item .more_btn{padding: 80px 0 0;font-size: 15px;}
#photo_area .tt .item .more_btn img{margin-right: 0px;margin-left: 20px;padding: 11px;width: 20px;height: 20px;}
#photo_area .tt .item .num{position:absolute;bottom: 12px;right: 25px;color: #d7d7d7;font-family: "Rubik", sans-serif;font-size: 66px;line-height: 100%;opacity: .5;font-weight: 600;}

@media screen and (max-width: 1680px){	
	#product_list li .clip:after{width: 60px;height: 60px;}
	#photo_area .tt .item .num{font-size: 30px;}
}
@media screen and (max-width: 1460px){
	#book_area .workframe{width: 95%;}
	#product_area .workframe{width: 1030px;/* margin-right: 0; */}
	#about_area .h_box::after{zoom:80%;right: -25%;}
	#photo_area .workframe{width:100%;}
	#product_list ul{/* width: 70%; */}
	#product_list .bg_box{width:525px;height: 425px;}
	#photo_area .titleBox{padding: 70px 35px 145px;}
	#photo_area .tt{width: calc(100% - 337px);}
	#history .slick-prev{left: -10%;}
	#history .slick-next{right:-10%;}	
	#product_area:after{
    left: 62px;
    width: 140%;
}
	#product_area:before{
    left: -75px;
}
}
@media screen and (max-width: 1366px){
	#book_area .booklist{width:65%;}
	#product_list.maintbox{}
	#about_area:before{display:none;}
	#about_area .workframe{width:95%;margin-right:0;}
	#about_area .h_box{width:90%;margin: 2% auto 0;}
	#photo_area .tt .item h3{font-size: 27px;}
	#photo_area .tt .item p{font-size: 18px;}
}
@media screen and (min-width: 1280px){
	#product_area .titleBox .h3{color: #ccc;}
}
@media screen and (max-width: 1280px){
	#product_list{margin: 80px auto 30px;}
	#product_area .titleBox h5,#product_area .titleBox h3{display: flex;justify-content: center;}
	#product_list.maintbox ul{width: 90%;}
	#product_area:before{left:-5%}
	#product_area:after{left:-5%;width: 130%;height: 90px;}
	#product_area .workframe{width:90%;}
}
@media screen and (max-width: 1024px){
	#about_area .workframe{width:90%;margin: 2% auto 0;}
	#product_list.maintbox ul{width: 100%;}
	#product_area .workframe{margin: 0 auto;}
	#product_list.maintbox{margin-top: 40px;}
	#product_list ul{width: 100%;float: none;height: 100%;}
	#product_list .bg_box{display:none;}
	#product_list {margin: 80px auto 30px;}
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
	#photo_area .workframe{flex-direction: column;}
	#photo_area .titleBox{padding: 40px 35px;width: auto;}
	#photo_area .tt{width:100%;margin-top: 0;}
	#photo_area .tt .ttinfo{padding-left: 40%;}
	#photo_area:before, #photo_area:after{display:none;}
	#photo_area{padding-bottom:0;}
	#product_list ul:before{left: -7.5%;}
	#book_area .workframe{margin:0 auto;width: 90%;flex-direction: column;align-items: center;}
	#book_area .titleBox h2, #book_area .titleBox h3,#book_area .titleBox h5{text-align:center;display: block;}
	#book_area .more_btn{padding:0;margin-top: 20px;margin-left: 30px;}
	#book_area .booklist{width: 100%;}
	#news_area .workframe{width:90%;}
	#about_area .fixTxt{font-size: 50px;left: 40px;}
}
@media screen and (max-width: 980px){
	#photo_area .tt .ttinfo{padding-left: 50%;margin-bottom: 9px;}
	#photo_area{padding:0;}
	#about_area .h_box::after{display:none;}
	#history .slick-prev{left: -15%;top: 36%;}
	#history .slick-next{right: -15%;top: 36%;}
	#history:after{bottom: 63%;}
	#history li h3{font-size: 40px;}
	#about_area #about_info { margin-bottom: 8vw; }
	#history{width:80%;}
	#photo_area .tt .item{width: calc((100% / 2) - 101px);}
	#photo_area .tt .item:nth-child(6), #photo_area .tt .item:nth-child(7){border-bottom: 1px solid #ddd;}
}
@media screen and (max-width: 760px){
    #product_list .titleBox:after{zoom: 9%;left: 50%;}
    #history li span{margin-top: 30px;}
	#news_area .tabs_body .tab_info .items .Txt h3{font-size:18px;width: calc(100% - 90px);}
	#news_area .tabs_body .tab_info .category{font-size: 15px;padding-left: 0;}
    #news_area .tabs_body .tab_info .items .Txt .h3{width: calc(80% - 70px);font-size: 18px;}
	#news_area .tabs_body .tab_info .items .Txt .time font, #news_area .tabs_body .tab_info .items .Txt .time{font-size: 15px;}
	#news_area .tabs_btn a{font-size:20px;}
	#book_area .booklist{margin-top:40px;}
	#maintenance{margin-top:30px;}
	#product_list.maintbox{margin-top: 20px;}
	#product_list ul:before{top: calc(60% + 31px);}
	#product_list.maintbox ul:before{top: calc(60% + 30px);}
	#photo_area .tt .item{width: calc((100% / 2) - 61px);padding: 30px 30px 90px;}
	#photo_area .tt .item:nth-child(2n){border-right:0;}
	#photo_area .tt .ttinfo{padding: 0 35px;margin-bottom: 9px;}
	#photo_area .tt{margin-top: 0;}
	section {padding: 8vw 0;}
	#product_sub_list >div { margin: 10px auto 50px; }
	#product_sub_list li { width: 150px; }
	#product_sub_list li .clip { height: 150px; }
	#product_list li .info_box { width: 45vw; height: 30vw; }
	#photo_area .tt .item h3{font-size: 28px;}
	#photo_area .tt .item p{font-size: 18px;}
	#photo_area .tt .item .num{font-size: 45px;}
    #product_list .photo{margin-top:0;width: 100%;}
}
@media screen and (max-width: 550px){
	#product_list.maintbox .titleBox *{display:block;text-align: center;}
	#product_list.maintbox .titleBox h5 span{display:none;}
	#product_area >.titleBox h3{margin-left: 80px;}
	#product_area >.titleBox h5{margin-left: 140px;margin-top: 0;}
	#product_area:before{height: 8px;left: -26px;transform: skewX(45deg);}
	#product_area:after{left: 8%;width: 130%;height: 65px;top: 8px;transform: skewX(45deg);}
	#history li h3{margin-top: 0px;}
	#history .slick-prev{left: -25%;}
	#history .slick-next{right: -25%;}
	#history{width: 70%;}
	#history .slick-prev:before, #history .slick-next:before{zoom:80%;}
	#about_area .workframe{margin-top:30px;}
	#about_area .workframe.h_box{width: 95%;}
	#about_area .fixTxt{display:none;}
	section .titleBox .h2{font-size: 28px;}
	section .titleBox .h3{font-size: 26px;}
	section .titleBox .h5{font-size: 34px;}
	section .titleBox .h3 span{display:none;}
	#about_area #about_img { width: 80vw; }
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area li .row { margin: auto; width: 280px; }
}
@media screen and (max-width: 400px){
	#product_list.maintbox ul:before{top: calc(60% + 25px);}
	#product_list ul:before{top: calc(60% + 8px);}
	#history li h3{margin-top: 17px;}
}