/* index.less */
#product_area .row .info_box{transform:scale(1);-webkit-transform:scale(1);}#product_area .row .img_box{transform:scale(0);-webkit-transform:scale(0);}@media (min-width:1281px){#product_area .row:hover .info_box{transform:scale(0);-webkit-transform:scale(0);}#product_area .row:hover .img_box{transform:scale(1);-webkit-transform:scale(1);}}@media (max-width:1280px){#product_area .slick-current .img_box{transform:scale(1);-webkit-transform:scale(1);}}

/* section */
section { padding: 5vw 0; }
section >* { z-index: 3; }
section .title_box {font-size: 19px;font-weight: 600;color: var(--primary);letter-spacing: 1.7px;}
section .entitle_box {font-size: 64px;line-height: 1;font-family: "Source Serif 4", serif;font-weight: 500;letter-spacing: 3.2px;color: var(--complement);}
section .title_box font { text-transform: uppercase; line-height: 130%; letter-spacing: 8px; font-weight: 400; font-size: 39px; }
section .title_box font:last-child { margin-left: 15px; }
section .title_box .page_title { font-weight: 300; font-size: 23px; }
section.bg_box { background: no-repeat 50% / cover; background-attachment: fixed; }
section.bg_box:before , section.bg_box:after { position: absolute; width: 100%; height: 100%; background: var(--secondary); top: 0; left: 0; z-index: 1; content: ""; opacity: .6; }
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; }

/* scrollDown */
#wrap .scrollDown { position: absolute; bottom: 20px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; }
#wrap .scrollDown span { -webkit-animation: antScrollMove 2s forwards linear infinite; animation: antScrollMove 2s forwards linear infinite; }
#wrap .scrollDown span:nth-of-type(1) { position: relative; top: 0; left: 0; }
#wrap .scrollDown span:nth-of-type(2) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; position: absolute; top: 0; left: 0; }
#wrap .scrollDown span:nth-of-type(3) { display: none; position: absolute; top: 0; left: 0; }
@-webkit-keyframes antScrollMove {
  0% { opacity: 0; top: -30px; }
  40% { opacity: 1; top: 0; }
  60%,100% { opacity: 0; }
}
@keyframes antScrollMove {
  0% { opacity: 0; top: -30px; }
  40% { opacity: 1; top: 0; }
  60%,100% { opacity: 0; }
}


