/* index.less */
@media (min-width:1281px){
	#product_area .row:hover .info_box{}
	#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);}
}

.more_btn{margin-top:0px;}
.more_btn a{position:relative;width: 170px;padding: 20px 30px;display:inline-block;background-color: var(--secondary);overflow: hidden;display: flex;align-items: center;justify-content: space-between;}
.more_btn font{text-align:left;font-weight:500;text-transform:uppercase;letter-spacing:3px;color:#ffffff;font-family: 'Montserrat', sans-serif;}
.more_btn.white:hover font{
    letter-spacing: 3px;
}
.more_btn.white a,.more_btn.white font{letter-spacing:2px;font-size:12px;position:relative;-webkit-writing-mode:inherit;-ms-writing-mode:inherit;writing-mode:inherit;border-radius:40px}
.more_btn.white .arrow{position:relative;display:inline-block;vertical-align:middle;width:9px;height:9px;margin-right:-5px}
.more_btn.white .arrow:after,.more_btn.white .arrow:before{content:"";position:absolute;top:50%;left:0;z-index:1;width:100%;height:1px;margin-top:-0.5px;background-color: #fff;}
.more_btn.white .arrow:after{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
.more_btn.white:hover .arrow:after{-webkit-transform: rotate(270deg);transform: rotate(270deg);}

/* section */
section { padding: 5vw 0; }
section >* { z-index: 3; }
section .title_box{margin-bottom:20px}
section .title_box font{text-transform:uppercase;line-height:120%;letter-spacing:2.4px;font-size: 45px;font-weight: bold;color: #464646;margin-bottom: 20px;}
section .title_box font.txt_primary_5{
    color: var(--primary);
    margin-left: 10px;
}
section .title_box h2{font-size: 23px;text-align:left;line-height:120%;font-weight: 400;color: #464646;position:relative;font-family:'Montserrat',sans-serif;}
section.bg_box {background: no-repeat 50% / cover;background-attachment: fixed;}

/* about_area */
section .track{position:absolute;bottom:-30px;left:-40px;z-index:1}
section .track p{font-weight:700;font-size:100px;margin:0;text-transform:uppercase;letter-spacing:6px;line-height:1;will-change:transform;color:#ededed;font-family:'Montserrat',sans-serif}
#slognBox .leftBox{width: 460px;}
#slognBox{position:relative;padding:5vw 0 14vw}
#slognBox .title_box{position:relative;}
#slognBox{padding:90px 0 360px;background-image: url(/images/39/img-ab-bg.png);background-size: cover;background-repeat: no-repeat;z-index: 0;}
#slognBox .workframe{
    display: flex;
    justify-content: flex-end;
}
#slognBox .title_box h2{font-size: 68px;text-align:left;line-height:120%;font-weight:700;color: var(--primary);position:relative;font-family:'Montserrat',sans-serif;}
#slognBox .title_box font{text-transform:uppercase;line-height:120%;letter-spacing:2.4px;font-size:28px;font-weight:600;color:var(--primary);}
#slognBox .deck03{position:absolute;z-index:0}
#slognBox .deck03 img{width: 100%;}
#slognBox .deck03{bottom: -80px;right: 0;z-index: 3;}
#slognBox .info_item{text-align:left;width: 100%;}
#slognBox .img_item{margin-bottom:10px;order:1;position:absolute;left: 210px;top: 100px;width: 990px;z-index: -1;}
#slognBox .img_item img{width: 100%;}
#slognBox .info_item article{margin-bottom: 30px;margin-top: 35px;line-height:180%;letter-spacing:0.5px;font-weight:300;color:#000;width: 100%;}
#slognBox .info_item article .info h3{padding: 0px 0 30px 0;font-size: 20px;color: var(--black);font-weight: 500;letter-spacing:0.5px;line-height:160%}
#slognBox .info_item article .info h3 span{color: var(--primary);font-size:26px;font-weight: 600;}
#slognBox .info_item article .info p{width:100%;line-height:200%;letter-spacing:0.5px;font-weight: 300;font-size: 18px;color: #000;}
#slognBox .rightBox{max-width: 600px;height: 590px;/* margin-left:auto; *//* margin-right:auto; */width: calc(100% - 600px);position:relative;left: 0px;top: 0;position:absolute;z-index: 0;}
#slognBox .processList .ImgBox{position:absolute;top:0px;right: 230px;z-index:5;width:120px;-webkit-transform-origin:bottom center;transform-origin:bottom center;pointer-events:none;}
#slognBox .processList .listItem .Img{display:flex;/* -webkit-box-pack:center; *//* -webkit-box-align:center; *//* width: 130px; *//* aspect-ratio: 1/1; *//* height: 100%; *//* border-radius:50%; *//* -webkit-box-shadow:0 4px 10px rgb(0 0 0 / 8%); *//* box-shadow:0 6px 10px rgb(0 0 0 / 8%); *//* border:10px solid rgb(255 255 255); *//* -webkit-transition:all 0.4s ease-in-out; *//* transition:all 0.4s ease-in-out; */flex-direction: row;align-items: center;}
#slognBox .processList .listItem .Img .title{position:absolute;bottom: 35px;right: 75%;-webkit-transform: translateY(-50%);transform: translateY(0%);letter-spacing:0.5px;font-weight:400;width: 300px;display:flex;flex-direction: column;height: 70px;align-items: flex-start;z-index: -1;}
#slognBox .processList .listItem .Img .title:before{position:absolute;width:100%;height: 1px;background:#8d8d8d;display:block;bottom: -10px;left:0;content:""}
#slognBox .processList .listItem .Img .title .titleEn{letter-spacing:0.5px;font-size: 26px;font-weight:600;color: var(--secondary);}
#slognBox .processList .listItem .Img .title .titleTw{font-size:17px;color: #2c2c2c;font-weight:500;letter-spacing:0.5px;}

#slognBox .processList .listItem:nth-child(1) .ImgBox{
}
#slognBox .processList .listItem:nth-child(1) .Img{}
#slognBox .processList .listItem:nth-child(2) .ImgBox{top: 35%;}
#slognBox .processList .listItem:nth-child(2) .Img{}
#slognBox .processList .listItem:nth-child(3) .ImgBox{top: 70%;}
#slognBox .processList .listItem:nth-child(3) .Img{}

#slognBox .processList .listItem .Img img{object-fit:cover;width: 130px;aspect-ratio: 1 / 1;height: 100%;border-radius: 50%;-webkit-box-shadow: 0 4px 10px rgb(0 0 0 / 8%);box-shadow: 0 6px 10px rgb(0 0 0 / 8%);border: 10px solid rgb(255 255 255);-webkit-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
#slognBox .processList .listItem.active .Img img:nth-child(2),#slognBox .processList .listItem:hover .Img img:nth-child(2){opacity:1;visibility:visible}
#slognBox .processList .listItem.active .Img::before,#slognBox .processList .listItem:hover .Img::before{opacity:1}
#title_boxwow01{margin-bottom:30px;width:100%}
#slognBox .leftBox .slognBtnItem{display:flex}
#slognBox .leftBox .slognBtnItem .slognBtn{opacity:1;padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
#slognBox .leftBox .slognBtnItem .slognBtn> a:hover{color:var(--secondary)}
#slognBox .leftBox .slognBtnItem .slognBtn .btn{width:100px;height:110px;border-radius:50%;position:relative;background:-webkit-gradient(linear,left top,right top,from(var(--secondary)),to(var(--complement)));background:linear-gradient(to right,var(--secondary),var(--complement));display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
#slognBox .leftBox .slognBtnItem .slognBtn .btn:hover{background-color:var(--secondary)}
#slognBox .leftBox .slognBtnItem .slognBtn .btn span{color:#000304;border:4px solid #fff;width:100px;height:90px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;background-color:#fff;font-size:18px}
#slognBox .leftBox .slognBtnItem .slognBtn .btn::before{content:"";position:absolute;background-image:url("/images/39/arrowLink.png");background-repeat:no-repeat;background-position:center;background-size:contain;z-index:1;width:20px;height:17px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);top:50%;left:50%}
#slognBox .leftBox .slognBtnItem .slognBtn .btn::after{content:"";position:absolute;border-radius:50%;top:0;left:0;bottom:0;right:0;z-index:-1;background-color:#bdbdbd;-webkit-animation:dotAni 1.2s infinite ease-out forwards;animation:dotAni 1.2s infinite ease-out forwards}
@-webkit-keyframes dotAni{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
80%{opacity:0.1;-webkit-transform:scale(1.3);transform:scale(1.3)}
100%{opacity:0;-webkit-transform:scale(1.4);transform:scale(1.4)}
}@keyframes dotAni{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
80%{opacity:0.1;-webkit-transform:scale(1.3);transform:scale(1.3)}
100%{opacity:0;-webkit-transform:scale(1.4);transform:scale(1.4)}
}
#slognBox .info_item .more_btn{
    right: 0;
}

/* list_box */
.list_box .info_box h3 {font-weight: 400;font-size: 18px;color: #1b1b1b;letter-spacing: 0.5px;}
.list_box .row {margin: 0 15px;display: block;}

/* news_area */
#news_area .workframe{
    width: 100%;
}
#news_area .workframe .title_box{width: 880px;margin: 0 195px 0 auto;}
#news_area .workframe .list_box{width: 880px;margin: 0 220px 0 auto;}
#news_area:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 1200px;
	background: url(/images/39/img-news-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 0;
	bottom: 0;
}
#news_area .NewsImg img{
    position: absolute;
    left: 0;
    top: -150px;
    animation-name: fish;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-duration: 2s;
    z-index: -1;
}
#news_area li .info_box{padding: 35px 30px;margin: 25px;padding-bottom: 0;background-color: rgb(255 255 255 / 70%);}
#news_area li .info_box p font{font-weight: 500;margin-bottom: 30px;}
#news_area li .info_box p font span{
    vertical-align: baseline;
    color: #000;
    font-weight: 500;
    margin-right: 5px;
}
#news_area li .info_box h3{
	position: relative;
	font-weight: bold;
	font-size: 24px;
	color: #1b1b1b;
	letter-spacing: 0.5px;
	padding-bottom: 55px;
	overflow: hidden;
	height: 77px;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	}
