/* wrap */
#wrap .line_box { position: fixed; width: 860px; height: 100vh; border: #f5f5f5 solid; border-width: 0 1px; display: block; top: 0; left: 50%; pointer-events: none; }
#wrap .line_box:before { margin: auto; width: 1px; height: 100vh; background: #f5f5f5; display: block; content: ""; }

/* section */
section {position: relative;padding: 2vmax 0 5vmax;}
section .text_stroke {line-height: 1;font-style: italic;font-weight: bold;font-size: 30vmin;opacity: .6;z-index: 0;right: 0px;top: -100px;-webkit-text-stroke: 0px #000;color: #f3f3f3;-webkit-text-fill-color: #f3f3f3;}
section .title_box h2 {line-height: 1;font-size: 45px;color: transparent;font-weight: 800;}
section .title_box .text:after {background: var(--primary);display: block;bottom: -0.5rem;content: "";display: block;width: 400px;height: 3px;margin-top: 15px;margin-right: auto;}
section .title_box h3 b {font-size: 20px;font-weight: 600;letter-spacing: 1.5px;}
section .title_box h3 svg { width: 34px; height: 25px; fill: #c4c4c4; }
section .title_box .text{letter-spacing: 4.5px;padding-top: 10px;}
section .title_box .morebutton{display: flex;align-items: center;flex-wrap: wrap;}
section .title_box .morebutton i{    font-style: normal;color: var(--primary);margin-left: 10px;}
section .title_box .more_btn {text-align: center;width: 75px;height: 75px;display: inline-flex;justify-content: center;align-items: center;font-size: 25px;position: relative;color: var(--primary);}
section .title_box .more_btn i {font-size: 13px;width: 100px;text-align: center;position: absolute;top: 100%;left: 50%;padding-top: 8px;transform: translate(-50%, 0);color: #bb1b20;font-style: inherit;}
section .title_box .more_btn::before {content: "";width: 100%;height: 100%;display: block;border: 1px solid #d5d5d5;border-radius: 99em;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transition: 0.6s;}
section .title_box .more_btn::after {content: "";width: 90%;height: 90%;display: block;border: 2px solid var(--primary);border-radius: 99em;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #fff;z-index: -1;transition: 0.6s;}
section .title_box .more_btn:hover {color: #fff;}
section .title_box .more_btn:hover::before {transform: translate(-50%, -50%) ScaleX(1);}
section .title_box .more_btn:hover::after {transform: translate(-50%, -50%) ScaleX(-1);background: var(--primary);-webkit-animation: more_hover 0s linear infinite;animation: more_hover 0s linear infinite;}


/* news_area */
#news_area {padding: 6vmin 0 2vmax;}
#news_area .news_box, #book_area .workframe { margin: 0 auto 0; padding: 6rem 3vw 5rem; width: 85vw;   display: flex;justify-content: space-between;align-items: flex-end;}
#news_area .title_box h2 {background: linear-gradient(to right, #222 56%, var(--primary) 0%);-webkit-background-clip: text;background-clip: text;}
#news_area:after {content: '';position: absolute;right: -185px;top: -110px;display: block;width: 465px;height: 430px;background-image: url(/images/00/img-news-bg03.png);background-repeat: no-repeat;background-position: center;background-size: auto;animation: iconRotate 2s ease-in-out both alternate-reverse infinite;z-index: -2;}
@-webkit-keyframes iconRotate {0% {-webkit-transform: rotate(0);transform: rotate(0); }100% {-webkit-transform: rotate(15deg);transform: rotate(15deg); } }

transform: rotate(5deg); } }
#news_area #news_txt {top: 2vmax;right: 5vmax;}
#news_area .tabs_btn a {padding: 5px 0px;margin: 0 10px 0 0px;border-bottom: 1px #646464 solid;font-size: 16px;letter-spacing: 0.5px;font-weight: 500;}
#news_area .tabs_btn .active a { color: var(--primary); border-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;padding: 30px 0 10px;}
#news_area .tabs_body .tab_info .items { margin-right: 60px; }
#news_area .tabs_body .tab_info .items .Img{padding-bottom: 20px;}
#news_area .tabs_body .tab_info .category {padding: 0px 0px 7px 0px;line-height: 1;font-size: 14px;}
#news_area .tabs_body .tab_info .time {width: 117px;grid-template-columns: 22px 47px 40px;grid-template-areas:
"time_y time_m time_d";align-items: center;}
#news_area .tabs_body .tab_info .time font { grid-area: time_y; line-height: 1; }
#news_area .tabs_body .tab_info .time font.m_txt {grid-area: time_m;font-size: 28px;font-weight: bold;}
#news_area .tabs_body .tab_info .time font.d_txt {font-size: 28px;grid-area: time_d;font-weight: bold;display: flex;justify-content: flex-start;}
#news_area .tabs_body .tab_info h3 {height: auto;font-weight: 500;font-size: 17px;-webkit-line-clamp: 2;border-top: 1px solid #d5d5d5;padding-top: 10px;}
#news_area .tabs_body .tab_info article {height: 50px;font-weight: 300;font-size: 14px;color: #818181;-webkit-line-clamp: 2;margin: 15px 0 40px;}
#newDesc{width: 300px;}
.more .atag_item, #keyword_area ul li .item .atag_item{position: absolute;z-index: 10;}
.more b {width: 80px;font-weight: 300;font-size: 13px;color: #767676;font-family: 'Poppins', serif;}
.more .arrowWrap {width: 85px;height: 40px;position: relative;}
.more .arrowWrap::before{content: "";display: block;border-radius: 50%;border: 1px solid #cbcbcb;box-sizing: border-box;position: absolute;top: 0;right: 0;width: 40px;height: 40px;}
.more .arrowWrap .arrow{display: block;height: 1px;background-color: #646464;position: absolute;top: 11.5px;top: calc(50% - 1px);left: 15px;width: 51px;}
.more .arrowWrap .arrow::before{content: "";width: 6px;height: 1px;background-color: #646464;position: absolute;top: calc(50% - 2.5px);right: 0;transform: rotate(45deg);}
.more .arrowWrap .arrow::after{content: "";width: 6px;height: 1px;background-color: #646464;position: absolute;bottom: calc(50% - 3px);right: 0;transform: rotate(-45deg);}
@keyframes moreArrow {0% {transform: translateX(0px);}30% {transform: translateX(5px);}100% {transform: translateX(0px);}}

/* about_area */
.sideImg {position: absolute;z-index: 2;pointer-events: none;}
.imgl1 {top: 580px;left: -30px;width: 350px;}
.imgl1 img {animation: iconRotate 3s ease-in-out both alternate-reverse infinite;}
.imgr1 {top: 400px;right: -10px;width: 340px;}
#setArea {position: relative;padding: 0vmax 0 1vmax 0;background-color: #fff;background-image: url(/images/00/img-ab-bg.jpg);background-position: 50% 100%;background-repeat: no-repeat;}
#about_area{padding: 0vmax 0 0;z-index: 0;}
#about_area:before {position: absolute;width: 100%;height: 100%;top: 0px;left: 0;z-index: 2;content: "";}
#about_area #particles_box { width: 100vw; min-width: 100vw; height: 100%; min-height: 100%; opacity: .6; z-index: 1; }
#about_area #about_txt {top: 0vmax;right: 10vw;z-index: 3;}
#about_area .about_item { z-index: 3; }
#about_area .about_item .title_box h2 { background: linear-gradient(to right, var(--info) 70%, var(--primary) 0%); -webkit-background-clip: text; background-clip: text; }
#about_area .about_box { padding: 0 5vw; }
#about_area .about_box .about_image { padding: 0 5% 5% 0; }
#about_area .about_box:before { position: absolute; width: 100%; height: 78%; background-image: url(/images/00/img_about_bg.jpg); display: block; right: 0; bottom: 0; content: ""; z-index: -1;}
.about_info article{position: relative;padding: 10px 0 0px 0;margin-bottom: 2.5rem;}
.about_info article h5,.about_info article p{text-align: center;}
.about_info article h5{font-size: 36px;padding-bottom: 20px;letter-spacing: 4.5px;font-weight: 300;}
.about_info article:before {background: var(--primary);display: block;content: "";display: block;width: 60px;height: 3px;margin-bottom: 30px;margin-right: auto;}


/* research_area */
#research_area { padding-top: 8vmax; }
#research_area:before { position: absolute; width: 50vw; height: 320px; background: url(/images/00/img_research_bg.jpg) no-repeat 50%; display: block; top: 0; right: 0; content: ""; }
#research_area .title_box h2 { line-height: 1.1; color: var(--info); }
#research_area ul li .img_box img { width: 100%; height: 240px; object-position: 50% 0; }
#research_area ul li .info_box { padding: 30px 0; }
#research_area ul li .info_box h3 { height: 34px; font-size: 20px; }
#research_area ul li .info_box article { height: 51px; font-size: 15px; -webkit-line-clamp: 2; }


/* infoArea */
.infoArea{padding: 0;}
.infoArea .wrap {display: -webkit-box;display: -ms-flexbox;display: flex;max-width: 100%;}
.infoArea .item,.infoArea .Img{overflow: hidden;}
.infoList, .contactBox{width: 100%;}



/* keyword_area */
#keyword_area {padding: 0;background: #f0f0f0;}
#keyword_area .workframe{display: flex;align-items: center;padding: 5rem 0vw;}
#keyword_area .title_box {
    width: 220px;
}
#keyword_area .title_box .text{line-height: 1;font-size: 40px;font-weight: 500;letter-spacing: 1.5px;}
#keyword_area .title_box .text:after{margin-left: 0;}
#keyword_area .slick-slider{
    width: calc((100% / 1) - 220px);
}
#keyword_area ul li{margin: 10px;}
#keyword_area ul li .atag_item{
    z-index: 99;
}
#keyword_area ul li:before { position: absolute; width: calc(100% - 20px); height: calc(100% - 20px); border: 1px rgb(235 235 235 / 48%) solid; border-bottom: 0px;border-left: 0px;top: 20px; left: 0; content: ""; z-index: 10;}
#keyword_area ul li .item p { font-family: 'Poppins', var(--font-family), sans-serif; color: #b6b6b6; }
#keyword_area ul li .contentBox{position: relative;overflow: hidden;}
#keyword_area ul li .contentBox .Img{overflow: hidden;height: 240px;}
#keyword_area ul li .contentBox img{transition: all 0.7s;display: block;width: 100%;height: 100%;object-fit: cover;}
#keyword_area ul li .contentBox .Txt{width: calc(100% - 0px);
    bottom: -20px;
    left: 0px;
    position: absolute;
    padding: 90px 20px 60px;
    background: linear-gradient(rgba(255, 255, 255, 0) 0px, rgba(104, 104, 104, 0) 0%, rgba(0, 0, 0, 0.6) 80%);
    transition: all 0.5s ease-out 0s;}
#keyword_area ul li .contentBox .Txt .step{color: #fff;letter-spacing: 1px;font-size: 18px;}
#keyword_area .slick-prev{left: -25px;}
#keyword_area .slick-next{right: -25px;}
#keyword_area .slick-prev:before,#keyword_area .slick-next:before{color: #f0f0f0;font-family: 'Noto Sans TC';}



/* book_area */
#book_area .workframe{display: flex;align-items: flex-start;}
#book_area .title_box h2,#keyword_area .title_box h2 {background: linear-gradient(to right, #222 100%, var(--primary) 0%);-webkit-background-clip: text;background-clip: text;}
#book_area .title_box .text:after,#keyword_area .title_box .text:after{background: #b9b9b9;width: 40px;}
#book_area .row img { height: 320px; transition: all 0.7s;display: block;width: 100%;object-fit: cover;}
#book_area .over_hid::before {content: "";position: absolute;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;background-color: #000;background: linear-gradient(to bottom,#ffffff00 0,#686868 50%, #000 80%);opacity: 0.3;pointer-events: none;}
#book_area .row .info_box {padding: 20px 10px 20px;width: calc(100% - 0px);bottom: -20px;left: 0;app-region: drag;display: flex;justify-content: space-between;height: 70px;align-items: center;}
#book_area .row .info_box h3{-webkit-line-clamp: 2;height: 100%;width: 230px;font-weight: 400;font-size: 20px;}
#book_area .list_box li .img_scale{display: flex;flex-direction: column;}
#book_area .list_box li:nth-child(2n) .img_scale{
    flex-direction: column-reverse;}

@media screen and (max-width: 1680px) and (min-width: 1551px){
	.workframe { width: 1300px; }
}
@media screen and (max-width: 1550px) and (min-width: 1501px){
	.workframe { width: 1200px; }
	#book_area .row img{height: 290px;}
}
@media screen and (min-width: 1501px){
	#about_area .about_box { padding: 0 6rem; }
}
@media screen and (max-width: 1660px){
	section .title_box h2{font-size: 44px;}
	#news_area .news_box, #book_area .workframe, #keyword_area .workframe{width: 92vw;}
}
@media screen and (min-width: 1281px){
	#about_area .about_box .about_info { padding-right: 10vw; }
	#research_area .workframe { padding: 0 2%; }
	.more:hover  .arrowWrap::before,#news_area .tabs_body .tab_info .items:hover .more .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%);}
	.more:hover .arrowWrap .arrow,#news_area .tabs_body .tab_info .items:hover .more .arrowWrap .arrow{animation: moreArrow 1s infinite;}
	#book_area .row:hover .info_box { bottom: 0; }
	#keyword_area ul li:hover .contentBox img, #book_area .list_box li:hover img{-webkit-transform: scale(1.05);
    transform: scale(1.05);}
	#keyword_area ul li:hover .contentBox .Txt{-webkit-transform: translateY(-20px); transform: translateY(-20px);}
}
@media screen and (max-width: 1440px){
	.imgl1 {top: 490px;left: -80px;width: 350px;}
#newDesc{width: auto;}
.imgr1 {top: 300px;right: -60px;width: 340px;}
section {position: relative;padding: 2vmax 0 2vmax;}

}
@media screen and (max-width: 1280px){
	#news_area .news_box { padding: 4rem 0 4rem 3vw; width: 98vw; }
	.about_info article{padding-bottom: 20px;}
    .sideImg{display: none;}
}
@media screen and (min-width: 1161px){
	#news_area .title_box {width: 360px;}
	#keyword_area .title_box,#book_area .title_box {width: 340px;}
	#book_area .list_box{width: calc(100% - 380px);}
	#news_area .tabs_box {width: calc(100% - 480px);}
	#research_area .title_box { top: 40px; }
	#research_area ul { grid-template-columns: 55% 1fr; grid-gap: 5%; grid-row-gap: 3%; }
	#research_area ul li:first-child { grid-template-areas: "info" "img"; grid-row-start: 1; grid-row-end: 3; }
	#research_area ul li:first-child .img_box { padding: 35px 0; grid-area: img; }
	#research_area ul li:first-child .img_box img { height: 515px; }
	#research_area ul li:first-child .info_box { width: 90%; grid-area: info; }
	#news_area .title_box .more b{color: #ffffff;}
	#news_area .title_box .more .arrowWrap .arrow{background-color: rgb(255 255 255 / 69%);}
	#news_area .title_box .more .arrowWrap .arrow::before, #news_area .title_box .more .arrowWrap .arrow::after{background-color: #ffffff;}
	#news_area::before {content: "";position: absolute;bottom: 0;left: 0;z-index: 0;width: calc((100% - 860px) / 2);height: 200px;background-color: var(--primary);}
	#setArea::before {content: "";position: absolute;top: 0;left: 0;z-index: 0;width: calc((100% - 860px) / 2);height: 350px;background-color: var(--primary);z-index: -1;}
	#about_area .about_box::after {content: "";position: absolute;top: 0;left: 0;z-index: 0;width: calc((100% - 860px) / 2);height: 350px;background-color: var(--primary);z-index: -1;}

}
@media screen and (max-width: 1160px){
	#news_area .news_box {padding: 2rem 7vw;width: 100vw;}
	#news_area .title_box {display: flex;flex-direction: column;align-items: center;width: 100%;width: 90%;}
	section .title_box .text:after{width: 270px;}
    #news_area .title_box article{width: auto;}
    #news_area .tabs_box{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 .news_box {padding-bottom: calc(0rem + 20px);display: flex;flex-direction: column;align-items: center;}
	#news_area .tabs_body .tab_info .items { margin: 0 30px; }
	#news_area:after{display: none;}
	#about_area .about_box, #book_area .workframe{display: flex;flex-direction: column;}
    #book_area .workframe{padding: 1rem 3vw 5rem;}
	#about_area .about_box {padding: 0 8vw;}
    #about_area .about_box .about_image{width: 100%;padding: 0;}
    #book_area{padding: 2vmax 0 0vmax;}
    #about_area .about_box .about_info{width: 100%;}
    #about_area .about_box .about_info {padding: 1rem 0.5px 2rem;}
    #about_area .title_box p{margin-bottom: 0;margin-top: 0rem;}
	#about_area .about_box .about_info article {margin-bottom: 1rem;}
	#research_area .workframe { width: 100vw; }
	#research_area .title_box { padding: 0 5vw 4rem; }
	#research_area ul li >div { margin: 0 30px; }
	#research_area ul li a { background: rgb(255 255 255 / 50%); }
	#research_area ul li.slick-center a { background: transparent; }
	#research_area ul li .img_box img { height: 350px; }

	#news_area .tabs_btn a{margin: 15px 9px 0;}
	section .title_box h3 b {font-size: 16px;font-weight: 500;letter-spacing: 0.5px;}
	section .title_box h2{font-size: 36px;}
    #book_area .title_box, #book_area .list_box, #keyword_area .title_box,#keyword_area .slick-slider{width: 100%;padding: 0rem 0.5px 0rem;}
    #newDesc{width: 100%;margin-bottom: 1.75rem;}
    #book_area .list_box li .img_scale{margin: 5px;}
    #book_area .list_box li:nth-child(2n) .img_scale{flex-direction: column;}
    #keyword_area .title_box{text-align: center;display: flex;flex-direction: column;align-items: center;}
    #keyword_area .workframe{padding: 2rem 0vw 5rem;display: flex;flex-direction: column;align-items: center;}


}
@media screen and (min-width: 981px){
}
@media (max-width: 960px) {
}
@media screen and (max-width: 768px){
	#research_area:before { opacity: 0; }
	#news_area {padding: 0;}
	#about_area .about_box .about_image{padding: 0;}
	.about_info article h5{font-size: 22px;letter-spacing: 3.5px;}
	.leftBox .title_box h2, .rightBox .title_box h2{font-size: 26px;}
	section .title_box h3 b{font-size: 16px;letter-spacing: 1.5px;}
}
@media (min-width: 641px) {
}
@media screen and (max-width: 640px){
	#research_area ul li .img_box img { height: 60vw; }
	#news_area .tabs_body .tab_info .time font.d_txt{width: 55px;height: auto;font-size: 28px;}
	#setArea{padding: 3vmax 0 8vmax 0;background-position: 50% 100%;background-size: contain;}
	#book_area .row img {height: 250px;}
	#keyword_area{display: flex;flex-direction: column;align-items: center;}
	#keyword_area .title_box{width: -webkit-fill-available;}
	#keyword_area .slick-slider{width: 90%;}
	#keyword_area .title_box h3,#keyword_area .title_box .text{text-align: center;margin-top: 0;}
	#keyword_area .title_box .text:after{margin-left: auto;}
    #book_area .workframe{padding: 1rem 3vw 1rem;}
}
@media screen and (max-width: 550px){
	#about_area #about_txt { top: 8vmax; right: 0; }
}

@media screen and (max-width: 480px){
	#news_area .title_box h2 ,  #about_area .about_item .title_box h2 {-webkit-background-clip: text;background-clip: text;}
}
@media (max-width: 450px) {
}

