/* section */
section{position:relative;padding:5vw 0 3vw;z-index:3}
section .section_area{padding:0 6vw;display:grid;grid-template-columns:1fr 710px;gap:60px}
section .title_box h3{position:relative;font-family:"Crimson Text",serif;line-height:110%;font-weight:500;font-size:19px;letter-spacing:1px;color:var(--primary);z-index:2;left:-10px}
section .title_box h4{position:relative;font-weight:bold;font-size:34px;color:#373737;z-index:2;border-left:1px solid #d9d9d9;letter-spacing:8px;font-family:'Noto Serif TC',serif;display:inline-block}
section .title_box{padding-bottom:50px;margin-top:40px;position:relative;writing-mode:vertical-rl;margin-bottom:0px}
section .title_box .number{line-height:100%;font-family:'NexaLight';font-size:110px;width:140px;color:#ebeaea;z-index:1;writing-mode:initial;top:-80px;left:-53px}
section .more_tag{padding:20px 27px;background:#292929;border-right:1px #fff solid;z-index:2}
section .more_tag{margin-top:60px;position:relative;display:block;overflow:hidden;padding-right:20px;padding-left:20px;height:25px;width:170PX;font-size:16px;text-align:left;text-decoration:none;-webkit-transition:color .4s ease,background .4s ease;transition:color .4s ease,background .4s ease;cursor:pointer;-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#005960);cursor:pointer;background:#239593}
section .more_tag:hover{color:#fff;background:var(--primary)}
section .more_tag:after,section .more_tag:before{z-index:1;content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:-webkit-transform .4s ease;transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;-webkit-transform-origin:0 50%;transform-origin:0 50%}
section .more_tag:hover:before{-webkit-transform:translateX(110%) skewX(30deg);transform:translateX(110%) skewX(30deg);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}
section .more_tag:before{background:hsl(0deg 0% 90% / 25%)}
section .more_tag:before{z-index:2;-webkit-transform:translateX(-110%) skewX(30deg);transform:translateX(-110%) skewX(30deg)}
section .more_tag font{margin-right:60px;display:inline-block;color:#fff}
section .more_tag span{position:relative;width:34px;height:1px;background:#ffffff;display:inline-block}
section .more_tag span:before,section .more_tag span:after{position:absolute;width:5px;height:1px;background:#ffffff;display:block;top:0;right:0;content:"";-webkit-transform-origin:right;transform-origin:right;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
section .more_tag span:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}

/* about_box */
#about_box{overflow:hidden;padding:5vw 0 3vw}
#about_box:before{position:absolute;width:84%;height:70%;background-color:#f2f2f2;bottom:0;left:0;z-index:0;content:""}
#about_box::after{content:"";position:absolute;width:1020px;height:420px;background-image:url(/images/39/sideBg.jpg);background-size:cover;left:0;top:0;z-index:-1;pointer-events:none}
#about_box #treeCanvas{top:89px;left:299px;-webkit-transform-origin:center;transform-origin:center;display:none}
#about_box .origin{font-family:"Crimson Text",serif;letter-spacing:8px;line-height:160%;font-size:28px;color:#474343;top:35%;left:-90px;-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform-origin:right bottom;transform:rotate(-90deg)}
#about_box .origin:before{position:absolute;width:1px;height:140px;background:#cacaca;bottom:0;left:-20px;content:""}
#about_box .aboutus{font-family:"Crimson Text",serif;line-height:100%;letter-spacing:6px;font-size:118px;color:#f0f0f0;top:0px;right:-8px;-webkit-transform-origin:right top;-webkit-transform:rotate(-90deg);transform-origin:right top;transform:rotate(-90deg);z-index:0}
#about_box .aboutus:after{position:absolute;width:90px;height:360px;background:#e5e5e5;display:block;right:-50px;top:-180px;content:""}
.bgTxt{position:absolute;z-index:1}
.bgTxt.stitle{-webkit-writing-mode:vertical-lr;riting-mode:vertical-lr;font-size:70px}
.bgTxt.title{width:100%;text-align:right;font-size:140px;color:#edf1f3}
#about_box .row{display:inline-block;margin:0}
#about_box .row .img_box{position:relative;text-align:right}
#about_box .row .img_box img{}
#about_box .row .img_box:after{position:absolute;width:23vw;height:19vw;border:1px #dcdcdc solid;display:block;right:30px;top:-40px;z-index:-1;content:""}
#about_box .row.left_box .more_tag{bottom:200px;width:180px}
#about_box .row.right_box{display:grid;grid-template-columns:500px 1fr;gap:80px;margin:0}
#about_box .row.right_box .title_box h4 svg{top:calc((100% - 16px) / 2);right:0}
#about_box .row.right_box .title_box .number{top:-70px;left:-37px}
#about_box .row.right_box .title_box:after{position:absolute;width:82px;height:1px;background:#adadad;display:block;left:-130px;top:160px;content:""}
#about_box .row.right_box article{text-align:left;font-weight:300;line-height:200%;color:#373737;padding:150px 0px 0 0}
#about_box .row.right_box article h2{color:#323232;font-size:28px;font-weight:500;line-height:1.65;letter-spacing:6.5px;margin-bottom:20px;font-family:'Noto Serif TC',serif}
#about_box .row.right_box article p{line-height:180%;font-weight:400;letter-spacing:1px;width:min(100%,420px)}

/* news_area */
#news_area{padding:5vw 0 5vw 0}
#news_area .itemTitleBox{position:relative;padding-top:0px;display:inline-block;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;width:100%}
#news_area section{padding:0vmax 0 4vmax;position:relative}
#news_area .deck01{position:absolute;bottom:210px;left:100px;z-index:-1}
#news_area img.dight{position:absolute;left:150px;z-index:11;min-width:100%;margin-top:0;object-fit:cover;display:none}
#news_area{padding:12vmin 0 2vmax;overflow:initial;position:relative;background-image:url(/images/39/img-news-bg.png);background-repeat:no-repeat;background-position:100% 0%;z-index:10}
#news_area #news_txt{top:2vmax;right:5vmax}
#news_area .news_box{margin:0 auto 0;position:relative;display:flex;z-index:1;flex-wrap:wrap;justify-content:space-between}
#news_area .news_box .leftBox,#news_area .news_box .rightBox{position:relative;width:64%}
#news_area .news_box .rightBox{padding:38px 40px 30px;border-radius:40px;background:#fff;box-shadow:0 3px 7px rgba(0,0,0,0.1)}
#news_area .news_box .leftBox{width:25%;display:flex;justify-content:space-between;flex-direction:column}
#news_area .NbtnBox{display:flex;align-items:center;justify-content:space-between}
#news_area .more_tag{margin-top:0}
#news_area .arrow{display:flex}
#news_area .arrow a{margin:.5px;display:flex !important;justify-content:center;align-items:center;margin:0 5px}
#news_area .arrow a:before{content:"";background-image:url(/images/39/arrow-left.png);background-size:cover;width:50px;height:50px}
#news_area .arrow a.next{-webkit-transform:scaley(-1);transform:scaley(-1)}
#news_area .tabs_box{margin-top:0px}
#news_area .tabs_box .tabs_btn .newsList{display:flex;flex-direction:column;align-items:flex-start;position:relative;margin-bottom:10px;justify-content:flex-start;border-bottom:1px solid #ded6d6;padding:0 0 10px 0}
#news_area .tabs_box .tabs_body{width:calc(100% - 0px)}
#news_area .tabs_box .tabs_body .news_list{display:flex;flex-wrap:wrap}
#news_area .tabs_btn .newsList{display:flex;flex-direction:column;align-items:flex-start}
#news_area .tabs_btn .newsList > li:not(:first-child){border-top:1px solid rgba(0,0,0,0.2)}
#news_area .tabs_btn a{padding:15px 20px 14px 0px;font-size:20px;letter-spacing:1px;color:#383838;font-weight:500;display:block;width:180px}
#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{width:calc((100% / 1) - 0px);position:relative}
#news_area .tabs_body .tab_info .items{display:flex;align-items:center;border-bottom:1px solid #ded6d6;padding:10px 0 20px 0;justify-content:space-between}
#news_area .tabs_body .tab_info .items .Img{padding-bottom:20px}
#news_area .tabs_body .tab_info .items .f_aitems_left{width:76px}
#news_area .tabs_body .tab_info .items .f_aitems_left .year{display:flex;align-items:center;gap:5px;justify-content:space-between}
#news_area .tabs_body .tab_info .items .f_aitems_left .year font{font-size:19px;padding-bottom:0;position:relative}
#news_area .tabs_body .tab_info .items .f_aitems_left font{font-size:47px;line-height:130%;position:relative;font-family:"Crimson Text",serif}
#news_area .tabs_body .tab_info .items .f_aitems_left .year font:nth-child(1)::after{content:"";display:block;width:10px;height:2px;background:linear-gradient(to right,#9f9f9f,#9f9f9f);position:absolute;top:50%;right:0;transform:translate(140%,-50%)}
#news_area .tabs_body .tab_info .category{padding:0px 10px;background:var(--triadic2);color:var(--triadic1);line-height:210%;font-weight:500;font-size:16px;letter-spacing:1px;font-family:'Noto Serif TC',serif}
#news_area .f_aitems_end{display:flex;align-items:center;margin:8px 0px 0;justify-content:space-between}
#news_area .f_aitems_right{position:relative;width:calc(100% - 100px)}
#news_area .tabs_body .tab_info .time{font-size:14px;display:flex;flex-direction:row}
#news_area .tabs_body .tab_info .time font.m_txt{color:#19a8de;font-weight:500;font-family:'Kanit';margin-right:10px;line-height:140%;font-size:19px}
#news_area .tabs_body .tab_info .time font.d_txt{width:20px;grid-area:time_d;color:var(--dark)}
#news_area .tabs_body .tab_info h3{height:auto;font-weight:500;font-size:20px;line-height:150%;width:calc(100% - 100px);font-family:'Noto Serif TC',serif;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}
#news_area .tabs_body .tab_info .plusArrow{position:absolute;width:38px;height:38px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:50%;border:1px solid rgb(169 169 169 / 50%);right:18px;top:48%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
#news_area .tabs_body .tab_info .plusArrow::before,#news_area .tabs_body .tab_info .plusArrow::after{content:"";display:block;background-color:#474747;transition:all 0.5s}
#news_area .tabs_body .tab_info .plusArrow::before{width:15px;height:1px}
#news_area .tabs_body .tab_info .plusArrow::after{width:1px;height:15px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1}
#news_area .tabs_body .tab_info article{height:50px;font-weight:300;font-size:14px;color:#818181;-webkit-line-clamp:2;margin:6.5px 0}
#news_area .btn,#book_area .list_box ul li .item .info_box .btn{padding:0px 0px;width:140px;height:45px;margin:0;display:flex;justify-content:center;border:1px var(--black) solid;background-color:#fff}
#news_area .tabs_box .tabs_btn .moreBtn a{font-weight:400;color:#fff;font-size:14px;line-height:50px;padding:0 20px}
#news_area::after{content:"";width:790px;height:230px;position:absolute;bottom:0;left:0;background:#f7f7f7;display:block;background-image:url(/images/39/img-n-01.png)}
#news_area::before{position:absolute;inset:0;content:"";background-image:url(/images/39/dot_bg.png);background-repeat:repeat;background-position:5px 2px;opacity:0.08}
#news_area .btn svg{margin:0}


/* picture_box */
#picture_box .list_box a{display:block}
#picture_box .list_box a img{width:38vw;height:550px}
#picture_box .list_box:nth-child(2) a img{margin-left:auto}

/* productBox */
#productBox .left_box{padding-left:160px;width:300px;display:inline-block}
#productBox .left_box:before{position:absolute;width:100px;height:1px;background:#999;display:block;top:20px;left:-40px;content:""}
#productBox .left_box .title_box{margin-bottom:90px;padding-bottom:100px}
#productBox .left_box .title_box:after{position:absolute;width:90px;height:2px;background:#1e1e1e;display:block;bottom:0;left:0;content:""}
#productBox .left_box .title_box .number{top:-75px;left:-45px}
#productBox .left_box .title_box svg{width:143px;height:92px;top:-770px;left:-130px}
#productBox .right_box{margin-left:30px;width:calc(100% - 580px);display:inline-block}
#productBox .right_box ul li .list_box{margin:0 20px;padding:0 0 205px}
#productBox .right_box ul li .list_box .img_box{overflow:hidden;margin:0 0 15px}
#productBox .right_box ul li .list_box .img_box:before{width:calc(100% - 22px);height:calc(100% - 22px);top:10px;left:10px;z-index:2;opacity:0}
#productBox .right_box ul li .list_box .img_box font.abso_box{padding:8px 0;width:145px;background:#fff;display:block;text-align:center;font-weight:300;color:#555;bottom:-50px;left:calc((100% - 145px) / 2)}
#productBox .right_box ul li .list_box .info_box{padding:25px 20px 40px;width:calc(100% - 40px);background:url(/images/39/img-productBg.jpg) no-repeat 50%;bottom:40px;left:0}
#productBox .right_box ul li .list_box .info_box h5{text-align:center}
#productBox .right_box ul li .list_box .info_box h5 font{height:35px;border-bottom:1px #595959 solid;display:-webkit-inline-box;font-weight:300;line-height:45px;font-size:21px;color:#222}
#productBox .right_box ul li .list_box .info_box p{margin-top:30px;text-align:center;font-weight:300;color:#555}
#productBox .right_box ul li .list_box .info_box .more_icon{position:absolute;width:55px;height:55px;background:#fff;box-shadow:0 0 10px rgb(0 0 0 / .2);border-radius:50%;display:block;bottom:-25.5px;left:calc((100% - 55px) / 2);opacity:0;z-index:3;-webkit-transform:rotate(135deg);-webkit-transition-duration:.2s;transform:rotate(135deg);transition-duration:.2s}
#productBox .right_box ul li .list_box .info_box .more_icon:before,#productBox .right_box ul li .list_box .info_box .more_icon:after{position:absolute;width:30px;height:2px;background:#777;display:block;top:calc((100% - 2px) / 2);left:calc((100% - 30px) / 2);content:""}
#productBox .right_box ul li .list_box .info_box .more_icon:after{width:2px;height:30px;top:calc((100% - 30px) / 2);left:calc((100% - 2px) / 2)}
#productBox .right_box ul li:nth-child(2n) .list_box{padding:165px 0 0 0}
#productBox .right_box ul li:nth-child(2n) .list_box .info_box{top:0;bottom:auto}
#productBox .right_box ul li:nth-child(2n) .list_box .img_box{margin:15px 0 0}
#productBox .right_box ul li.slick-current .list_box .img_box:before{opacity:.4}
#productBox .right_box ul li.slick-current .list_box .img_box font.abso_box{bottom:0}
#productBox .right_box ul li.slick-current .list_box .info_box .more_icon{opacity:1;-webkit-transform:rotate(0);transform:rotate(0)}
#productBox{padding:3vw 0 3vw;position:relative;overflow:hidden}
#productBox::before{content:"";display:block;background:url(/images/39/img-ad-bg.png) no-repeat;width:815px;height:996px;position:absolute;bottom:0;left:-120px;z-index:0}

@media (max-width: 1560px) {
    #news_area::after {content: "";width: 440px;height: 270px;}
}

@media screen and (max-width: 1440px) {
    #about_box .row.right_box article{padding:120px 0px 0 0}
	#about_box .row.right_box .title_box h4 svg{right:30px;opacity:.5}
	#news_area .itemTitleBox .title_box{margin-bottom:10px}
	#news_area .news_box{width:88%}
	#news_area .news_box .rightBox{width:66%}
}

@media screen and (max-width: 1366px) {
    section .section_area{grid-template-columns:1fr 630px}
	#about_box .row.right_box{grid-template-columns:390px 1fr}
}

@media screen and (min-width: 1281px) {
    #news_area .tabs_body .tab_info .items:hover .more .arrowWrap::before,.infoArea .leftBox:hover .arrowWrap::before{width:36px;height:36px;top:calc(50% - 18px);right:0px;background-color:rgb(223 223 223 / 70%);border:1px solid rgb(223 223 223 / 70%)}
	#news_area .tabs_body .tab_info .items:hover .more .arrowWrap .arrow,.infoArea .leftBox:hover .more .arrow{animation:moreArrow 1s infinite}
	#news_area .bg_box{width:860px}
	#news_area .tab_info li:hover .btn,#book_area .list_box ul li:hover .item .info_box .btn{scale:1;background-color:var(--black);color:#fff}
	#news_area .tab_info li:hover .btn svg{fill:#fff}
	#productBox .right_box ul li:hover .list_box .img_box:before{opacity:.4}
	#productBox .right_box ul li:hover .list_box .img_box font.abso_box{bottom:0}
	#productBox .right_box ul li:hover .list_box .info_box .more_icon{opacity:1;-webkit-transform:rotate(0);transform:rotate(0)}
}

@media screen and (max-width: 1280px) {
	#news_area .news_box{padding:0rem 0 4rem 0vw}
	#news_area .news_box{padding:1.5rem 3vw 1rem 3vw}
	#news_area .tabs_box .tabs_btn{width:100%}
	#news_area .title_box h2:before{left:50%}
	#news_area .title_box .more_btn{bottom:30px;left:50%;padding:10px 15px;font-size:13px}
	#news_area .title_box article{margin-top:1rem;margin-bottom:1.75rem}
	#news_area .title_box article br{display:none}
	#news_area .tabs_body .tab_info .items{width:auto}
	#news_area:after{display:none}
	#news_area .tabs_body .tab_info .time font.y_txt{font-size:40px}
	#news_area .tabs_body .tab_info .time font.m_txt{font-size:13px}
	#news_area .f_aitems_end{margin:0}
	#news_area .tabs_body .tab_info .category{font-size:13px}
	#news_area .tabs_body .tab_info h3{margin-top:16px;font-size:20px}
	#picture_box{margin:0 0 0 auto;width:calc(100% - 550px)}
	#picture_box .list_box a img{width:100%}
	#productBox .left_box{width:auto;display:block}
	#productBox .left_box .title_box{margin-bottom:70px;padding-bottom:40px}
	#productBox .left_box .title_box svg{top:140px}
	#productBox .left_box .more_tag{position:absolute;top:0;right:70px}
	#productBox .right_box{margin-left:5%;width:90%}
}

@media screen and (max-width: 1160px) {
    section .title_box{writing-mode:lr;padding-bottom:20px;margin-top:0}
	section .title_box h4{font-size:27px;border-left:0px solid #d9d9d9;letter-spacing:3px;margin-bottom:10px}
	section .title_box h3{left:0;letter-spacing:2px;font-size:24px}
	#news_area .tabs_box{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:20px}
	#news_area .tabs_box .tabs_btn .newsList{display:flex;justify-content:flex-start}
	#news_area .tabs_box .tabs_body{width:calc(100% - 0px)}
	#news_area .tabs_body .tab_info li{width:calc((100% / 1) - 0px)}
	#news_area .NbtnBox{margin-top:40px}
	#about_box .section_area{padding-top:7vw;grid-template-columns:1fr;gap:10px}
	#about_box .row.left_box{width:100%}
	#about_box .row.right_box{gap:10px;display:flex;flex-direction:column-reverse}
	#about_box .row.right_box article h2{font-size:23px}
	#about_box .row.right_box .title_box .number{top:-50px;left:auto;right:80px}
	#about_box .row.right_box .title_box h4 svg{display:none}
	#about_box .row.right_box article{padding:30px 0px 0 0}
	#about_box .row.right_box .title_box:after{display:none}
	#about_box{padding:4vw 0 8vw}
	#about_box .row.right_box article p{width:100%}
	#about_box:before{width:100%}
}

@media screen and (max-width: 1024px) {
    #news_area .tabs_box ul{margin-bottom:0.55rem}
	#news_area:before{display:none}
	#news_area .news_box{display:flex;flex-direction:column}
	#news_area .news_box .leftBox{width:calc(100% - 0px);padding:0}
	#news_area .news_box .rightBox{margin-top:20px;width:calc(100% - 40px);padding:0px 20px 30px}
	#picture_box{width:calc(100% - 490px)}
}

@media screen and (max-width: 768px) {
    #news_area{padding:0;background-image:none}
	#news_area img.dight{margin-top:-30px}
	#news_area .f_aitems_end{margin-bottom:5px;width:calc(100% - 0px)}
	#news_area .btn,#book_area .list_box ul li .item .info_box .btn{width:110px;height:45px}
	#news_area .tabs_body .tab_info h3{width:calc(100% - 80px);margin-top:9px;font-size:17px}
	#news_area .tabs_body .tab_info .items{padding:10px 0 10px 0}
	#news_area .tabs_body .tab_info .items .f_aitems_left font{font-size:36px}
	#news_area .tabs_body .tab_info .items .f_aitems_left font:nth-child(1)::after{margin:0 auto}
	#news_area .tabs_body .tab_info .items .f_aitems_left{width:61px}
	#news_area .tabs_body .tab_info .items .f_aitems_left .year font{font-size:15px}
	#news_area .f_aitems_right{width:calc(100% - 72px);padding:10px 0}
	#about_box .origin{display:none}
	#about_box .row.left_box .more_tag{bottom:30px}
	#about_box .row .img_box:after{width:calc(95% - 22px);height:calc(100% - 22px);right:10px;bottom:10px;opacity:.4}
	#about_box .row.right_box{margin:0}
	#about_box .row.right_box .title_box .number{top:-77px}
	#picture_box{margin:8vw auto 0;width:90%}
	#picture_box .list_box a img{height:220px}
	#productBox .left_box{padding-left:5%}
	#productBox .left_box .title_box .number{top:-5px;left:auto;right:-20px}
	#productBox .left_box .title_box svg{display:none}
	#productBox .left_box .more_tag{top:100px;right:5%}
	#productBox .left_box:before{width:0}
}

@media screen and (max-width: 640px) {
    section .title_box .number{font-size:70px;top:-30px;left:-23px}
	section .more_tag{padding:15px 20px}
	section .more_tag font{margin-right:80px}
	#news_area .btn,#news_area .tabs_body .tab_info li:before{display:none}
	#news_area .tabs_body .tab_info h3{width:calc(100% - 0px)}
	#news_area .tabs_body .tab_info .plusArrow{display:none}
	#news_area .f_aitems_end{width:calc(100% - 0px)}
	#news_area .tabs_btn .newsList{margin-bottom:0;display:flex;flex-direction:row;justify-content:flex-start}
	#news_area .tabs_btn a{font-size:17px;padding:15px 20px 14px 0px;width:auto}
	#news_area .tabs_btn .newsList > li:not(:first-child){border-top:none}
	#about_box .aboutus{display:none}
	#about_box .row.right_box .title_box .number{right:0}
}

@media screen and (max-width: 600px) {
    #productBox .right_box ul {margin: auto;width: 330px;}
}

@media screen and (max-width: 400px) {
    #productBox .left_box .title_box:after {width: 0;}
    #productBox .right_box ul {width: 100%;}
}