#news_area li .info_box h3:before{
    content: '';
    height: 4px;
    width: 20px;
    background-color: #999999;
    position: absolute;
    bottom: 0;
}
#news_area li .info_box article{
    font-size: 14px;
    font-weight: 300;
    color: #252525;
    letter-spacing: 0.5px;
    padding-top: 20px;
    margin-bottom: 80px;
    overflow: hidden;
    height: 72px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
#news_area li .info_box .line{
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 70px;
    background-color: #dddad8;
}
#news_area li .info_box .more_btn{
}
#news_area li .info_box .more_btn font{
    color: #000;
    font-size: 14px;
}
#news_area .more_btn.white .arrow:after, #news_area .more_btn.white .arrow:before{
    background-color: #000;
}
#news_area .more_btn a{
    width: 100%;
    background-color: unset;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
}
#news_area .list_box li:hover .more_btn .arrow:after{-webkit-transform: rotate(270deg);transform: rotate(270deg);}
#news_area .list_box li:hover .more_btn font{
    letter-spacing: 3px;
}
#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; }

@keyframes fish{0%{transform-origin:right bottom;transform:rotate(-1deg)}
100%{transform-origin:right bottom;transform:rotate(1deg)}
}

/* product_area */
#product_area .title_box{display: flex;flex-direction: column;align-items: center;}
#product_area .title_box p{
}
#product_area li {padding: 100px 0;position: relative;}
#product_area li img {height: 455px;object-fit: contain;transform: scale(1);position: relative;}
#product_area li:before{content:'';position: absolute;bottom: 70px;left: 10%;width: 395px;height: 340px;background-image: url(/images/39/img-p-bg.png);background-size: contain;background-repeat: no-repeat;z-index: 0;opacity: 0;}
#product_area li:hover:before{opacity:1;bottom: 100px;}
#product_area li:after{content:'';position: absolute;bottom: 150px;left: 31%;width: 150px;height: 20px;background-image: url(/images/39/img-p-bg2.png);background-size: contain;background-repeat: no-repeat;z-index: 0;opacity: 0;}
#product_area li:hover:after{opacity:1;bottom: 130px;}

