/* wrap */
#wrap { background: #fff; }
#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: 700; font-size: 20vmin; -webkit-text-stroke-color: #ececec; text-stroke-color: #ececec; opacity: .6; white-space: nowrap; }
section .title_box h2 { line-height: 1; font-size: 42px; color: transparent; }
section .title_box h2:before { position: absolute; width: 2.3rem; height: 4px; background: var(--primary); display: block; top: -1.5rem; content: ""; }
section .title_box h3 b { font-size: 24px; }
section .title_box h3 svg { width: 34px; height: 25px; fill: #c4c4c4; }
section .title_box .more_btn { padding: 15px 25px; background: linear-gradient(to right, #f8c15f 0, #be6a31 60%, #83332e 110%); /* background-color: var(--info); */line-height: 1; font-size: 14px; color: #fff; }
section .title_box .more_btn:before { position: absolute; border: var(--white) solid; border-width: 1px 1px 0 0; display: block; top: 50%; right: 25px; content: ""; }
section .title_box .more_btn:after { margin-left: 25px; width: 50px; height: 1px; background: var(--white); display: block; content: ""; }

/* activities_area */
#activities_area { padding: 0; width: 100vw; background: #fff; z-index: 1000; }
#activities_area .activities_list { width: calc(100% - 245px); }
#activities_area ul li:before { position: absolute; width: 1px; height: calc(100% - 50px); background: #eaeaea; top: 25px; right: 0; content: ""; }
#activities_area ul li >div { padding: 20px 50px; }
#activities_area ul li p { font-weight: 300; font-size: 14px; color: var(--fourth);}
#activities_area ul li span { text-decoration: underline; font-style: italic; font-size: 13px; color: #b2b2b2; }
#activities_area .more { width: 245px; background: url(/images/00/img_activities_bg.jpg) no-repeat 50%; }
#activities_area .more * { color: #fff; }
#activities_area .more b { line-height: 1.3; font-size: 24px; }
#activities_area .more font:after { margin-left: 15px; width: 20px; height: 1px; background: #fff; display: block; content: ""; }

/* news_area */
#news_area {padding: 15vmin 0 4vmax;}
#news_area #news_txt { top: 2vmax; right: 5vmax; }
#news_area .news_box { margin: 0 0 0 auto; padding: 6rem 5vw; width: 90vw; background: #fff; border-bottom: 50px var(--light) solid; }
#news_area .title_box h2 {background: linear-gradient(to right, var(--info) 66%, var(--info) 67%);-webkit-background-clip: text;background-clip: text;}
#news_area .tabs_btn a { margin: 15px; border-bottom: 1px #646464 solid; font-size: 17px; }
#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; }
#news_area .tabs_body .tab_info .items {margin-right: 30px;padding: 10px;}
#news_area .tabs_body .tab_info .category { padding: 10px 15px; background: #efefef; line-height: 1; font-size: 15px; }
#news_area .tabs_body .tab_info .time {width: 104px;grid-template-columns: 1fr 55px;grid-template-rows: 35px 20px;grid-template-areas:
"time_y time_d"
"time_m time_d";align-items: end;}
#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; }
#news_area .tabs_body .tab_info .time font.d_txt { width: 55px; height: 55px; background: var(--info); font-size: 28px; color: #fff; grid-area: time_d; }
#news_area .tabs_body .tab_info h3 {height: auto;font-weight: 500;font-size: 17px;-webkit-line-clamp: 2;}
#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 .tabs_body .tab_info .more b { width: 37px; font-weight: 500; font-size: 13px; }
#news_area .tabs_body .tab_info .more:before { margin-right: 10px; width: calc(100% - 47px); height: 2px; background: #949494; display: block; content: ""; }
.news_list {
    display: flex;
    flex-wrap: wrap;
}
.news_list li{width: calc((100% / 3) - 0px);height: 270px;}


/* about_area */
#about_area { padding: 5vmax 0; }
#about_area:before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; content: ""; }
#about_area .bg_box { width: 25vw; height: 50%; background-image: url(/images/00/img_about_bg.jpg); top: 50%; right: 0; z-index: 3; }
#about_area #particles_box { width: 100vw; min-width: 100vw; height: 100%; min-height: 100%; opacity: .6; z-index: 1; }
#about_area #about_txt { top: 3vmax; 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) 66%, var(--info) 67%); -webkit-background-clip: text; background-clip: text; }
#about_area .about_item .title_box h3{display: none;}
#about_area .about_box { padding: 0 5vw; }
#about_area .about_box .about_image { padding: 0 5% 3% 0; }
#about_area .about_box .about_image:before { position: absolute; width: 80%; height: 90%; background: #f5f5f5; display: block; right: 4%; bottom: 0; content: ""; }

/* goals_area */
#goals_area:before { position: absolute; background: url(/images/00/img_goals_bg.png) no-repeat 45% 0 / auto 100%; bottom: -10vmax; left: 0; content: ""; }
#goals_area .title_box h2 { background: linear-gradient(to right, var(--info) 66%, var(--info) 67%); -webkit-background-clip: text; background-clip: text; }
#goals_area .title_box h2:before { left: 50%; }
#goals_area #goals_list:before { position: absolute; width: 100%; height: 1px; background: #f5f5f5; display: block; top: 90px; content: ""; }
#goals_area #goals_list li { padding-top: 30px; }
#goals_area #goals_list li .icon { margin: auto; background: #f0f0f0; }
#goals_area #goals_list li p { margin: 2.5rem auto 0; width: 120px; text-align: center; font-weight: 400; color: #d3d3d3; }
#goals_area #goals_list li p b { font-weight: 500; font-size: 19px; }
#goals_area #goals_list li p:last-child { margin-top: .5rem; line-height: 1.3; }

/* research_area */
#research_area { padding-top: 8vmax; }
#research_area:before { position: absolute; width: 50vw; height: 320px;  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; }

/* keyword_area */
#keyword_area { padding: 5vmax 0; background: var(--gary); }
#keyword_area .workframe{width: 82vw;}
#keyword_area ul li .item { margin: 0 15px; padding: 15px; background: #fff no-repeat 50% / cover; }
#keyword_area ul li .item:before { position: absolute; width: calc(100% - 10px); height: calc(100% - 10px); border: 1px #eee solid; top: 5px; left: 5px; content: ""; }
#keyword_area ul li .item h3 { font-weight: 500; line-height: 1.2; font-size: 22px; color: var(--dark); }
#keyword_area ul li .item p { font-family: 'Poppins', var(--font-family), sans-serif; color: #b6b6b6; }
#keyword_area .slick-prev{left: -25px;}
#keyword_area .slick-next{right: -25px;}
#keyword_area .slick-prev:before,#keyword_area .slick-next:before{color: #404040;font-family: 'Noto Sans TC';}


@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; }
}
@media screen and (min-width: 1501px){
	.webBox .wrapper:before { position: fixed; width: 6rem; height: 100vh; background: #f5f5f5; display: block; top: 0; left: 0; z-index: 999; content: ""; }
	#news_area .bg_box { left: 6rem; }
	#about_area .about_box { padding: 0 6rem; }
}
@media screen and (min-width: 1441px){
	#about_area .bg_box { top: 25%; }
}
@media screen and (min-width: 1281px){
	#keyword_area .workframe { width: 1200px; }
	#about_area .about_box .about_info { padding-right: 18vw; }
	#research_area .workframe { padding: 0 2%; }
}
@media screen and (max-width: 1280px){
	#news_area .news_box { padding: 4rem 0 4rem 3vw; width: 98vw; }
}
@media screen and (min-width: 1161px){
	#wrap { margin-top: 80px; }
	#activities_area { margin: -50px 0 0 auto; width: 1030px; }
	#news_area .bg_box { width: 860px; }
	#news_area .title_box {width: 340px;}
	#news_area .tabs_box {width: calc(100% - 340px);}
	#goals_area #goals_list >div { margin: auto; width: 1000px; }
	#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; }
}
@media screen and (max-width: 1160px){
	#activities_area .activities_list { width: calc(100% - 200px); }
	#activities_area .more { width: 200px; }
	#news_area .news_box { padding: 4rem 3vw; width: 100vw; }
	#news_area .title_box { display: flex; flex-direction: column; align-items: center; }
	#news_area .title_box h2:before { left: 50%; }
	#news_area .title_box .more_btn {bottom: 30px;left: 50%;padding: 10px 15px;font-size: 13px;}
	section .title_box .more_btn:after{width: 20px;}
	section .title_box .more_btn:before{right: 15px;}
	#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(3rem + 60px);}
	#news_area .tabs_body .tab_info .items {margin: 0 10px;padding: 10px;}
	#about_area .about_box .about_info { padding: 1rem 0 3rem; }
	#about_area .about_box .about_info article { margin-bottom: 2rem; }
	#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;}
}
@media screen and (min-width: 981px){
	#goals_area #goals_list li.slick-current .icon { background: linear-gradient(to right, #f8c15f 0, #be6a31 60%, #83332e 110%); }
	#goals_area #goals_list li.slick-current .icon svg { fill: #fff; }
	#goals_area #goals_list li.slick-current p b { color: var(--primary); }
}
@media screen and (max-width: 980px){
	#goals_area #goals_list li { margin: 0 40px; padding: 30px 30px 0; }
	#goals_area #goals_list li.slick-center .icon { background: var(--primary); }
	#goals_area #goals_list li.slick-center .icon svg { fill: #fff; }
	#goals_area #goals_list li.slick-center p b { color: var(--primary); }
}
@media screen and (max-width: 768px){
	#activities_area ul li >div { padding: 20px; }
	#research_area:before { opacity: 0; }
	#news_area {padding: 0;}
	#about_area .about_box .about_image{padding: 0;}
.news_list li{width: calc((100% / 2) - 0px);}
}
@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: 45px;height: 45px;font-size: 20px;}
.news_list li{width: calc((100% / 1) - 0px);height: 260px;}
}
@media screen and (max-width: 550px){
	#activities_area .activities_list { width: 100vw; }
	#about_area #about_txt { top: 8vmax; right: 0; }
}
@media screen and (max-width: 480px){
	#news_area .title_box h2 , #goals_area .title_box h2 , #about_area .about_item .title_box h2 {}
}