section, body, div, ul, li, h1, h2, h3, h4, p{color:#333;}
#researchTop{position: relative; margin-top:170px; display: flex; flex-direction: column; justify-content: center; padding-bottom: 100px;}
#btn_top{position: absolute; display: block; bottom: 100px; left:18px;}
#btn_top span{width:15px; height: 100px;}
#btn_top a{cursor:default; font-size:12px; transform:rotate(90deg); display:block;}

#researchTop .tabs_wrap{position: relative; margin: 0 auto; width:20%; margin-top: -3%;}
#researchTop .tabs_title{display: flex; justify-content: space-around; margin-bottom: 50px;}
#researchTop .tabs_title li{position: relative; transform: translateX(-50%);transition-duration: 0.3s;}
#researchTop .tabs_title li a{text-align: center; font-weight: bold; font-size:1.5vw; color: #03318C; }
#researchTop .tabs_title li a::after{content: ""; position: absolute; width: 100%; height: 20px; background-color: #28FFAF; bottom: 0; left: 0; opacity: 0; transition-duration: 0.5s; z-index: -1;}
#researchTop .tabs_title li a.select{background-color: #28FFAF;}
#researchTop .tabs_title li:hover a::after{opacity: 1;}
#researchTop .tabs_title li.select a::after{opacity: 1;}

#researchTop .page_title{position: relative; left: 5%; width:90%;}
#researchTop .title_bg img{width: 100%;}
#researchTop .page_title .title_text{position: absolute; left:5%; top: 10%;}
#researchTop .page_title h2{font-size: 2vw; color:#FFF; text-shadow: 1px 1px 2px black; position: relative; opacity: 0; top: 100px;}
#researchTop .page_title p{font-size: 1.2vw; color:#FFF; position: relative; opacity: 0; top: 100px;}

/* Section: researchInner */
#researchInner{position: relative;}
#researchInner h1{text-align: center; color: #03318C; font-weight: bold; font-size: 2vw;}
#researchInner .about_inner{position: relative; width: 95%; max-width: 1500px; margin: 0 auto; display: flex; overflow: hidden;}
.about_inner>div{position: relative; width: 50%; box-sizing: border-box;}
.about_text1{left: -300px; opacity: 0; transition-duration: 0.5s; background-color: #D7EAF9; margin: 10% auto;}
#researchInner .about_text1 h2{padding:5%; text-align:center; font-size: 1.3vw; color: #333;}
.about_text2{right: -300px; opacity: 0; transition-duration: 0.5s; transition-delay: 0.3s;margin: 10% auto; border: 1px solid #D7EAF9; border-left: none;}
#researchInner .about_text2 h3{padding:5%; text-align:center; font-size: 1vw; color: #333; }


.graph_wrap{position: relative; display: flex; justify-content: space-evenly; margin: 5% auto;}
.graph1{display: flex; flex-direction: column; justify-content: center; align-items: center;}
.graph1 h4{text-align: center; font-size: 0.8vw; color: #666; margin-bottom: 20px;}
.graph1 .img_wrap{display: flex; justify-content: space-between; align-items: center;}
.graph1 .img_wrap img{width: 100%;}
.graph1 .img_wrap>div:first-child{width: 100%; margin-right: 15%;}
.graph1 .img_wrap>div:last-child{width: 100%;}
.graph1 h3, 
.graph2 h3{font-size:1vw; font-weight: bold; color: #333; margin-bottom:15%;}
.graph2{display: flex; flex-direction: column; justify-content: center; align-items: center;}
.graph2 .img_wrap img{width: 100%; margin-right: 5%;}


/* Section: inner_bottom */
.inner_bottom{background-color: #e9edfc; padding: 3%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 10% auto; text-align: center;}
.inner_bottom h2{font-size: 1.5vw; font-weight: bold; color: #333; margin-bottom: 10px;}
.inner_bottom p {color: #666; margin-bottom: 30px; font-size: 0.8vw;}
.bottom_wrap{display: flex; justify-content: space-between;}
.bottom_left{display: flex; justify-content: space-evenly;}
.bottom_left h3{font-size: 1.5vw; font-weight: bold; color: #333; margin-bottom: 20px;}
.bottom_left h4 {font-size: 1vw; color: #666; margin-bottom: 1%;}
.bottom_left>div{width: 16%;}
.bottom_left img{width: 100%; margin-bottom: 3%;}
.patent_text, .utility_text, .design_text{display: flex; justify-content: space-evenly;padding: 0 15%;}
.bottom_left .patent_text, .bottom_left .utility_text,
.bottom_left .design_text {display: flex; justify-content: space-between; margin-bottom: 20px;}
.bottom_left .patent_text p, .bottom_left .utility_text p, .bottom_left .design_text p{font-size:1vw; color: #666; margin-top: 3%;}


/* Section: awards */
#awards{position: relative; width: 80%; margin: 10% auto; background-color: #fff;  text-align: center;}
#awards h2{font-size: 2em; font-weight: bold; color: #333; margin-bottom: 10px;}
#awards h3{font-size: 1.3em; color: #666; margin-bottom: 30px;}
#awards table{width: 100%; border-collapse: collapse; margin-top: 20px;}
#awards table thead{background-color: #f5f5f5; font-weight: bold; color: #222;}

th{color:#D5DDE5; background:#333; border-bottom:4px solid #9ea7af; border-right: 1px solid #555; font-size:1.5vw; font-weight: 100; padding:24px; text-align:left; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); vertical-align:middle;}
td{background:#FFFFFF; padding:20px; text-align:left; vertical-align:middle;font-weight:300; font-size:0.9vw; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); border-right: 1px solid #C1C3D1;}
  
th:first-child{border-top-left-radius:5px;}
th:last-child{border-top-right-radius:5px; border-right:none;}
tr{border-top: 1px solid #C1C3D1; border-bottom: 1px solid #C1C3D1; color:#666B85; font-size:1vw; font-weight:normal; text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);}

tr:hover td{background:#4E5066; color:#FFF; border-top: 1px solid 22262e;
}
tr:first-child{border-top:none;}
tr:last-child{border-bottom:none;}
tr:nth-child(odd) td{background:#EBEBEB;}
tr:nth-child(odd):hover td{background:#4E5066;}
tr:last-child td:first-child{border-bottom-left-radius:5px;}
tr:last-child td:last-child{border-bottom-right-radius:5px;}

td:last-child{border-right: 0px;}
th.text-left{text-align: left;}
th.text-center{text-align: center;}
th.text-right{text-align: right;}
td.text-left{text-align: left;}
td.text-center{text-align: center;}
td.text-right{text-align: right;}




/* Media queries for responsive design */
@media (max-width: 768px) {
.graph_wrap {flex-wrap: wrap;}
.graph1, .graph2 {width: 100%; margin-bottom: 30px;}
.bottom_wrap {flex-wrap: wrap;}
.bottom_left {width: 100%;}
}