#product_area li:hover img{
    transform: scale(1.1) rotate(5deg);
}
#product_area li:hover .info_box{
    transform: translateY(100%);
}
#product_area .row .info_box >div { margin: auto; width: calc(100% - 100px); }
#product_area .row .info_box h3 {text-align: center;}
#product_area .row .info_box .line { margin: 10px 0 30px; width: 50px; height: 1px; background: var(--primary); opacity: .7; }
#product_area .row .info_box article {font-weight: 400;font-size: 18px;text-align: center;color: #1b1b1b;letter-spacing: 0.5px;}
#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 .row .info_box{transform: translateY(0%);margin-top: 50px;}
#product_area .slick-prev:before{content:'';position:absolute;background-image:url(/images/39/img-prev.png);background-size:contain;background-repeat:no-repeat;width: 35px;aspect-ratio:1 / 1}
#product_area .slick-next{
    right: 13px;
}
#product_area .slick-next:before{content:'';position:absolute;background-image:url(/images/39/img-next.png);background-size:contain;background-repeat:no-repeat;width: 35px;aspect-ratio:1 / 1}


#product_area:after{content: '';background-image: url(/images/39/img-pp01.png);position:absolute;background-size: contain;background-repeat: no-repeat;width: 200px;aspect-ratio: 9/16;top: 40px;left: 0;z-index:0;}
#product_area:before{content: '';background-image: url(/images/39/img-pp02.png);position:absolute;background-size: contain;background-repeat: no-repeat;width: 140px;aspect-ratio: 9/16;bottom: 350px;right: -30px;z-index:0;}