/* about_area */
#about_area{padding: 8vw 0 6vw;}
#about_area .workframe {position: relative;width: min(90%, 1300px);}
#about_area .about_top {display: grid;align-items: flex-start;justify-content: space-between;grid-template-columns: 39% 55%;}
#about_area .about_left {w;vertical-align: top;white-space: normal;}
#about_area .about_right {padding-right: 8px;vertical-align: top;white-space: normal;}
#about_area .title_box { display: flex; align-items: flex-end; gap: 28px; margin-bottom: 55px; }
#about_area .area_en {color: var(--primary);font-size: 64px;line-height: 1;font-family: "Source Serif 4", serif;font-weight: 500;letter-spacing: 3.2px;}
#about_area .area_cn {padding-bottom: 6px;font-size: 19px;font-weight: 600;color: var(--primary);letter-spacing: 1.7px;}
#about_area .about_slogan {margin-bottom: 45px;line-height: 1.55;margin-top: 55px;font-size: 35px;font-weight: 600;color: #3c4042;letter-spacing: 3.5px;word-break: keep-all;}
#about_area .article {max-width: 620px;color: #606870;font-size: 16px;line-height: 2.1;letter-spacing: .05em;margin-top: 55px;}
#about_area .article p {margin: 0 0 15px;font-size: 16px;font-weight: 500;color: #3c4042;letter-spacing: 1.6px;line-height: 2;text-align: justify;}
#about_area .about_main_img {margin-left: auto;overflow: hidden;}
#about_area .about_main_img img { width: 100%; height: 100%; transition: transform 1.2s ease; }
#about_area .about_sub_img.js-revealImg {right: -55px;width: 330px;position: absolute;top: 45%;z-index: 4;}
#about_area .about_sub_img img {width: 100%;transition: transform 1.2s ease;aspect-ratio: 22/17;object-fit: cover;}
#about_area .about_right:hover .about_main_img img { transform: scale(1.035); }
#about_area .about_right:hover .about_sub_img img { transform: scale(1.05); }
#about_area .about_bottom {display: flex;align-items: center;margin-top: 110px;}
#about_area .number_box { width: 25%; padding-right: 45px; vertical-align: bottom; white-space: normal; }
#about_area .number_title {margin-bottom: 15px;color: #424a51;font-weight: 500;letter-spacing: .08em;}
#about_area .number_line { width: 25px; height: 1px; margin-bottom: 24px; background: #17497d; }
#about_area .number {display:flex;gap: 10px;}
#about_area .number span, #about_area .number b {color: #17497d;fon;font-size: 64px;font-weight: 200;line-height: 1;letter-spacing: -.02em;font-family: "Arimo", sans-serif;}
#about_area .number_en {margin-top: 22px;color: #1f2c37;font-family: "Source Serif 4",Georgia,serif;font-size: 15px;font-weight: 500;letter-spacing: .02em;}
#about_area .btnBox {margin-right: 7px;}
#about_area .about_more{ width: 25%; padding-left: 30px; vertical-align: bottom; white-space: normal; }
#about_area .about_more a { position: relative; height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 0 24px; border-bottom: 1px solid #d9dde0; color: #28333c; }
#about_area .about_more a span { font-family: "Source Serif 4",Georgia,serif; font-size: 16px; font-weight: 500; letter-spacing: .08em; }
#about_area .about_more a i { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1px solid #17497d; border-radius: 50%; color: #17497d; font-size: 20px; font-style: normal; transition: .35s ease; }
#about_area .about_more a:hover i { background: #17497d; color: #fff; transform: translateX(5px); }
#about_area .js-revealImg { position: relative; overflow: hidden; }
#about_area .js-revealImg:after { content: ""; width: 100%; height: 100%; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; background: -webkit-gradient(linear,right top,left top,color-stop(80%,rgb(247,247,245)),to(rgba(247,247,245,0))); background: linear-gradient(to left,rgb(255 255 255) 80%,rgba(247,247,245,0) 100%); -webkit-transform: translateX(0); transform: translateX(0); }
#about_area .js-revealImg .reveal_img_inner { width: 100%; height: 100%; overflow: hidden; }
#about_area .js-revealImg img { width: 100%; height: 100%; transform: scale(1.12); transition: transform 1.5s cubic-bezier(.22,.61,.36,1); }
#about_area .js-revealImg.show:after { -webkit-animation: gradientLeft 1s forwards linear; animation: gradientLeft 1s forwards linear; }
@keyframes gradientLeft {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
#about_area .js-revealImg.show img { transform: scale(1); }
#about_area .about_sub_img.js-revealImg:after { transition-delay: .22s; }
#about_area .about_sub_img.js-revealImg img { transition-delay: .22s; }


/* list_box */
.list_box .info_box h3 { height: 30px; font-weight: 400; font-size: 18px; }
.list_box .row { margin: 0 15px; display: block; }

/* news_area */
#news_area .list_box .row { padding-bottom: 30px; }
#news_area .list_box .row img { height: 320px; }
#news_area .list_box .row .info_box { padding: 15px; width: calc(100% - 70px); box-shadow: 0 0 10px rgba(var(--black-rgb), .3); left: 20px; bottom: 0; }
#news_area .list_box .row .info_box p * { font-weight: 100; font-size: 14px; }
#news_area .list_box .row .info_box p a { margin-right: 10px; padding: 0 2px; max-width: calc(100% - 82px); height: 23px; z-index: 2; }

/* product_area */
#product_area{z-index: 2;}
#product_area .title_box {color: var(--secondary);}
#product_area .btnBox {display:flex;justify-content: center;}
#product_area .titboxx .box {display: flex;align-items: center;gap: 0 20px;flex-direction: column;margin-bottom: 50px;}
#product_area .titboxx .box * {margin: 0;padding: 0;}
#product_area .morebox {display: flex;align-items: center;gap: 20px;}
#product_area .morebox .btn { padding: 0; display: flex; gap: 12px; }
#product_area .morebox .btn svg { fill: white; }
#product_area .morebox .btn a#product_prev svg { transform: scaleX(-1); }
#product_area .worksnum {position: relative;display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr;width: 60px;height: 60px;font-size: 0;}
#product_area .worksnum:before {content: "";position: absolute;top: 50%;left: 49%;transform: translate(-50%,-50%) rotate(35deg);width: 1px;height: 90%;background: white;}
#product_area .worksnum .current {grid-column: 1;grid-row: 1;font-size: 25px;text-align: center;color: white;font-family: "Arimo",sans-serif;line-height: 1;}
#product_area .worksnum .total {grid-column: 2;grid-row: 2;font-size: 25px;text-align: center;font-family: "Arimo",sans-serif;color: white;line-height: 1;}
#product_area .moree {border-left:1px solid #fff;padding-left: 30px;margin-left: 20px;display: inline-flex;gap: 20px;align-items: center;}
#product_area .moree b{background:#f9f5f0;display: inline-flex;width: 50px;aspect-ratio: 1/1;border-radius: 50px;align-items: center;justify-content: center;}
#product_area .moree:hover b{background:var(--complement)}
#product_area .moree b svg{fill:#fc5230;width: 15px;height: 15px;}
#product_area .moree:hover b svg{fill:white;    animation: arrow-move-right-data-v-1d069175 1s .2s;}

/* product_list */
#product_list{display:grid;grid-template-columns: repeat(4, 1fr);margin-bottom: 70px;gap: 50px;}
#product_list >div * { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
#product_list >div:hover img { transform: scale(1.1); }
#product_list >div:nth-child(even) { transform: translateY(25px);}
#product_list >div img { aspect-ratio: 1/1 }
#product_list >div span {font-size: 14px;font-family: "Source Serif 4", serif;color: var(--triadic2);font-weight: 300;}
#product_list >div .h3 {font-size: 20px;height: auto;text-align: center;}
#product_list >div article {font-size: 15px;height: auto;-webkit-line-clamp: 2;font-weight: 300;margin-top: 10px;}
#product_list >div .info_box {padding: 20px 20px 0;position: relative;text-align: center;}
#product_list >div .info_box svg { right: 45px; width: 15px; height: 15px; fill: white; top: 58px; }
#product_list >div:hover .info_box svg { animation: arrow-move-right-data-v-1d069175 1s .2s; }

/* 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 (min-width: 1281px){
	#news_area .list_box .row:hover .info_box { bottom: 30px; }
	#product_area .row:hover .info_box .line { width: 100%; }
	#book_area .row:hover .info_box { bottom: 0; }
}
@media screen and (max-width: 1440px){
    #about_area .about_slogan{font-size: 30px;}
}
@media screen and (max-width: 1280px){
	#product_area .row .info_box { background: rgba(var(--secondary-rgb), .5); }
	#product_area .row .img_box { opacity: .1; }
}
@media screen and (max-width: 1024px){
	#about_area .about_top { display: block; }
	#about_area .about_left,#about_area .about_right { width: 100%; }
	#about_area .about_left { padding: 0; }
	#about_area .about_right { margin-top: 60px; padding-right: 80px; }
	#about_area .about_bottom { flex-wrap: wrap; gap: 50px 0; margin-top: 100px; }
	#about_area .number_box { width: 33.333%; }
	#about_area .about_more { width: 100%; padding-left: 0; }
	#about_area .about_sub_img.js-revealImg {top: 60%;aspect-ratio: 3/4;}
	#about_area .about_more a { width: 220px; margin-left: auto; }
    #product_list{grid-template-columns:repeat(2, 1fr)}
    section{padding:8vw 0}
}
@media screen and (max-width: 768px){
    #about_area .about_sub_img.js-revealImg{display:none;}
	#about_area { padding: 80px 0 100px; }
	#about_area .title_box { display: block; margin-bottom: 35px; }
	#about_area .area_en { margin-bottom: 12px; font-size: 48px; }
	#about_area .area_cn { padding-bottom: 0; }
	#about_area .about_slogan {margin-bottom: 30px;font-size: 20px;margin-top: 0;}
	#about_area .article {font-size: 15px;line-height: 1.95;margin-top: 0;}
	#about_area .about_right {min-height: auto;margin-top: 15px;padding-right: 0;padding-bottom: 0;}
	#about_area .about_main_img {width: 100%;height: 330px;margin-left: 0;}
	#about_area .about_bottom { margin-top: 60px; }
	#about_area .number_box {width: 45%;padding-right: 25px;}
	#about_area .number { font-size: 54px; }
	#product_area .list_box { margin: auto; width: 400px; }
	#product_area .row .info_box >div { width: calc(100% - 60px); }
	#product_area .row .info_box article { height: 50px; -webkit-line-clamp: 2; }
	#book_area .row img { height: 350px; }
}
@media screen and (max-width: 640px){
    #product_list{gap:20px;}
    #product_list >div span{display:none;}
    #product_list >div .info_box{padding:20px 10px 0}
    #about_area .number span, #about_area .number b{font-size:50px;}
    #about_area .about_bottom{display:grid;grid-template-columns: repeat(2, 1fr);gap: 20px 0;}
    #about_area .btnBox{margin: 0;grid-column: 1 / 3;}
	#about_area .about_main_img {height: 260px;}
	#about_area .about_sub_img { width: 150px; height: 112px; }
	#about_area .number_box {width: 100%;padding-right: 0;display: block;}
	#about_area .number_en { padding-bottom: 18px; }
	#about_area .about_more a { width: 100%; }
}
@media screen and (max-width: 500px){
	#product_area .list_box { width: 100%; }
}