.listcoIndex{ padding:0 15px;  color:#515151}
.listcoIndex .top{display:grid;gap: 30px;grid-template-columns: repeat(3, 1fr); padding-bottom:50px}
.listcoIndex .top .company{ grid-column: span 2;}
.listcoIndex .top .comLogo{ margin-bottom:15px;}
.listcoIndex .top .comName{ font-size:28px; font-weight:700; line-height:normal}
.listcoIndex .top .comSubName{font-size:14px;}
.listcoIndex .top .stockBox{ background-color:#00908F; padding:30px; color:#fff; font-size:18px; font-weight:700}
.listcoInvisible{ position:absolute; width:1px; height:1px; overflow:hidden}

.greyFullbox{ background-color:#F1F1F1}
.greyFullbox .listcoIndex{display:grid;gap: 30px;grid-template-columns: repeat(3, 1fr);padding: 50px 15px;}
.greyFullbox .listcoIndex .profile{ grid-column: span 2;}
.greyFullbox .listcoIndex .profile, .greyFullbox .listcoIndex .latest-report{ position:relative; padding-bottom:24px}
.greyFullbox .listcoIndex .profile .read-more a, .greyFullbox .listcoIndex .latest-report .read-more a{ color:#00908f; font-weight:700; font-size:18px; position:absolute; bottom:0; right:0}

/* hide for auto fit, joyce request to use manual col
.listcoIndex .documentBox{display:grid;gap: 30px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); padding:50px 0}
*/
.listcoIndex .documentBox{display:grid;gap: 30px; padding:50px 0}
.listcoIndex .documentBox.col2{grid-template-columns: repeat(2, 1fr);}
.listcoIndex .documentBox.col3{grid-template-columns: repeat(3, 1fr);}
.listcoIndex .documentBox.col4{grid-template-columns: repeat(4, 1fr);}

.listcoIndex .documentBox > div{ position:relative; padding-bottom:58px}
.listcoIndex .documentBox a{ font-size:18px; font-weight:300; display:block; text-align:center; border:1px solid #00908F; box-sizing:border-box; padding:18px 8px; color:#00908f; line-height:22px; transition:all 0.3s linear; position:absolute;background-color:#fff; bottom:0; width:100%}
.listcoIndex .documentBox a:hover{ background-color:#00908F; color:#fff}
.listcoIndex .documentBox a .arrow {  border: solid #00908F; border-width: 0 2px 2px 0;display: inline-block; padding: 4px;  transform: rotate(-45deg);  -webkit-transform: rotate(-45deg); vertical-align:middle; transition:all 0.3s linear}
.listcoIndex .documentBox a:hover .arrow {  border: solid #fff;border-width: 0 2px 2px 0;}

.listcoIndex .infoBox{display:grid;gap: 30px;grid-template-columns: repeat(3, 1fr); padding-bottom:30px}
.listcoIndex .infoBox .ircontact{ grid-column: span 2;}

.listcoIndex .reportHighlights{ position:relative;}
.listcoIndex .reportHighlights iframe{vertical-align: middle;}
.listcoIndex .reportHighlights .btnArea{position:absolute;bottom:50px; left:50px; width:400px}
.listcoIndex .reportHighlights .btnArea a{ font-size:18px; font-weight:300; display:inline-block; text-align:center; border:1px solid #00908F; box-sizing:border-box; padding:18px; color:#00908f; line-height:22px; transition:all 0.3s linear; background-color:#F1F1F1; }
.listcoIndex .reportHighlights a:hover{ background-color:#00908F; color:#fff}
.listcoIndex .reportHighlights a .arrow {  border: solid #00908F; border-width: 0 2px 2px 0;display: inline-block; padding: 4px;  transform: rotate(-45deg);  -webkit-transform: rotate(-45deg); vertical-align:middle; transition:all 0.3s linear}
.listcoIndex .reportHighlights a:hover .arrow {  border: solid #fff;border-width: 0 2px 2px 0;}

/* compSideNav start */
.compSideNav{ background-color:#f0f0f0; width:280px; position:fixed; top:115px; right:-280px; box-sizing:border-box; z-index:99;transition: right 0.5s; border:1px solid #ddd; border-right:0}
.compSideNav.on{ right:0}
.compSideNav .navBtn{ transform: translateX(-100%); font-size: 18px; color: #fff; padding: 10px 10px 10px 20px; font-weight: bold; line-height: 36px; cursor:pointer; position:absolute; text-align: right;  box-sizing: border-box; top: -1px; background-color:#18BBBB; border:1px solid #ddd; border-right:0; }
.compSideNav .navBtn::after{content:""; width: 44px; height: 36px; display: inline-block; vertical-align: top; margin-left: 5px; background-color: #fff; mask: url(../images/compsidenav_btn.svg) no-repeat center / 85%; -webkit-mask: url(../images/compsidenav_btn.svg) no-repeat center / 85%;}
.compSideNav.on .navBtn{background-color: #f0f0f0;color: #00908F;}
.compSideNav.on .navBtn::after{background-color: #18BBBB;}
.compSideNav .navMain{max-height: calc(100vh - 120px); overflow: auto;}
.compSideNav .navMain a{ display:block; font-size:16px; line-height:22px;padding:9px 20px; color:#515151}
.compSideNav .navMain a:hover{ background-color:#00908f; color:#fff}
/* compSideNav end */




@media only screen and (max-width:1024px) {
	.listcoIndex .top{grid-template-columns: repeat(2, 1fr);}
	.listcoIndex .top .company{ grid-column: span 1;}
	.listcoIndex .documentBox{ display:block; padding:50px 0 0}
	.listcoIndex .documentBox > div{ margin-bottom:50px}
	.listcoIndex .infoBox{display:block; }
}

@media only screen and (max-width:960px) {
	.greyFullbox .listcoIndex{ display:block; }
	.greyFullbox .listcoIndex .profile{margin-bottom:50px;}
	.greyFullbox .listcoIndex .latest-report:before{ content:""; display:block; border-top:1px solid #ddd; padding-bottom:24px;}
	.compSideNav{top:60px; }
	.compSideNav .navMain{max-height: calc(100vh - 70px);}

	.compSideNav .navBtn{padding: 10px;}
	.compSideNav .navBtn span{ display:none; }
	.compSideNav .navBtn::after{margin-left: 0;};
}

@media only screen and (max-width:767px) {
	.listcoIndex .top{ display:block; padding-bottom:0;}
	.listcoIndex .top .company{ margin-bottom:30px}
	.listcoIndex .top .stockBox{ margin:0 -15px; padding:30px 15px;}
	.greyFullbox .listcoIndex{ display:block; padding:30px 15px;}
	.greyFullbox .listcoIndex .profile{margin-bottom:30px}
	.listcoIndex .reportHighlights{ margin:0 -15px; background-color:#f1f1f1; padding:30px 15px}
	.listcoIndex .reportHighlights .btnArea{ position:static; margin-top:50px; display:block; width:100%; text-align:center}
	.listcoIndex .reportHighlights .btnArea a{ display:block; margin-bottom:5px}

	
}