/* 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:1441px){
}

@media screen and (max-width: 1440px){
	#slognBox .img_item{
    width: 650px;
    top: 110%;
    left: 50%;
    transform: translate(-50%, -50%);
}
	#news_area .workframe .title_box{margin: 0 65px 0 auto;}
	#news_area .workframe .list_box{margin: 0px 90px 0 auto;}
}

@media screen and (min-width: 1281px){
	#about_area .d_flex { align-items: center; }
	#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: 1280px){
	#slognBox .img_item{
    width: 500px;
    top: 130%;
}
	#slognBox .rightBox{
    left: 10%;
}
	#slognBox .processList .listItem .Img{
    width: 100px;
}
	#slognBox .processList .listItem .Img .title{
    width: 280px;
}
	#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; }
}
@media screen and (max-width: 1180px){
	#slognBox .rightBox{
    left: 30%;
}
}
@media screen and (max-width: 1024px){
	#slognBox{
    padding-bottom: 0px;
}
	#slognBox .workframe{
    display: flex;
    flex-direction: column-reverse;
}
	#slognBox .img_item{position:relative;left:0;top:0;width:100%;margin:0;transform: unset;}
	#slognBox .leftBox{width:100%;padding-left:0;display:flex;flex-direction:column;margin-bottom:30px}
	#slognBox .rightBox{width: 100%;max-width:100%;left:0;top:0;position:relative;height: 460px;}
	#slognBox .info_item .more_btn{
    position: relative;
    margin-bottom: 50px;
}
	#slognBox .info_item article{
    margin: 15px 0;
}
	#slognBox .processList .listItem .Img{position: relative;}
	#slognBox .processList .ImgBox{
    left: 0;
    position: relative;
}
	#slognBox .processList .listItem{
    margin-bottom: 20px;
}
	#slognBox .processList .listItem .Img .title{
    position: unset;
    margin-left: 20px;
}
	#slognBox .processList .listItem .Img .title:before{
    display: none;
}
	#slognBox .processList .listItem .Img .title .titleEn{
    width: 300px;
    font-size: 23px;
}
	#slognBox .deck03{
    bottom: 340px;
    width: 240px;
    right: -70px;
}
	#news_area .workframe .title_box{
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
	#news_area .workframe .list_box{
    width: 90%;
    margin: 0 auto;
}
	#news_area .NewsImg img{
    display: none;
}
	#news_area:before{bottom: -50%;}
	#about_area .img_item { width: 59vw; margin: 0 0 0 auto; order: inherit; }
	#about_area .img_item:before { border: 0; background: rgba(var(--secondary-rgb), .6); top: 0; right: 0; z-index: 2; }
	#about_area .info_item { margin-top: -80px; z-index: 4; }
}
@media screen and (max-width: 768px){
	#about_area .img_item { width: 80vw; height: 50vw; }
	#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; }
	#slognBox .title_box h2{
    font-size: 38px;
}
	#slognBox .title_box font,#slognBox .info_item article .info h3 span{
    font-size: 20px;
}
	section .title_box font{
    font-size: 32px;
}
	#product_area:after{
    left: -150px;
    width: 300px;
}
	#product_area:before{
    bottom: -50px;
    width: 180px;
    right: -110px;
}
}
@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; }
}
@media screen and (max-width: 500px){
	#product_area .list_box { width: 100%; }
	#product_area li img{
    height: 320px;
}
	#product_area li:before{
    width: 280px;
}
	#product_area li:hover:before{
    bottom: 80px;
}
	#product_area li:after{
    width: 110px;
}
	#product_area li:hover:after{
    bottom: 150px;
}
}