@import "all.min.css"; /*font-awesome*/
/* @import "bootstrap.min.css"; */
@import "default.css";
@import "content.css";
/* @import "page.css"; */
@import "color.css"; /*color*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@200;300;400;500;700;900&family=Noto+Sans:wght@400;500;600;700;800;900&display=swap');

body, td, th, table, caption, tbody, tfoot, thead, tr, th, td, img, ul, li, ol, dl, dt, dd, span, fieldset, form, label, legend, input, textarea, select, button {
	border: none;
	outline: none;
	margin: 0px;
	padding: 0px;
	/* color: #333; */
	font-family: 'Noto Sans','Noto Sans TC', Arial,'新細明體', sans-serif;
	font-size: 1rem;
    line-height: 1.5;
}
h1, h2, h3, h4, h5, h6, p {
	border: none;
	outline: none;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
}
img {
	border: 0px none;
	max-width: 100%;
}
a:link, a:visited {
	text-decoration: none;
}
a:hover {
	color: var(--esg-red);
}
input[type="text"], input[type="password"], input[type="file"]{
	padding: 0 5px;
	height: 2.5rem;
	background-color: #fff;
	color: #666;
	font-size: 1rem;
    line-height: 2.5rem;
}
input[type="text"]:focus {
	color: #000;
	outline: none;
}
button, input, select, textarea {
	vertical-align: middle;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	width: 44px;
	height: 26px;
	border: 1px solid #b0b0b0;
	cursor: pointer;
}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active {
	color: #666;
	background: none repeat-x scroll 0px bottom #e0e0e0;
}
input::-ms-clear, input::-ms-reveal {
display: none;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
select {
	border: 1px solid #bbb;
}
input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="file"]::placeholder,select::placeholder {
	color:#666;
	font-size: .95rem;
	font-weight: 300;
}
.table>:not(:last-child)>:last-child>* {
    border-bottom-color: #ddd;
}


/* 布局 */
body{
	position: relative;
	background-color: #fbfbfb;
}
body#index{
	background-color: #fff;
}
body::before,
.mainbox::before,
.aboutbox::before,
.joininBlk::before{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/bg-line.svg) top center repeat-y;
	background-size: calc(100% / 3 * 2) auto;
	pointer-events: none;
	opacity: .9;
}
.aboutbox::before,
.joininBlk::before{
	opacity: .3;
}
/* .joininBlk::before{
	opacity: .3;
} */
/* body:has(.member),body:has(.member-survey){
	background-color: #fbfbfb;
} */
body:has(.member)::before,body:has(.member-survey)::before{
	width: 0;
}
main{
	position: relative;
}
.wrapper {
	display: block;
	width: 100%;
	max-width: var(--maxwidth);
	margin: 0 auto;
}
.wrapper:has(.newsBlk-detail){
	width: calc(100% / 3 * 2);
	transition: all .5s;
}
@media (max-width: 1240px) {
	.wrapper:has(.newsBlk-detail){
		width: 90%;
	}
}
aside{
	display: none;
}
body:has(.member) aside,body:has(.member-survey) aside{
	display: block
}
/* header */
.topBlk {
	width: 100%;
	background:#fff;
	/* border-bottom: 1px solid #eee; */
	height:70px;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	box-shadow: 0px 3px 15px rgba(0,0,0,.15);
	transition: all .5s;
}
.topBlk.sticky{
	z-index: 999;
	box-shadow: 0px 3px 15px rgba(0,0,0,.15);
}
body:has(.member) .topBlk,body:has(.member-survey) .topBlk{
	/* background: linear-gradient(90deg, #F9F9F8 18.84%, #EFF1F1 100%); */
	border-bottom: 1px solid #eee;
}
.topBlk .logo {
    padding: 0 5px ;
    width:auto;
    height: 68px;
    display: flex;
    align-items: center;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    transition: all .25s;
}
body:has(.member) .topBlk .logo,body:has(.member-survey) .topBlk .logo{
	/* filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.05)); */
	padding: 0 0 0 5px;
	width:360px;
	border-right: 1px solid #f7f7f7;
}
.topBlk .logo a{
	display: flex;
}
.topBlk .logo img{
	height: 70px;
	width: auto;
}
.topBlk ul li {
	list-style-type: none;
}
/* 上方功能選單 */
.groupBlk {
	display: flex;
	z-index: 99;
	width: 100%;
	justify-content: space-between;
	/* background: linear-gradient(90deg, #fcfcfc 18.84%, #f1f1f1 100%); */
	/* background: #fbfbfb; */
	padding: 0 0 0 220px;
	height: 100%;
}
body:has(.member) .groupBlk ,body:has(.member-survey) .groupBlk {
	justify-content: flex-end;
	padding: 0 0 0 360px;
}
.groupBlk>ul{
	display: flex;
}
.groupBlk>ul>li{
	list-style-type: none;
	display: flex;
	align-items: center;
	height: 100%;
}
.groupBlk>ul>li>a {
	display: flex;
	color: #333;
	align-items: center;
	justify-content: center;
	padding: 0 1.25rem;
	transition: all .5s;
	font-size: .9rem;
	height: 100%;
	letter-spacing: 1px;
	position: relative;
	font-weight: 400;
	transition: all .5s;
}
body:has(.member) .groupBlk>ul>li>a ,body:has(.member-survey) .groupBlk>ul>li>a {
	border-left: 1px solid #f7f7f7;
}
.groupBlk>ul>li>a>i{
	font-size: .875rem;
	margin: 0 5px 0 0;
	color: var(--esg-green-h-100);
}
.groupBlk>ul>li>a.language,
.groupBlk>ul>li>a.login{
	width: auto;
	padding: 0 1rem;
	color: #444;
	background-color: #f7f7f7;
	line-height: 38px;
	height: 38px;
	border-radius: 40px;
	margin: 0  10px 0 0;
	letter-spacing: 0px;
	font-size: .875rem;
	white-space: nowrap;
}
.groupBlk>ul>li>a.language:not(.login)::before,
.groupBlk>ul>li>a.login::before{
	content: '';
	display: block;
	width: 13px;
	height: 13px;
	background-image: url(../images/icon/icon-language-g.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	margin: -1px 5px 0 0;
}
.groupBlk>ul>li>a.login::before{
	background-image: url(../images/icon/icon-member-g.svg);
}
.groupBlk>ul>li>a.language:not(.login):hover::before{
	background-image: url(../images/icon/icon-language-w.svg);
}
.groupBlk>ul>li>a.login:hover::before,
.groupBlk>ul>li>a.language.log-in::before{
	background-image: url(../images/icon/icon-member-w.svg);
}
body:has(.member) .groupBlk>ul>li>a.language,
body:has(.member-survey) .groupBlk>ul>li>a.language {
	color: #000;
	background-color: rgb(214 214 214 / 0%);
	margin: 0 ;
	line-height: 38px;
	height: 100%;
	border-radius: 0px;
	margin: 0 ;
}
body:has(.member) .groupBlk>ul>li>a.language.login,
body:has(.member-survey) .groupBlk>ul>li>a.language.login{
	display: none;
}
body:has(.member) .groupBlk>ul>li>a.bell,
body:has(.member-survey) .groupBlk>ul>li>a.bell{
	display: flex;
}
.groupBlk>ul>li>a.bell{
	width: 70px;
	display: none;
	color: #444;
	background-color: rgb(214 214 214 / 10%);
} 
.groupBlk>ul>li>a.bell>i{
	margin: 0;
	color: var(--esg-green-h-100);
}
.groupBlk>ul>li>a.bell>span {
    position: absolute;
	right: 20px;
    top: 24px;
    width: 9px;
    height: 9px;
    border-radius: 100%;
    background-color: var(--esg-red);
    z-index: 2;
}
.groupBlk>ul>li>a.language:hover,
.groupBlk>ul>li>a.language.dropdown-toggle.show{
	color: #fff;
	background-color: var(--esg-green-100);
}
.groupBlk>ul>li>a.language.log-in{
	color: #fff;
	background-color: var(--esg-green-100);
}
.groupBlk>ul>li>a.language.log-in:hover{
	background-color: var(--esg-green-h-100);
}
body:has(.member) .groupBlk>ul>li>a.language:hover,
body:has(.member-survey) .groupBlk>ul>li>a.language:hover {
    color: var(--esg-green-h-100);
}
body:has(.member) .groupBlk>ul>li>a.language:not(.login):hover::before,
body:has(.member-survey) .groupBlk>ul>li>a.language:not(.login):hover::before{
	background-image: url(../images/icon/icon-language-g.svg);
}
.groupBlk>ul>li>a.bell:hover{
	background-color:  var(--esg-green-100);
} 
.groupBlk>ul>li>a:hover{
	color: var(--esg-green-100);
	box-shadow: var(--textshadow-02);
}
.groupBlk>ul>li>a:hover>i{
	color: #fff;
}
.groupBlk ul.dropdown-menu {
    padding: 0;
	border-radius: 0;
	border-top: 2px solid var(--esg-red-80);
    margin-top: -2px !important;
}
body:has(.member) .member-greeting,
body:has(.member-survey) .member-greeting{
	display: flex;
}
body:has(.member) .member-greeting.login,
body:has(.member-survey) .member-greeting.login{
	display: none;
}
.member-greeting{
	display: none;
	align-items: center;
	font-size: .875rem;
}
.member-greeting.login{
	display: flex;
	padding: 0 0 0 var(--padding-y);
	color: #fff;
}
.member-greeting .logout{
	display: block;
	border-radius: 20px;
	padding: 0 .75rem;
	font-size: .725rem;
	line-height: 2;
	margin: 0 .5rem;
	/* color: #666; */
	color: var(--esg-red);
	/* background: var(--esg-green-80); */
	background: rgb(255 255 255 / 75%);
	box-shadow: 0px 5px 15px rgba(0,0,0,.05);
}
/* .member-greeting.login .logout{
	background: #e9e9e9;
} */
.member-greeting .logout:hover{
	background: var(--esg-red-80);
	color: #fff;
}
/* nav */
nav{
	width: 360px;
	height: 100vh;
	background-color: #fff;
	position: fixed;
	top: 70px;
	left: 0;
	overflow-y: auto;
	display: block;
	padding-bottom: 10rem;
	transition: all 0.25s;
	z-index: 10;
	scrollbar-color: transparent;
	scrollbar-width: thin;
	border-right: 1px solid #f1f1f1;
}
nav:hover{
	scrollbar-width: thin;;
}
nav::-webkit-scrollbar-corner{
    background-color: transparent;
}
nav::-webkit-scrollbar{
	width: 0px;
	background-color: transparent;
	border-radius: 10rem;
	transition: all .5s;
}
nav::-webkit-scrollbar-thumb{
	background-color: #ccc;
	border-radius: 10rem;
}
nav:hover::-webkit-scrollbar-thumb{
	background-color: #ddd;
}
nav::-webkit-scrollbar-track{
    background-color: transparent;
}
body:has(.member) .navBlk,body:has(.member-survey) .navBlk{
	display: block
}
.navBlk {
	z-index: 1;
	display: none;
	width: 100%;
	border-bottom: 0px solid #bfbfbf;
	height: auto;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0);
}
.navBlk-02{
	width: 100%;
	height: auto;
	background-color:transparent;
	z-index: 99;
	display: block;
}
.navBlk-03{
	background-color: #e9e9e9;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0);
}

/* 供應商中心選單 */
.navBlk ul{
	flex-flow: column;
}
.navBlk .wrapper {
	width: 100%;
	margin: 0;
	max-width: initial;
	display: flex;
	justify-content: space-between;
	padding: 0;
	height: 100%;
}
.navBlk>.wrapper>ul,.navBlk-02>ul{
	width: auto;
	height: 100%;
	display: flex;
	margin: 0 auto;
    flex-flow: column;
}
.navBlk>.wrapper>ul{
	width: 100%;
}
.navBlk>.wrapper>ul>li,.navBlk-02>ul>li{
	width: auto;
	position: relative;
	border-bottom: 1px solid rgba(0, 0, 0, 0.035);
	border-right: 0px solid #ddd;
}
.navBlk>.wrapper>ul>li.active{
	background-color:rgb(211 6 0);
}
.navBlk>.wrapper>ul>li:first-child{
	border-left: 0px solid #ddd;
}
.navBlk>.wrapper>ul>li>a{
	display: flex;
    border: 0px solid white;
    color: #ffffff;
    margin-right: 0px;
	border-radius: 0px;
	height: 100%;
	align-items: center;
	font-size: 1rem;
	transition: all .5s;
	padding: .5rem 1.5rem .5rem 2.5rem;
	color: #fff;
	justify-content: flex-start;
	width: 100%;
	position: relative;
	background-color: rgb(188 56 62 / 20%);
}
.navBlk-02>ul>li.login{
	padding: 1rem;
	background-color: #f6f6f6;
} 
.navBlk-02>ul>li.login span{
	color: #333;
	font-size: .95rem;
}
.navBlk-02>ul>li.login .member-greeting{
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.navBlk>.wrapper>ul>li>a:hover{
	background-color:  var(--esg-red-80);
}
.navBlk>.wrapper>ul>li.active>a{
	background-color:  rgba(0, 0, 0, 0.05);
}
.navBlk-02>ul>li.login i,.navBlk-02>ul>li>a>i{
	font-size: .75rem;
	margin: -2px 0.2rem 0 .2rem;
	width: 15px;
	/* display: none; */
	color: transparent;
}
.navBlk-02>ul>li>a>i{
	display: none;
}
/* 主選單 */
.navBlk-02>ul>li{
	width: auto;
}
.navBlk-02>ul>li>a{
	display: flex;
    border: 0px solid white;
    background-color:rgba(0,0,0,0);
	color: #333;
    padding: .8rem 2.5rem .8rem 2.25rem;
    margin-right: 0px;
	border-radius: 0px;
	width: 100%;
	height: 100%;
	justify-content: flex-start;
	align-items: center;
	font-size: 1rem;
	font-weight: 500;
	transition: all .5s;
	line-height: 1.5;
	position: relative;
}
.navBlk-02>ul>li.active>a,
.navBlk-02>ul>li.active>a:hover,
.navBlk>ul>li>.hoverbox>ul>li.active>a,
.navBlk>ul>li>.hoverbox>ul>li.active>a:hover{
	background-color: var(--esg-green-h-80);
	color:#fff;
}
.navBlk>ul>li>.hoverbox>ul>li.dropdown.active>a{	
	color: var(--esg-green-100)!important;
	background: var(--esg-green-10);
	border-bottom: 1px solid rgba(0, 0, 0, .025);
}
.navBlk-02>ul>li>a:hover{
	background-color:  var(--esg-green-10);
	color: var(--esg-green-h-100);
}
.navBlk>ul>li{
	position: relative;
}
.navBlk>ul>li>.hoverbox {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
	z-index: 9;
	background-color: #fff;
	width: 100%;
	border-top: 1px solid rgba(0, 0, 0, .05);
}

/* 選單下拉小三角形 */
.navBlk>ul>li:has(.hoverbox)>a::after{
	display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
	border-left: 0.3em solid transparent;
	position: absolute;
	right: 1.25rem;
}
.navBlk>ul>li>.hoverbox>ul>li>ul>li>a {
    padding: 0;
    border-radius: 0;
    font-size: 0.95rem;
    display: block;
	width: 100%;
}


@media (min-width: 991px) {
	.navBlk>ul>li>.hoverbox>ul>li,
	.groupBlk ul.dropdown-menu>li {
		border-bottom: 1px solid #eee;
	}
	.navBlk>ul>li>.hoverbox>ul>li:last-child,
	.groupBlk ul.dropdown-menu>li:last-child {
		border-bottom: 0px solid #eee;
	}
	.navBlk>ul>li>.hoverbox>ul>li>a,
	.groupBlk ul.dropdown-menu>li>a{
		display: block;
		padding: .8rem 2.75rem .8rem 2.75rem;
		color: #333;
	}
	.navBlk>ul>li>.hoverbox>ul>li a{
		color: #333;
	}
	.navBlk>ul>li>.hoverbox>ul>li>a:hover,
	.groupBlk ul.dropdown-menu>li>a:hover {
		color: var(--esg-green-h-100);
		background-color: var(--esg-green-10);
	}

}

/* 第三層 */
.navBlk>ul>li>.hoverbox>ul>li>ul>li>a::before {
    content: "";
    /* font-family: 'FontAwesome'; */
    display: block !important;
    font-size: .875rem;
	margin: 0px .5rem 0 0;
	float: left;
	/* color: #666;
	transform: scale(.95); */
	/* font-weight: 600; */
	width: .5rem;
	height: 1px;
}
.submenu-nm{
	float: left;
    font-size: .875rem;
	margin: 0px .5rem 0 0;
	color: #666;
	transform: scale(.95);
	width: 18px;
	display: none;
}
.navBlk>ul>li>.hoverbox>ul>li>ul>li.active>a::before {
	/* content: "\f105";
	margin: 0 .5rem 0 0; */
	color: #fff;
}
.navBlk>ul>li>.hoverbox>ul>li>ul>li>a:hover{
	color: var(--esg-green-h-100)!important;
	background-color: var(--esg-green-20);
}
.navBlk>ul>li>.hoverbox>ul>li>ul>li .arrow {
	display: none !important;
}
.navBlk>ul>li>ul>li>ul>li>ul>li>a::before {
    content: "\f105";
    font-family: 'FontAwesome';
    display: inline !important;
    position: absolute;
    left: -0.6rem;
}
.groupBlk .dropdown {
    position: relative;
}
.groupBlk .dropdown>a:hover::after,.navBlk .dropdown>a:focus::after {
    opacity: .8;
}
.groupBlk .dropdown>a{
	padding: 0 2rem 0 1.25rem;
}
.groupBlk .dropdown>a::after {
    content: "";
	display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    position: absolute;
    right: 1.25rem;
}
.hoverbox .dropdown>a::after {
    content: "\f067";
    font-family: FontAwesome;
    font-size: .875rem;
    line-height: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
    display: block;
    color: var(--esg-green-h-100);
    /* float: right; */
    position: absolute;
    top: .8rem;
    right: 1rem;
}
.hoverbox .dropdown .submenu .dropdown>a::after {
    top: .5rem;
	right: 1rem;
	color: #666;
}
.hoverbox .dropdown.active>a::after {
	content: "\f068";
}
.groupBlk .dropdown.active {
    display: block;
}
.groupBlk .dropdown.active>a{
	display: flex;
	color: var(--esg-green-h-100);
	/* border-bottom: 3px solid var(--esg-green-h-100); */
	box-shadow: var(--textshadow-02);
}
.dropdown.active>.submenu {
	display: block !important;
	/* background-color: rgb(218 231 234 / 20%); */
}
.groupBlk .dropdown.active .submenu {
	animation: animate-opacity .5s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}
.submenu {
	display: none !important;
}
.submenu li{
	list-style-type: none;
	z-index: 1;
	counter-increment: sno;
	counter-reset: section;
	border-bottom: 1px solid rgba(150, 150, 150, .05);
}

.submenu li:last-child{
	border-bottom: 0px dotted #eee;
}
.groupBlk .submenu {
	background-color: var(--esg-green-h-80);
}
.groupBlk .submenu li{
	border-bottom: 1px dotted  var(--esg-green-h-100);
}
.submenu li a {
	font-size: 0.9rem !important;
	display: block;
	width: 100%;
	line-height: 1.5;
	color: #fff;
	padding: .85rem 1.25rem;
}
.submenu li a:hover {
    color:#fff !important;
	background-color: var(--esg-green-h-100);
}
.submenu li.active a {

}

.navBlk>ul>li {
	display: block;
}
.navBlk ul li a{
	position:relative;
	border-radius: 0;
	font-size: 1.125rem;
}
.navBlk ul li.active>a {
	border: none; 
}
.navBlk ul li .hoverbox{
	display:none;
	float: none;
	position:relative;
	background-color: transparent;
}
.navBlk ul li .hoverbox.active{
	display: block; 
	background-color: #f9f9f9;
}
.navBlk ul li:has(.hoverbox.active)>a{
	background-color: #f6f6f6;
	/* color: var(--esg-green-100); */
}
.navBlk ul li:has(.hoverbox.active)>a:hover{
	background-color: var(--esg-green-10);
}
.navBlk>ul>li.active>.hoverbox{
	background-color: rgb(0 0 0 / .05);
	box-shadow: 0px 5px 15px 0px rgba(0,0,0,.0);
	border-top: 1px solid rgba(0, 0, 0, .05);
}

.navBlk ul li a,
.navBlk>ul>li:last-of-type>a{ 
	font-size: 1.025rem;
	font-weight: 400;
}

.navBlk ul li .hoverbox li a{ 
	font-weight: 400;
}

.navBlk>ul>li:hover>a{
	border: none;
}
.navBlk>ul>li>a.active, 
.navBlk>ul>li>a.active:before, 
.navBlk>ul>li>a.active:hover:before{
	color: #ffffff;
}
.navBlk ul li ul li .arrow{
	display: none;
}
.navBlk ul li ul li a{
	display: block;
	color: #333;
	font-size: .913rem;
	border: none;
	border-top: none;
	text-align: left;
	padding: 0.8em 1.25rem 0.8em 2.25rem;
	background: transparent;
}
.navBlk ul li ul li a:hover{
	/* opacity: .8; */
}
.navBlk>ul>li>.hoverbox>ul>li{
	border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.navBlk>ul>li>.hoverbox>ul>li:last-child{
	border-bottom: 0px solid rgba(0, 0, 0, .05);
}
.navBlk>ul>li>.hoverbox>ul>li>ul>li>a {
	padding: 0.5em 0.5rem 0.5em 2.85rem;
	color: #666;
}
.navBlk>ul>li>.hoverbox>ul>li>ul>li.active>a,
.navBlk>ul>li>.hoverbox>ul>li>ul>li.active>a:hover {
	color:#fff !important;
	background-color: var(--esg-green-h-80);
}
.navBlk ul li ul li a:before{
	display:none; 
	content:"\f107"
}

/* 第四層 */
.navBlk>ul>li>.hoverbox>ul>li.dropdown.active>ul>li.dropdown.active>a{	
	color: var(--esg-green-h-100)!important;
	background-color: var(--esg-green-20);
}
.navBlk ul li ul li.dropdown-4>ul>li>a{
	padding: 0.5em 1.25rem 0.5em 5rem;
	background-color: #fff;
	/* background-color: rgb(40 135 122 / 5%); */
	border-bottom: 1px solid rgba(150, 150, 150, .025);
	position: relative;
}
.navBlk ul li ul li.dropdown-4>ul>li>a::before{
	content: "";
    width: 3px;
	height: 3px;
	border-radius: 5px;
    text-align: center;
    display: block;
	background-color: #ccc;
	position: absolute;
	left: 66px;
    top: 17px;
}
.navBlk ul li ul li.dropdown-4>ul>li>a:hover{
	color: var(--esg-green-h-100)!important;
    background-color: var(--esg-green-10);
}
.navBlk ul li ul li.dropdown-4>ul>li.active>a, 
.navBlk ul li ul li.dropdown-4>ul>li.active>a:hover{
	color: #fff !important;
    background-color: var(--esg-green-h-80);
}
/* title */
.esgtitle h2, .esgtitle h3, .esgtitle h4 {
	margin: 2rem auto 1.5rem;
	/* max-width: 1340px; */
}
.esgtitle h2{
	font-weight: 600;
	display: flex;
	align-items: center;
	padding: 0 var(--padding-y);
}
.esgtitle h2 i{
	color: var(--esg-green-100);
	font-size: 1.5rem;
	font-style: initial;
	display: none;
}
.esgtitle h2 p{
	font-size: 2rem;
	margin: 0;
	line-height: 1.5;
	color: #333;
	display: flex;
    align-items: center;
}
.esgtitle h2 p::before{
	content: '';
    display: block;
    width: 15px;
    height: 7px;
    border-radius: 0 30px 0 30px;
    background-color: var(--esg-green-100);
    margin: 0 8px 0 0;
}
.esgtitle h2 p span{
	font-size: 1.025rem;
	color: #666;
	font-weight: 400;
}
.surveyBlk .esgtitle h3{
	font-size: 1.5rem;
	margin: 0;
	line-height: 1.5;
	color: #444;
}
.tab-text-title{
	font-size: 1.5rem;
	color: var(--esg-green-h-100);
	font-weight:600;
    margin: 2rem 0 .5rem;
    padding: 0 0.2rem;
    line-height: 1;
}
.tab-text-title>span{
	font-size: 1rem;
	color: var(--esg-green-h-100);
	font-weight: 400;
	letter-spacing: 1px;
}
.tab-text{
	font-size: 1rem;
    color: #666;
    margin: 0;
	line-height: 1.5;
	padding: 0 0 0 .2rem;
}

/* 首頁title */
.indextitle{
	width: 100%;
	margin:  70px auto 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: var(--maxwidth);
	padding: 0 var(--padding-y);
}
.indextitle h2{
	color: var(--esg-green-h-100);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.2;
}
/* see more button */
.more-btn{
	
    color: #000;
	font-weight: 400;
	transition: all .5s;
	position: relative;
}
.more-btn>span{
	color: #000;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	padding: 0 2px;
}
.more-btn:hover,
.cardbox.cardbox-style-2:hover .more-btn{
	color: var(--esg-green-100);
	font-weight: 700;
}
.more-btn>span::after{
	content: '';
	display: block;
	width: 15px;
	height: 10px;
	background: url(../images/icon/icon-more-next.svg) center no-repeat;
	background-size: 100% auto;
	margin: 2px 0 0 5px;
	transition: all .5s;
}
.more-btn:hover>span::after,
.cardbox.cardbox-style-2:hover .more-btn>span::after{
	background: url(../images/icon/icon-more-next-g-l.svg) center no-repeat;
}
.more-btn::before {
    content: '';
    display: block;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: -3px;
    background-color: var(--esg-green-l-50);
    z-index: 0;
	transition: all .5s;
	width: 0%;
}
.more-btn:hover::before,
.cardbox.cardbox-style-2:hover .more-btn::before{
	width: 100%;
}
/* 內頁標題 */
.innerpage-title{
	width: 100%;
	padding: 100px 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	border-radius: 0px 0px 0px 80px;
	position: relative;
	transition: all .5s;
	/* box-shadow: var(--textshadow-02); */
}
.innerpage-title::before{
	content: '';
    position: absolute;
    bottom: 0;
	right: 0;
	display: block;
	background-color: rgba(255,255,255,.35);
	width: 100%;
	height: 100%;
}
.innerpage-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 70%;
    width: 25%;
    display: block;
    background: url(../images/bg-top-right-line.svg) right top no-repeat;
    background-size: 100% auto;
    opacity: 1;
}
#newspage .innerpage-title::before{
	background-color: rgba(255,255,255,.65);
}
.page-esgtitle{
	text-align: center;
	position: relative;
    z-index: 1;
}
.page-esgtitle h2{
	text-align: center;
	color: #000;
	font-size: 2.125rem;
	letter-spacing: 0.1125rem;
	line-height: 1.2;
	font-weight: 600;
	transition: all .5s;
	padding: 0 var(--padding-y);
	margin: 0 auto;
}
.page-esgtitle::after{
	content: '';
	display: block;
	width: 5%;
	/* background-color: var(--esg-green-l-100); */
	background-color: var(--esg-red-80);
	height: 3px;
	border-radius: 30px;
	margin: .8rem auto 0;
}
.innerpage-title .breadcrumbBlk{
	padding: 0 var(--padding-y) .8rem ;
    border-bottom: 0px solid #eee;
	justify-content: center;
	position: relative;
	z-index: 1;
	background: rgb(255 255 255 / 0%);
}
/* @media (min-width: 1720px) {
	.innerpage-title{
		background-position: top center;
	}
} */
@media (max-width: 1240px) {
	.page-esgtitle h2 {
		font-size: 2.25rem;
		width: 90%;
	}
}
@media (max-width: 1024px) {
	.innerpage-title{
		background-size: auto 100% ;
	}
}
/* 社群分享 */
.detail-share{
    width: 90px;
    display: flex;
    justify-content: flex-end;
}
.detail-share .share{
    display: flex;
    padding-left:0rem;
    padding-bottom: 0rem;
	line-height: 1;
	list-style-type: none;
}
.detail-share .share li{
    margin: 0 0 0 5px;
}
.detail-share .share a{
    display: block;
    width: 28px;
    height: 28px;
    background-size: 100% auto;
    font-size: 1.5rem;
    background-position: center;
}
.detail-share .share li.line a{
	background: url(../images/icon/icon-share-line.svg) no-repeat;
	background-size: 100% auto;
}
.detail-share .share li.fb a{
	background: url(../images/icon/icon-share-fb.svg) no-repeat;
	background-size: 100% auto;
}
.detail-share .share .print a{
	background: url(../images/icon/icon-print.svg) no-repeat;
	background-size: 100% auto;
    border-radius: 5px;
    background-color: #FF9D43;
}
.detail-share .share li.line a:hover,.detail-share .share li.fb a:hover,.detail-share .share .print a:hover{
    opacity: .8;
}
/* main */
.mainBlk {
	display: block;
	padding: 70px 0 0 0;
	min-height: calc(100vh - 41px);
	position: relative;
}
.mainBlk .wrapper{
	padding: 4rem var(--padding-y) 4rem ;
	min-height: calc(100vh - 425px);
}
body:has(.member) .mainBlk .wrapper,body:has(.member-survey) .mainBlk .wrapper{
	padding: 1.5rem var(--padding-y) 10rem ;
}
body:has(.member) .mainBlk,body:has(.member-survey) .mainBlk{
	padding: 70px 0 0 360px;
}

/* table */
.table {
	display: table;
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 0rem;
}
table {
	border-collapse: collapse;
	margin-bottom: 20px;
}
.table thead tr th{
	background-color: var(--esg-green-100);
}
.thead {
	display: table-header-group;
}
.tbody {
	display: table-row-group;
}
.tr, tr {
	display: table-row;
    background-color: #fff;
}
.th, .td, th, td {
	display: table-cell;
	padding: .85rem .5rem;
}
th, td {
	border-bottom: 1px solid #ffffff;
}
.th, th {
	color:#fff;
    background-color: var(--esg-green-h-70);
	font-weight: 500;
	position: relative;
	text-align: center;
	letter-spacing: 0.125rem;
	border-right: 1px solid rgba(255,255,255,.1);
}
/* .th:after {
	display: block;
	width: 1px;
	height: 15px;
	position: absolute;
	right: 0;
	top: 10px;
	content: "";
	background-color: #ffffff;
} */
.th:last-of-type:after {
	display: none;
}
.td, td {
	border-bottom: 1px solid #ddd;
	vertical-align: middle;
	min-width: 86px;
	color: #444;
	text-align:center;
}
.td strong, td strong{
	color: #000;
	font-weight: 500;
}
.td a, td a {
	color: var(--esg-green-h-100);
	transition: all .25s;
}
.td a:hover, td a:hover {
	color: #000000;
	text-decoration: underline;
}
.table .tr:nth-child(odd) .td, 
table tr:nth-child(odd) td {
	background-color: #fbfbfb;
	/* background-color:  var(--esg-cositive); */
}
.td a[class*="-file"] {
	transform: scale(1.375);
	margin-left: 6px;
}
/*属性值为包含val的字符串*/
.td a[class*="-pdf"] {
	color: red;
}
.td a[class*="-word"] {
	color: blue;
}
.td a[class*="-file"]:hover {
	color: inherit;
}
.td [class*="fa"]:before{
	font: normal normal normal 15px/1 FontAwesome;
	margin-right:3px;
}
.td .disable{
	cursor:default;
}
.table .hidden-th {
    display: none;
}
.table img{
	width:100%;
	height:auto;
}

.table-responsive{
	overflow-x: auto;
	scrollbar-color: transparent;
	scrollbar-width: thin;
}
.table-responsive:hover{
	scrollbar-width: thin;;
}
.table-responsive::-webkit-scrollbar{
	height: .5rem;
}
.table-responsive::-webkit-scrollbar-corner{
    background-color: transparent;
}
.table-responsive::-webkit-scrollbar{
	height: .5rem;
	background-color: #f7f7f7;
	border-radius: 10rem;
}
.table-responsive::-webkit-scrollbar-thumb{
	background-color: #ccc;
	border-radius: 10rem;
}
.table-responsive:hover::-webkit-scrollbar-thumb{
	background-color: #ddd;
}
.table-responsive::-webkit-scrollbar-track{
    background-color: transparent;
}

/* 雷達圖 */
.table-calculate table{
	/* border: 2px solid var(--esg-green-100); */
	color: #444;
}
.table-calculate table tbody{
	border: 1px solid #ddd;
}
.table-calculate table thead th{
	border-right: 1px solid #ddd;
	
	background-color: var(--esg-green-h-20);
	color: #000;
	font-weight: 400;
	line-height: 2;
	white-space: nowrap;
    border-right: 1px solid #c3c3c3;
}
.table-calculate table thead th:first-child {
    border-left: 1px solid #c3c3c3;
}
.table-calculate table tr:hover,.table-calculate table tr.total-1:hover{
	background-color: var(--esg-cositive2);
}

.table-calculate table td{
	border-right: 1px solid #ddd;
}
/* .table-calculate table td:last-child{
	border-right: 1px solid var(--esg-green-100);
} */
.table-calculate tr:nth-child(odd) td{
	background-color: rgba(0,0,0,0);
}
.table-calculate table .total,.table-calculate tr:nth-child(odd) td.total{
	background-color: var(--esg-cositive);
	line-height: 2;
	color: #000;
	font-weight: 700;
}
.table-calculate table .title{
	/* color: var(--esg-green-h-100); */
	line-height: 2;
	color: #222;
	font-weight: 600;
}
.table-calculate table tr.total-tr td{
	border-bottom: 1px solid #dddddd;
	padding: 1.025rem 0.5rem;
}
.table-calculate table tr.total-1{
	border-bottom: 1px solid #dddddd;
}
.table-calculate table tr.total-1 td{
	padding: 1.025rem 0.5rem;
	font-weight: 600;
}
.table-calculate table tr.total-tr{
	font-weight: 600;
}
.table-calculate table .green-10,.table-calculate tr:nth-child(odd) .green-10{
	background-color: var(--esg-cositive);
}
.table-calculate table .yellow-50,.table-calculate tr:nth-child(odd) .yellow-50{
	background-color: var(--esg-cositive);
}
.table-calculate table tr.total-tr td strong{
	font-weight: 900;
	color: #000;
}

@media screen and (max-width: 768px) {
	.table .thead {
		display: none;
	}
	.table .tbody .tr {
		display: table;
		width: 100%;
		border-bottom: 1px solid #bfbfbf;
	}
	.table .hidden-th, .table .inline {
		display: inline-block;
		float: left;
	}
	.table .inline {
		padding-left: 105px;
	}
	.table .inline.text-center {
		text-align: left;
	}
	.table .hidden-th {
		min-width: 100px;
		text-align: right;
		position: absolute;
		left: 0;
		top: 8px;
	}
	.table .tbody .td {
		border-right: none;
		border-bottom: none;
		display: block;
		background-color: #ffffff;
		overflow: hidden;
		position: relative;
	}
	.table tbody tr:nth-child(2n) td {
		background-color: #eeeeee;
	}	
	.tb-scroll:before {
		content: "向右滑看更多";
		display: inline-block;
		padding: 0.35em 0.875rem;
		text-align: right;
		font-size: .875rem;
		color: var(--esg-green-100);
		border: 1px solid  var(--esg-green-100);
		border-radius: 30px;
		position: absolute;
		right: 0;
		top: 0;
	}
}

/* tab*/
.tablist-n{
	margin: 0x auto 0;
}
.tablist-n>.nav.nav-tabs{
	width: 100%;
	margin-bottom: -1px;
	align-items: stretch;
	flex-wrap: wrap;
	background-color: var(--esg-green-10);
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
.tablist-n>.nav.nav-tabs li:first-child .nav-link{
	border-color: transparent ;
}
.tablist-n>.nav.nav-tabs .nav-link{
	width: 100%;
	height: 100%;
	margin-bottom: 0px;
	background: 0 0;
	border: 0px solid white;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	color: #444;
	font-size: .9rem;
	padding: .7rem .5rem;
	/* border-color: #ddd #ddd transparent transparent ; */
	text-align: center;
	line-height: 1.2;
}
.tablist-n>.nav.nav-tabs li:hover .nav-link{
	/* background-color: var(--esg-green-h-100);
	color: #fff; */
	background-color: var(--esg-green-h-20);
}

.tablist-n>.nav.nav-tabs li:hover{
	/* border-color: var(--esg-green-h-100); */
}
.tablist-n>.nav.nav-tabs .nav-link.active{
    color: #fff;
    background-color: #fff;
	border-color: #ddd #ddd transparent;
	font-weight: 500;
}
.tablist-n>.nav.nav-tabs>li{
	/* border-bottom: 3px solid #ccc; */
	/* background-color: #f6f6f6; */
	/* background-color: var(--esg-green-10); */
	margin-left: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-right: 1px solid var(--esg-green-h-10);
	margin: 0 0 -1px;
    width: calc(100% / 9);
	border-bottom: 1px solid var(--esg-green-h-10);
	transition: all .5s;
}
.tablist-n>.nav.nav-tabs>li:nth-child(9n){
	border-right: 0px solid var(--esg-green-h-10);
}
.tablist-n>.nav.nav-tabs>li .nav-link.active{
	background-color: var(--esg-green-h-20);
	color: #000;
}
.tablist-n>.nav.nav-tabs>li:has(.nav-link.active){
	/* border-color: var(--esg-green-h-20); */
}
.tablist-n .tab-content .tab-pane{
	padding: 1.5rem;
}
.tablist-n .tab-content .tab-pane .col-100.table-data:last-child{
	border-top: 1px solid #ddd;
}
.tablist-n .tab-content .tab-pane  .table .tr .th,
.tablist-n .tab-content .tab-pane  .table .tr .th:last-child,
.tablist-n .tab-content .tab-pane  .table .tr .td:last-child
{
	border-right: 1px solid #ddd;
}
.tablist-n .tab-content .tab-pane  .table .tr .th:first-child{
	border-left: 1px solid #ddd;
}
.tablist-n .tab-content .tab-pane  .table {
	border-bottom: 1px solid #ddd;
}
.tab-content{
	margin-top: 1rem;
    border: 1px solid #ddd;
	position: relative;
}
.table-responsive.tab-content{
	border: 0px solid #ddd;
}
.responsive.tab-content{
	border: 0px solid #ddd;
}
.table-responsive .table{
	min-width: 1024px;
	margin-bottom: 0rem
}
@media (max-width: 1440px) {
	.tablist-n>.nav.nav-tabs>li{
		width: calc(100% / 7);
	}
	.tablist-n>.nav.nav-tabs>li:nth-child(9n){
		border-right: 1px solid var(--esg-green-h-10);
	}
	.tablist-n>.nav.nav-tabs>li:nth-child(7n){
		border-right: 0px solid var(--esg-green-h-10);
	}
}
@media (max-width: 991px) {
	.tablist-n>.nav.nav-tabs>li{
		width: calc(100% / 5);
	}
	.tablist-n>.nav.nav-tabs>li:nth-child(9n){
		border-right: 1px solid var(--esg-green-h-10);
	}
	.tablist-n>.nav.nav-tabs>li:nth-child(7n){
		border-right: 1px solid var(--esg-green-h-10);
	}
	.tablist-n>.nav.nav-tabs>li:nth-child(5n){
		border-right: 0px solid var(--esg-green-h-10);
	}
}
@media (max-width: 768px) {
	.tablist-n>.nav.nav-tabs>li{
		width: calc(100% / 4);
	}
	.tablist-n>.nav.nav-tabs>li:nth-child(9n){
		border-right: 1px solid var(--esg-green-h-10);
	}
	.tablist-n>.nav.nav-tabs>li:nth-child(7n){
		border-right: 1px solid var(--esg-green-h-10);
	}
	.tablist-n>.nav.nav-tabs>li:nth-child(5n){
		border-right: 1px solid var(--esg-green-h-10);
	}
	.tablist-n>.nav.nav-tabs>li:nth-child(4n){
		border-right: 0px solid var(--esg-green-h-10);
	}
}


.surveyBlk .tab-content .table select.form-select{
	padding: 0 .5rem;
	margin: 0;
}
.surveyBlk .tab-content .table .tr:hover .td,
.surveyBlk .tab-content .table .tr:nth-child(odd):hover .td{
	background-color: var(--esg-cositive);
}
.surveyBlk .tab-content .table .form-select{
	background-position: right 0.25rem center;
	background-color: #fff;
}
.tab-content .table .tr .th{
	vertical-align: middle;
	font-size: 1rem;
}
.tab-content .table .tr .th:first-child{
	border-left: 1px solid var(--esg-green-100);
}
.tab-content .table .tr .th:last-child{
	border-right: 1px solid var(--esg-green-100);
}
.tab-content .table .tr .td:first-child,
.tab-content .table tr td:first-child{
	border-left: 1px solid #ddd;
}
.tab-content .table .tr .td,
.tab-content .table tr td{
	border-right: 1px solid #ddd;
}
.tab-content .table .tr .td .h6{
	font-size:1.25rem;
	color:var(--esg-green-h-100);
}
.tab-content .table p{
	margin-bottom: 0;
	line-height: 1.5;
	text-align: left;
}
.tab-content .table .w-5{
	width:30px;
}
.tab-content .table .w-8{
	width:80px;
}
.tab-content .table .w-10{
	width:100px;
}
.tab-content .table .w-20{
	width:200px;
}
.tab-content .table .w-45{
	width:350px;
}
.tab-content .table span.th-span{
	display: block;
	font-size: .875rem;
	letter-spacing: 0;
	word-wrap: break-word;
	width: 70px;
	margin: 0 auto;
	padding: 0;
	color: #fff;
}
.tab-content .table th>span{
	display: block;
	color: #fff;
	font-size: .875rem;
	width: 80px;
	margin: 0 auto;
	word-wrap: break-word;
	letter-spacing: 0;
}
.tab-content .table .td.questions>p{
	font-weight: 500;
	color: #444;
	padding: 0;
}

/* point */
.td.scoring-point p{
	position: relative;
	padding: 0;
	margin: .5rem 0;
	font-weight: 400;
	font-size: .95rem;
	color: #444;
}
.scoring-point p>span{
	width: 50px;
	color: var(--esg-green-100);
	padding: 0 5px 0 0;
}


/* news */
#newspage .esgtitle h2{
	margin: 2rem auto 1.5rem;
    justify-content: center;
}
#newspage .esgtitle h2 i{
	display:none;
}
.newsTab{
	margin:0rem 0 2rem;
}
.newsTab>ul{
	display: flex;
	padding: 0 1.25rem;
}
.newsTab>ul>li{
	display: flex;
	margin: 0 .5rem 0 0;
}
.newsTab>ul>li>a.tab-style{
	color: #000;
    display: flex;
    align-items: center;
    line-height: 2.15;
    font-size: .875rem;
    padding: 0 1rem;
    border-radius: 30px;
	background-color: #f3f3f3;
	transition: all .5s;
}
.newsTab>ul>li>a.tab-style::before{
    content: '';
    display: none;
    width: 10px;
    height: 6px;
    border-radius: 0px 30px;
    background: var(--esg-green-l-100);
    margin: 2px 6px 0 0;
}
.newsTab>ul>li>a.tab-style.v0:hover,
.newsTab>ul>li>a.tab-style.v0.active{
	background-color: var(--esg-green-l-50);
}
.newsTab>ul>li>a.tab-style.v1:hover,
.newsTab>ul>li>a.tab-style.v1.active{
	background-color: var(--esg-green-100);
	color: #fff;
}
.newsTab>ul>li>a.tab-style.v2:hover,
.newsTab>ul>li>a.tab-style.v2.active{
	background-color: var(--esg-blue);
	color: #fff;
}
.newsTab>ul>li>a.tab-style.v3:hover,
.newsTab>ul>li>a.tab-style.v3.active{
	background-color: var(--esg-red);
	color: #fff;
}
.newsTab>ul>li>a.tab-style.v4:hover,
.newsTab>ul>li>a.tab-style.v4.active{
	background-color: var(--remind);
	color: #fff;
}
.newsBlk{
	padding: 0 0 4rem;
	border-bottom: 1px solid #eee;
}
.newsBlk>ul{
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;		
}
.newsBlk>ul>li{
	width: calc(100% / 3);
	padding: 1.75rem 1.25rem;
	transition: all .5s;	
}
.newsBlk>ul>li .cardbox {
	padding:0;
	opacity: 1;
}
/* 新版內頁 */
.esgtitle-flex{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 5%;
	border-bottom: 1px solid #eee; 
}
.newsBlk-detail{
    background: transparent;
}
.newsBlk-detail .userBlk {
	background: transparent;
	padding: 3rem 5%;
}
.time-date::before{
    content: "\f017";
    font-family: 'FontAwesome';
    font-size: .875rem;
    margin: 0 .5rem 0 0;
	color: #999;
	list-style: 1;
}

@media (max-width: 991px) {
	.newsBlk>ul>li{
		width: calc(100% / 2);
	}
}

/* 頁數 */
.page {
    margin: 3rem 0 2rem;
}

.page ul {
    justify-content: center;
    flex-wrap: wrap;
	margin: 0;
	list-style-type: none;
}

.page ul li {
    border: none;
    padding: 0;
    text-indent: initial;
    margin: 0;
}

.page ul li::before {
    display: none;
}

	.page ul li a {
		width: 45px;
		height: 45px;
		font-size: 0.875rem;
		line-height: 1;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 30px;
		background: transparent;
		margin: 0 0.25rem;
		padding: 0;
		transition: all .5s;
		text-decoration: none;
	}

.page ul li a:hover,.page ul li a.page-button:hover {
	color: var(--esg-red);
	text-decoration: none;
	font-weight: 600;
	background-color:#fff;
	box-shadow: var(--textshadow-03-2);
	cursor: pointer;
}

.page ul li a.active {
	color: var(--esg-red);
	background-color:#fff;
	font-weight: 600;
	box-shadow: var(--textshadow-03-2);
}
.page ul li a.page-button{
	color: #888;
	border:1px solid rgba(0,0,0,0);
	padding: 0 1rem;
}

.page ul li a i::before {
    vertical-align: middle;
}

.page-display {
    text-align: center;
    color: #464646;
    font-size: 0.875rem;
}

@media (max-width: 992px) {
	.page ul {
		justify-content: center;
	}
}
/* footer */
footer {
	position: relative;
    margin: 0;
    width: 100%;
	transition: all .25s;
	background-color: var(--esg-green-h-100);
	border-radius: 80px 0 0;
	bottom: 0;
	padding: 1.5rem 0 1rem;
	box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.05);
	z-index: 2;
}
footer::after {
	content: '';
	width: 60px;
	height: 60px;
	display: block;
	position: absolute;
	right: 0;
	top: -60px;
	background: url(../images/bg-footer.svg) right bottom no-repeat;
	background-size: auto 100% ;
}
#index footer {
	background-color: var(--esg-green-h-80);
	position: absolute;
}
#index footer::after {
	opacity: .8;
}
body:has(.member) footer,body:has(.member-survey) footer{
	padding:1.5rem 0 1rem 360px;
	background-color: #fff;
	box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0);
}
body:has(.member) footer::after,body:has(.member-survey) footer::after{
	opacity: 0;
}
.copyRightBlk{
	width: 100%;
	max-width: var(--maxwidth);
	margin: 0 auto;
	padding: 0 var(--padding-y);
}
.copyRightBlk .wrapper>div{
	display: flex;
	justify-content: space-between;
}
.copyRightBlk .wrapper p{
	font-size: .875rem;
	line-height: 1;
	margin-bottom: 0rem;
	text-align: center;
	color: #fff;
	padding: 0;
	opacity: .5;
}
.copyright-link{
	display: flex;
	align-items: center;
}
.copyright-link a{
	display: block;
	padding: 0 5px;
	line-height: 1;
	font-size: .875rem;
	color: #fff;
	text-decoration: none;
	opacity: .9;
}
.copyright-link a:hover,
body:has(.member) .copyright-link a:hover,
body:has(.member-survey) .copyright-link a:hover{
	color: var(--esg-green-l-100);
}
body:has(.member) .copyRightBlk .wrapper p,
body:has(.member-survey) .copyRightBlk .wrapper p,
body:has(.member) .copyright-link a,
body:has(.member-survey) .copyright-link a{
	color: #333;
}
.gotop {
	display: none;
	width: 40px;
	height: 45px;
	background-color: var(--esg-green-80);
	position: fixed;
	right: 30px;
	bottom: 40px;
	color: rgb(0 0 0 / 0%) !important;
	font-size: 0;
	text-align: center;
	line-height: 0;
	border-radius: 25px;
	z-index: 2;
	opacity: .95;
	transition: all .5s;
	box-shadow: var(--textshadow-01);
}
.gotop::before{
	content: "\f062";
	font-family: FontAwesome;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	line-height: 45px;
	text-align: center;
	color: #fff;
	font-size: 1rem;
	transition: all .5s;
}
.gotop:hover {
	background-color: var(--esg-green-h-100);
	bottom: 30px;
}

@media (max-width: 992px) {
	.copyRightBlk .wrapper>div{
		flex-flow: column;
		justify-content: center;
		align-items: center;
	}
	.copyRightBlk .wrapper p{
		margin: .5rem 0 0;
	}
	.gotop {
		bottom: 15px;
	}
}
/* 麵包屑 */
.breadcrumbBlk{
	padding: 1.125rem var(--padding-y);
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	background: rgb(255 255 255 / 40%);
}
.breadcrumb {
	padding: 0;
	margin-bottom: 0rem;
}
.breadcrumb-item{
	font-size: .875rem;
}
.breadcrumb-item+.breadcrumb-item {
	padding-left: 0.35rem;
	font-size: .875rem;
	letter-spacing: 1px;
}
.breadcrumb-item.active{
	color: #333;
}
.breadcrumb-item>a{
	color: #333;
} 
.breadcrumb-item+.breadcrumb-item::before {
	padding-right: 0.35rem;
	color:#bbb;
}

.card-title {
    margin-bottom: 0rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5;
}

/* 漢堡 */
.toggleBlk{
	display: none;
}
.toggleBlk {
	position: fixed;
	left: 25%;
	top: 0px;
	z-index: 999;
	transition: all .25s;
}
.toggleBlk>a {
	display: flex;
	padding: 25px 10px;
	width: 50px;
	height: 70px;
	text-indent: -9999px;
	font-size: 0;
	flex-flow: column;
	align-items: center;
	justify-content: center;
}

.toggleBlk .icon-bar {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 1px;
	background-color: var(--esg-red);
}
.toggleBlk>a.active .icon-bar{
	background-color: #bbb;
}
.toggleBlk .icon-bar+.icon-bar {
	margin-top: 4px;
}
.toggleBlk a.active .icon-bar {
	margin-top: 0;
}

.toggleBlk a.active .icon-bar:nth-child(1) {
	transform: translateY(9px) rotate(135deg);
	-moz-transform: translateY(9px) rotate(135deg);
	-webkit-transform: translateY(9px) rotate(135deg);
	top: 6px;
}
.toggleBlk a.active .icon-bar:nth-child(2) {
	display: none;
}
.toggleBlk a.active .icon-bar:nth-child(3) {
	transform: translateY(6px) rotate(-135deg);
	-moz-transform: translateY(6px) rotate(-135deg);
	-webkit-transform: translateY(6px) rotate(-135deg);
	top: 6px;
	margin-top: 1px;
}
.toggleBlk:has(.active) {
	left: calc(25% - 40px);
	top: 70px;
}
.toggleBlk a.active {
	border: none;
	display: block;
	width: 40px;
	height: 50px;
	padding: 16px 11px;
}

@media (max-width: 1320px) {
	:root{
		/* --padding-y:15px; */
	}
	.topBlk .logo img {
		max-width: inherit;
	}
	nav{
		width: 25%;
	}
	body:has(.member) .topBlk .logo,
	body:has(.member-survey) .topBlk .logo{
		width: 25%;
		padding: 0 10px;
	}
	body:has(.member) .groupBlk, 
	body:has(.member-survey) .groupBlk{
		padding: 0 0 0 25%;
	}
	body:has(.member) .mainBlk, 
	body:has(.member-survey) .mainBlk{
		padding: 70px 0 0 25%;
		transition: all .25s;
	}
	body:has(.member) footer,
	body:has(.member-survey) footer{
		padding: 1.5rem 0 1rem 25%;
	}
	
}
@media (max-width: 1200px) {
	:root {
		/* --padding-y: 20px; */
	}
	.topBlk .logo img {
		height: auto;
		width: 100%;
		max-width: 180px;
	}
	nav{
		left: -25%;
	}
	nav.active{
		left: 0%;
	}

	body:has(.member) .topBlk .logo,
	body:has(.member-survey) .topBlk .logo{
		border-right: 1px solid rgb(214 214 214 / 15%);
	}
	body:has(.member) .toggleBlk,
	body:has(.member-survey) .toggleBlk{
		display: block;
	}
	.body:has(.member) .groupBlk,
	body:has(.member-survey) .groupBlk{
		padding: 0 0 0 calc(25% + 40px);
		transition: all .25s;
	}
	body:has(.member) .mainBlk,
	body:has(.member-survey) .mainBlk{
		padding: 70px 0 0 0%;
		transition: all .25s;
	}
	body:has(.member) .mainBlk.active,
	body:has(.member-survey) .mainBlk.active{
		padding: 70px 0 0 25%;
	}
	body:has(.member) footer,
	body:has(.member-survey) footer{
		padding: 1.5rem 0 1rem 0 ;
	}
	body:has(.member) footer.active,
	body:has(.member-survey) footer.active{
		padding: 1.5rem 0 1rem 25%;
	}
	.navBlk-02>ul>li>a{
		padding: 0.8rem 2.5rem 0.8rem 1rem;
	}
	.groupBlk.active{
		padding: 0 0 0 25%;
	}
	.member-greeting {
		padding: 0 0 0 10px;
	}
	.groupBlk.active .member-greeting{
		padding: 0 0 0 1rem;
	}		
	.navBlk-02>ul>li.login .member-greeting{
		flex-flow: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 0 0 0 0;
		width: calc(100% - 20px);
	}
	.navBlk-02>ul>li.login .member-greeting .logout {
		margin: 0.5rem 0 0;
	}
	.navBlk-02>ul>li.login span i{
		display: none;
	}
	.navBlk>ul>li>.hoverbox>ul>li>a,.groupBlk ul.dropdown-menu>li>a{
		padding: .8rem 1.5rem;
	}
	.navBlk>ul>li>.hoverbox>ul>li>ul>li>a {
		padding: 0.5em 0.5rem 0.5em 1.5rem;
	}
	.navBlk ul li ul li.dropdown-4>ul>li>a{
		padding: 0.5em 0.5rem 0.5em 3.4rem;
	}
	.navBlk ul li ul li.dropdown-4>ul>li>a::before {
		left: 43px;
		top: 17px;
	}
	.groupBlk>ul>li>a,.groupBlk>ul>li>a.language{
		padding: 0 .5rem;	
	}
	.groupBlk>ul>li>a.language{
		font-size: 0;
		padding: 0 1rem;
		color: #000;
		background-color: transparent;
		border-left: 1px solid #f7f7f7;
		margin: 0;
		line-height: 38px;
		height: 100%;
		border-radius: 0px;
		margin: 0;
	}
	.groupBlk>ul>li>a.language:not(.login)::before,
	.groupBlk>ul>li>a.login::before{
		margin: -1px 0 0 0;
		width: 15px;
		height: 15px;
		
	}
}
@media (max-width: 768px) {
	.topBlk .logo a {
		padding: 0.5rem 0.5rem 0.5rem 0;
	}
	nav {
		width: 50%;
		left: -50%;
	}
	/* body:has(.member) .topBlk .logo,
	body:has(.member-survey) .topBlk .logo{
		width: 35%;
	} */
	aside:has(nav.active)::after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.25);
		z-index: 1;
	}
	body:has(.member) .mainBlk.active, 
	body:has(.member-survey) .mainBlk.active{
		padding: 70px 0 0 0%;
	}
	/* .groupBlk{
		padding: 0 0 0 35%;
	} */
	/* body:has(.member) .groupBlk, 
	body:has(.member-survey) .groupBlk{
		padding: 0 0 0 35%;
	}
	body:has(.member) .groupBlk, 
	body:has(.member-survey) .groupBlk{
		padding: 0 0 0 calc(35% + 40px);
	}
	.toggleBlk {
		left: 35%;
	} */
	.toggleBlk:has(.active) {
		left: calc(50% - 40px);
	}
	body:has(.member) footer.active,
	body:has(.member-survey) footer.active{
		padding: 1.5rem 0 1rem 0 ;
	}
	.groupBlk>ul>li>a,.groupBlk>ul>li>a.language{
		border-left: 1px solid #f7f7f7;
		font-size: .875rem;
	}
	.groupBlk .dropdown>a {
		padding: 0 1rem 0 .5rem;
	}
	.groupBlk .dropdown>a::after {
		right: .35rem;
	}
	.groupBlk>ul>li>a.language{
		font-size: 0;
		border-left: 1px solid #f7f7f7;
	}
}

/* 聯絡我們 */
.captchaImg{
	height:40px
}
.content-button {
	width: 44px;
	height: 44px;
	background-color: var(--esg-red);
	position: fixed;
	right: 10px;
	bottom: 100px;
	color: rgb(0 0 0 / 0%) !important;
	font-size: .875rem;
	text-align: center;
	line-height: 44px;
	border-radius: 50%;
	z-index: 2;
	opacity: .95;
	transition: all .5s;
}
.content-button::before{
	content: "\f086";
	font-family: FontAwesome;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	line-height: 44px;
	text-align: center;
	color: #fff;
	font-size: 1rem;
}
.content-button:hover {
	background-color: var(--esg-red-80);
}
#content01 .modal-body{
	align-items:flex-start;
}
#content01 .modal-body ul{
	padding: 0 1.5rem 1rem;
}

#content01 .modal-body ul a{
	color:var(--esg-red)
}

/* 提示 */
.toast-top-right{
	top: 90px !important;
}
.modal-hint .modal-body{
	padding: 2rem 1rem;
	position: relative;
}
.modal-hint p.h6{
	margin:.5rem 0 1rem;
	text-align: center;
	font-size: 1.125rem;
}
.modal-hint span{
	margin: .25rem 0 1.25rem;
	display: flex;
	justify-content: center;
	font-size: 2.75rem;
	/* color: var(--remind); */
	color: #ffdf00;
}
.modal-hint-btn{
	display: flex;
	width: 80%;
	justify-content: center;
	margin: 0 auto;
}
.modal-hint-btn .btn{
	margin: 0 .25rem;
	width: 100%;
}

/* 左右輪播 */
.sliderbox{
	position: absolute;
	overflow: hidden;
}
.sliderbox .owl-nav{
    position: absolute;
    top: 50%;
    right: 00px;
    width: 100%;
    height: 44px;
    transform: translate(0%,-50%);
    pointer-events: none;
    margin: 0;
}
.owl-carousel .owl-item>li>a{
    display: flex;
    width: 100%;
    height: auto;
    padding-top: 66%;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
}
.owl-carousel .owl-item>li>a img{
    width: auto;
    max-width: inherit;
    height: 120%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all .5s;
}
.owl-carousel .owl-item>li p{
    padding-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 2.1rem;
    line-height: 1.2;
}
.owl-carousel .owl-item>li>a:hover>img{
    height: 130%;
}
.owl-theme .owl-nav [class*=owl-]{
    font-size: 0rem;
    margin: 0 0 0 0;
    padding: 0 0;
    color: rgba(255,255,255,0);
    display: block;
    cursor: pointer;
    border-radius: 22px;
    width: 44px;
    height: 44px;
    position: absolute;
    top: 0px;
    text-align: center;
    border: 2px solid rgba(255,255,255,0);
    background-position: top left;
    background-size: 100% auto;
    background-repeat: no-repeat;
    pointer-events: auto;
    opacity: 1;
}

.slider-photo .owl-nav [class*=owl-] {
    top: -10px;
}
.owl-theme .owl-nav .owl-next{
    right: -10px;
}
.owl-theme .owl-nav .owl-prev {
    left: -10px;
}
.owl-theme .owl-nav [class*=owl-]:hover{
    color: rgba(255,255,255,0);
    text-decoration: none;
    border: 2px solid rgba(255,255,255,0);
}
.owl-theme .owl-nav .owl-next:hover {
    opacity: .8;
}
.owl-theme .owl-nav .owl-prev:hover{
    opacity: .8;
}
.owl-theme .owl-nav .disabled{
    opacity: .3;
}

/* top banner */
.top-banner{
	position: relative;
	transition: all .5s;
}
.top-banner .top-style{
	position: relative;
	height: 100%;
	overflow: hidden;
	max-height: calc(100vh - 70px);
}

.top-banner .top-style::before{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: transparent;
	z-index: 1;
}
.top-banner .top-style::after{
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	height: 100%;
	width: calc(100% / 3);
	display: block;
	background: url(../images/bg-top-right-line.svg) right bottom no-repeat;
	background-size: 100% auto;
	opacity: .5;
	z-index: 2;
}
.top-banner .top-style>img{
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.top-banner .top-style .top-banner-title{
	width: 100%;
	text-align: center;
	position: absolute;
	top: 21%;
	font-size: 1rem;
	transition: all .5s;
	z-index: 2;
}
.top-banner .top-style .top-banner-title h2{
	color: #FFF;
	text-shadow: var(--textshadow-01);
	font-size: 375%;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 1px;
	/* transition: all .5s; */
}
.top-banner .top-style .top-banner-title p{
	margin: .85rem 0 0;
	padding: 0;
}
.top-banner .top-style .top-banner-title p span{
	color: var(--esg-green-h-100);
	font-size: 150%;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1;
	padding: 0 .5rem;
	filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.15));
	/* transition: all .5s; */
}
.top-banner .top-style .top-databox{
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	border-radius: 0px 120px 0px 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2rem 0 1.25rem;
	background-color: var(--esg-green-h-80);
	z-index: 3;
}
.top-data{
	width: 100%;
	display: flex;
	list-style-type: none;
	justify-content: center;
}
.top-data>li{
	display: flex;
	color: rgba(255,255,255,.9);
	align-items: center;
	padding: 0 24px 0 0;
}
.top-data>li::after,.top-data>li:first-child::before{
	content: '';
	height: 55%;
	display: block;
	border-left: 1px dotted rgba(255,255,255,.5);
	margin: 0 0 0 24px;
}
.top-data>li:first-child::before{
	margin: 0 24px 0 0 ;
}
.top-data>li p{
	margin: 0;
	padding: 0;
	line-height: 1.35;
	padding: 0 .25rem;
	font-size: 1.125rem;
	letter-spacing: 1px;
	font-weight: 300;
	display: flex;
	/* align-items: center; */
}
.top-data>li .data-number span{
	color:var(--esg-green-l-100);
	text-shadow: var(--textshadow-01);
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	/* animation: animate-opacity 1s cubic-bezier(0.47, 0, 0.745, 0.715) both; */
	padding: 0 5px;
	/* line-height:.75; */
	display: flex;
    margin: -12px 0 0;
}
@keyframes animate-opacity {
    0% {
		opacity: 0;
    }
  
    100% {
		opacity: 1;
    }
  }
@media (min-width: 2100px) {

}
@media (min-width: 1620px) {
	.top-banner .top-style .top-banner-title{
		font-size: 1.35rem;
	}	
	
}
@media (max-width: 1440px) {
	.top-data>li p{
		font-size: 1rem;
	}
	.top-data>li .data-number span{
		font-size: 2.5rem;
	}
	.top-data>li:last-child .data-number span{
		font-size: 2rem;
	}
	.top-banner{
		position: relative;
		height: calc(70vh - 80px);
	}
}
@media (max-width: 1440px) {
	.top-banner .top-style>img{
		width: auto;
		height: 100%;
		margin: 0 auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		max-width: inherit;
	}
}
@media (max-width: 1240px) {
	.top-banner{
		position: relative;
	}
	.top-banner .top-style .top-banner-title{
		padding: 0 10%;
	}
	.top-data>li p{
		font-size: .9rem;
	}
	.top-data>li .data-number span{
		font-size: 2.25rem;
	}
	.top-data>li::after, .top-data>li:first-child::before {
		margin: 0 0 0 15px;
	}
	.top-data>li {
		padding: 0 15px 0 0;
	}
	.top-data>li:first-child::before {
		margin: 0 15px 0 0;
	}
	.top-banner .top-style::before{
		background-color: rgba(190,190,190,.1);
	}
}
@media (max-width: 1024px) {
	.top-banner .top-style .top-banner-title{
		font-size: .9rem;
	}	
}
@media (max-width: 991px) {
	.top-banner .top-style .top-databox{
		display: none;
	}
	.top-data>li .data-number span{
		font-size: 1.5rem;
	}
	.top-banner .top-style .top-banner-title p span{
		/* color: rgba(255,255,255,.9); */
	}
}

/* 首頁區塊 */

/* about */
.aboutbox{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	background-image: url(../images/bg-about.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size:100%  auto ;
	width: 100%;
	position: relative;
}
.about{
	width: 50%;
	height: 100%;
	background: rgba(255,255,255,.85);
	border-radius: 0 240px 0 0;
	transition: all .5s;
}
.aboutinfo{
	width: 100%;
	height: 100%;
	/* background: rgba(255,255,255,.5); */
	min-height: 550px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-flow: column;
	padding: 25% 20% 18% 18%;
	transition: all .5s;
	margin: 0;
}
/* .aboutbox::after {
    content: '';
	width: 27.4%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: url(../images/bg-line-right.svg) bottom right no-repeat;
    background-size: 100% auto;
    opacity: .5;
} */
.aboutinfo h2{
	margin: 0 0 1.5rem;
}
.aboutinfo h2>span{
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	z-index: 2;
    position: relative;
}

.aboutinfo p{
	margin: 0 0 1.5rem;
	color: #444;
	font-size: 1.075rem;
	font-weight: 500;
	line-height: 2; 
	text-align: left;
}
@media (min-width: 1720px) {
	.aboutinfo {
		width: auto;
		padding: 21% 14% 14% 12%;
		/* margin: 20px 0 20px calc(100% / 3 ); */
		/* margin: calc(100% / 24 ) 0 calc(100% / 24 ) calc(100% / 6 ); */
		/* margin: 0 0 0 calc(100% / 6 ); */
		min-height: inherit;
	}
	.aboutbox::before {
		opacity: .3;
	}
}
@media (max-width: 1480px) {
	/* .aboutbox{
		background-position: center;
	} */
	.aboutinfo{
		padding: 23% 20% 17% 16%;
		min-height: inherit;
	}
	.aboutinfo h2>span {
		font-size: 2.25rem;
	}
}
@media (max-width: 1240px) {
	.aboutbox{
		background-size: auto 100%;
	}
	.aboutinfo{
		padding: 30% 20% 15% 16%;
	}
}
@media (max-width: 1080px) {
	.about {
		/* width: calc(100% / 3 * 2); */
		width: 100%;
		background: rgba(255,255,255,.8);
		border-radius: 180px 0 0 0;
	}
	/* .aboutinfo{
		padding: 20% 16% 15%;
	} */
	.aboutinfo {
		min-height: inherit;
		padding: 12% 20% 10%;
	}
}
@media (max-width: 768px) {
	.aboutinfo {
		justify-content: center;
		align-items: center;
	}
}
/* 首頁最新消息 */
.news{
	width: 100%;
	overflow: hidden;
	position: relative;
	height: 80vh;
	background-color: rgba(255,255,255,.2);
	border-bottom: 1px solid #f6f6f6;
	min-height: 720px;
}
.news .sliderbox{
	width: 1720px;
	top: 53%;
    left: 50%;
	transform: translate(-50%,-50%);
}
@media (min-width: 1620px) {
	.news .sliderbox{
		width: 100%;
		overflow: inherit;
	}
}
.news .sliderbox .owl-nav {
    position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50%;
	height: 140px;
    pointer-events: none;
    margin: 0;
}
.news .owl-theme .owl-nav [class*=owl-]{
    border-radius: 0;
    width: 70px;
	height: 140px;
	background-color: rgba(0, 0, 0, 0);
    transition: all .5s;
	opacity: .9;
}
.news .owl-theme .owl-nav .owl-next{
	right: -10px;
	background-image: url(../images/icon/icon-next-shadow.svg);
}
.news .owl-theme .owl-nav .owl-prev {
	left: -10px;
	background-image: url(../images/icon/icon-prev-shadow.svg);
}
.news .owl-theme .owl-nav .owl-next:hover {
	opacity: 1;
	right: -20px;
}
.news .owl-theme .owl-nav .owl-prev:hover{
	opacity: 1;
	left: -20px;
}
/* 首頁資訊 */
.studyBox{
	background: url(../images/bg-city.png) bottom center no-repeat;
	/* min-height: 80vh; */
	background-size: 100% auto;
	position: relative;
	padding: 10vh 0 calc(10vh + 55px);
}
.studyitem{
	width: 100%;
	padding: 0 var(--padding-y);
	max-width: 1130px;
	margin: 0 auto;
}
/* 如何加入供應商 */
.joininBlk{
	/* border-top: 1px solid #eee; */
	/* background: url(../images/bg-city.png) bottom center no-repeat; 
	background-size: 100% auto;
	*/
	position: relative;
	display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}
.joininBlk a{
	display: block;
	width: 100%;
}
.joininBlk img{
	width: 100%;
	height: auto;
}
/* 卡片 */
.cardbox{
	padding: 30px 30px;
	opacity: .3;
	transition: all .5s;
}
.cardimg{
	width: 100%;
	border-radius: 30px;
	overflow: hidden;
	position: relative;
	/* filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.0)); */
	/* box-shadow: var(--textshadow-03); */
	padding: 66% 0 0;
    transition: all .5s;
}
.cardimg img {
    width: auto;
    max-width: inherit;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all .5s;
}
.owl-item.active.center .cardbox:hover .cardimg,
.newsBlk>ul>li .cardbox:hover .cardimg{
	box-shadow: var(--textshadow-03);
}
.owl-item.active.center .cardbox:hover .cardimg img,
.newsBlk>ul>li .cardbox:hover .cardimg img{
    height: 110%;
}

/* 影片版 */
.videoBlk .cardimg:before {
    display: block;
    background:var(--esg-green-h-50);
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    -webkit-transition: background-color .25s ease-out;
    -moz-transition: background-color .25s ease-out;
    -o-transition: background-color .25s ease-out;
    transition: background-color .25s ease-out;
    z-index: 1;
}

.videoBlk .cardimg:after {
	display: block;
    color: var(--esg-red);
    position: absolute;
    left: 50%;
    top: 50%;
    content: "\f04b";
    font-family: "FontAwesome";
    font-size: 2.5rem;
    width: 60px;
    height: 35px;
    line-height: 35px;
    margin-left: -25px;
    margin-top: -15px;
    text-align: center;
    z-index: 2;
    font-size: .875rem;
    background: rgb(255 255 255 / 80%);
    border-radius: 30px;
    box-shadow: var(--textshadow-02);
}

.videoBlk .cardbox a:hover .cardimg:before {
    background: transparent;
}

.videoBlk .cardbox a:hover .cardimg:after {
    display: none;
}


.cardimg .card-tag{
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	height: 28px;
	padding: 0 25px;
	align-items: center;
	line-height: 1;
	color: #fff;
	font-size: .875rem;
	border-radius: 0 30px 0 0;
}
.newsTab>ul>li>a.tab-style.v0::before,
.cardimg .card-tag.v0{
	background: var(--esg-green-l-100);
}
.newsTab>ul>li>a.tab-style.v1::before,
.cardimg .card-tag.v1{
	background: var(--esg-green-100);
}
.newsTab>ul>li>a.tab-style.v2::before,
.cardimg .card-tag.v2{
	background: var(--esg-blue);
}
.newsTab>ul>li>a.tab-style.v3::before,
.cardimg .card-tag.v3{
	background: var(--esg-red);
}
.newsTab>ul>li>a.tab-style.v4::before,
.cardimg .card-tag.v4{
	background: var(--remind);
}
.cardtext{
	padding: 50px 25px 25px;
	border-radius: 0 0 30px 30px;
	border: 1px solid #eee;
	background-color: #fff;
	margin: -30px auto 0;
	width: 99.5%;
    transition: all .5s;
}
.cardtext>.day{
	color: #999;
	line-height: 1;
	margin: 0 0 10px;
}
.cardtext>.title{
	width: 100%;
	color: #000;
	font-size: 1.125rem;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.owl-item.active.center .cardbox{
	opacity: 1;
}
.owl-item.active.center .cardbox .cardimg,
.newsBlk>ul>li .cardbox .cardimg{
	box-shadow: var(--textshadow-03-2);
}
.owl-item.active.center .cardbox .cardtext{
	border: 1px solid #eee;
}
.newsBlk>ul>li .cardbox .cardtext{
	padding: 45px 20px 20px;
	border: 1px solid #eee;
}
.newsBlk>ul>li .cardbox .cardtext>.day {
	margin: 0 0 5px;
    font-size: .875rem;
}
.newsBlk>ul>li .cardbox .cardtext>.title {
    font-size: 1rem;
    line-height: 1.5;
}
.owl-item.active.center .cardbox:hover .cardtext>.title,
.newsBlk>ul>li .cardbox:hover .cardtext>.title{
	color:var(--esg-green-100);
}

/* 卡片 橫 */
.cardbox.cardbox-style-2{
	padding: 0;
	opacity: 1;
	margin: 80px 0 20px;
}
.cardbox.cardbox-style-2 .card-info{
	display: flex;
	justify-content: flex-end;
	position: relative;
}

.cardbox.cardbox-style-2 .cardimg{
	width: 34.25%;
	padding: 18.5% 0 0;
	position: absolute;
	left: 0;
	top: -40px;
	z-index: 2;
	transition: all .5s;
	box-shadow: var(--textshadow-03-2);
}
.cardbox.cardbox-style-2:hover .cardimg{
	box-shadow: var(--textshadow-03);
}
.cardbox.cardbox-style-2 .cardimg img {
    width: 100%;
    height: auto;
	transition: all .5s;
}
.cardbox.cardbox-style-2:hover .cardimg img {
	width: 110%;
    height: auto;
}
.cardbox.cardbox-style-2 .cardtext{
	padding: 45px 50px 60px 20%;
	border-radius:30px;
	border: 1px solid #eee;
	background-color: #fff;
	margin: 0;
	width: 82.5%;
	position: relative;
	z-index: 1;
	transition: all .5s;
}
.cardbox.cardbox-style-2 .cardtext::after{
	content: '';
	width: 34.5%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background: url(../images/bg-line-right.svg) bottom right no-repeat;
	background-size: 100% auto;
	opacity: .3;
}
.cardbox.cardbox-style-2 .cardtext p{
	margin: 0;
	padding: 0;
	color: #666;
	line-height: 1.5;
	min-height: 3rem;
}
.cardbox.cardbox-style-2 .cardtext .title{
	margin: 0 0 10px;
	position: relative;
	width: fit-content;
}
.cardbox.cardbox-style-2 .cardtext .title span{
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	z-index: 2;
    position: relative;
}
/* .cardbox.cardbox-style-2 .cardtext .title span{
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0 0 10px;
	line-height: 1;
	position: relative;
	width: fit-content;
} */
/* .cardbox.cardbox-style-2 .cardtext .title::after{
	content: '';
	display: block;
	height: 50%;
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: var(--esg-green-l-50);
	z-index: 0;
	transition: all .5s;
	animation-name:textbgdAnime;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
} */
.cardbox.cardbox-style-2:hover .cardtext .title::after{
	width: 100%;
}
.cardbox.cardbox-style-2:hover .cardtext>.title{
	color:var(--esg-green-h-100);
}
.cardbox.cardbox-style-2 .more-btn{
	position: absolute;
	right: 25px;
	bottom: 25px;
	z-index: 2;
}
@media (max-width: 1240px) {

	.cardbox.cardbox-style-2 {
		margin: 80px 0 30px;
	}
	.cardbox.cardbox-style-2 .cardimg{
		width: 40%;
		padding: 20% 0 0;
		top: -45px;
	}
	.cardbox.cardbox-style-2 .cardtext {
		padding: 45px 50px 60px 25%;
	}
	
}
@media (max-width: 1024px) {
	.cardbox.cardbox-style-2 .cardtext .title span {
    font-size: 1.35rem;
	}
}
@media (max-width: 990px) {
	.studyitem {
		max-width: 600px;
	}
	.cardbox.cardbox-style-2 {
		margin: 50px 0 30px;
	}
	.cardbox.cardbox-style-2 .card-info {
		flex-flow: column;
	}
	.cardbox.cardbox-style-2 .cardimg {
		width: 90%;
		padding: 40% 0 0;
		/* top: -45px; */
		position: relative;
		top: auto;
		margin-bottom: -30px;
	}
	.cardbox.cardbox-style-2 .cardtext {
		padding: 60px 50px 60px 50px;
		margin: 0 0 0 10%;
		width: 90%;
		/* margin: 0 auto; */
	}
}

/* contact */
.Blk-form:has(.contact-blk){
	width: 90%;
	margin: 0 auto;
	padding: 1rem 0 0;
}
.contact-blk{
	margin-bottom: 30px;
    /* box-shadow: var(--textshadow-03-2); */
	transition: all .5s;
	border-radius: 30px;
	padding: 0;
	margin: 0 auto;
}
.Blk-form .contact-blk .form {
	margin: 1rem auto;
	border-top: 1px #ddd dotted;
}
.Blk-form .contact-blk .form-item{
    border-left: 0px solid #ddd;
	border-right: 0px solid #ddd;
	border-bottom: 1px #ddd dotted;
}
.Blk-form .contact-blk .form .form-item>div {
    padding: 1rem;
}
.Blk-form .contact-blk .form-item .col-1x{
    border-right: #ccc 0px dotted;
    background-color: transparent;
    font-weight: 400;
    font-size: .875rem;
    border-bottom: #ccc 0px dotted;
    color: #444;
}

/* 動態問卷 */
.forms-inner {
	max-width: 960px;
	margin: 0 auto 2rem;
	background-color: #fff;
	box-shadow: var(--textshadow-02);
}
.timeBlk{
	max-width: 960px;
	margin: 0 auto 0rem;
}
.forms-inner:hover {
	box-shadow: var(--textshadow-03);
}
.forms-inner .banner {
	overflow: hidden;
	max-height: 260px;
}

.forms-inner .banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.forms-inner .main {
	padding: 3rem 0 1.5rem;
	display: block;
    height: auto;
}
.forms-inner form .main {
	padding: 3rem 0 0;
	display: block;
    height: auto;
}
.forms-inner .main>form{
	padding: 0 3rem;
}
.forms-inner .title {
	margin-bottom: 1rem;
}

.forms-inner .content {
	padding: 0 3rem;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 10vh;
}
.forms-inner .content h3{
	color: #000;
}
.forms-inner .content .btnBlk{
	border-top: 0px solid #000;	
	padding: 60px 0 0px 0;
}
.forms-inner form .content {
	padding: 0;
	margin: 0;
	display: block;
}
.forms-inner .send {
	text-align: center;
	/* margin: 2rem auto; */
	padding: 2rem 3rem;
	display: flex;
}
.forms-inner form .send{
	padding: 2rem 0 0 0;
	border-top: 1px dotted #eee;
}
.forms-inner .send>button,.forms-inner .send>a{
	color: var(--esg-red);
    border-color: var(--esg-red);
	background: #fff;
	padding: 0.6rem 3rem;
    font-size: 1.025rem;
    border-radius: 30px;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(136, 165, 191, 0.2) 5px 2px 16px 0px, rgba(255, 255, 255, 0.5) -5px -2px 16px 0px;
	transition: all .5s;
	margin: 0 auto;
}
.forms-inner .send>button:hover,.forms-inner .send>a:hover{
	color: #fff;
	background:  var(--esg-red);
	box-shadow:rgba(136, 165, 191, 0.48) 5px 2px 16px 0px, rgba(255, 255, 255, 0.8) -5px -2px 16px 0px;
}
.question .item {
	margin-bottom: 2.5rem;
}

.question .item .answer .form-check {
	margin: 0.5rem 0;
	padding-left: 0;
	display: flex;
    align-items: center;
}

.question .item .answer .form-check input {
	width: 20px;
	height: 20px;
}

.question .item .answer .form-check label {
	vertical-align: middle;
}

.question.num .item {
	counter-increment: my-awesome-counter;
	position: relative;
	padding: 0 0 0 2.5rem;
	width: 100%;
	background-color: #fff;
}

.question.num .item::before {
	position: absolute;
	top: 0px;
	left: 0px;
	content: counter(my-awesome-counter);
	background: var(--esg-green-h-80);
	width: 1.6rem;
	height: 1.6rem;
	display: block;
	line-height: 1.6rem;
	color: white;
	text-align: center;
	font-weight: bold;
}

.question .item .topic {
	line-height: 26px;
	margin-bottom: 1rem;
	font-weight: bold;
	font-size: 1.15rem;
	position: relative;
}
.question .item.required .topic::before {
	content: '*';
	color: var(--esg-red);
	position: absolute;
	top: -8px;
	left: -10px;
}

.question textarea.form-control {
	height: 5rem;
}

.forms-inner .require {
	text-align: right;
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
}

.forms-inner .require span {
	color:  var(--esg-red);
}

.timeBlk::before {
	content: '\f133';
	font-family: "Font Awesome 6 Free";
	/* font-weight: bold; */
	float: left;
	margin-right: 0.5rem;
}

.welcome-text {
	clear: both;
	margin-bottom: 2rem;
	line-height: 1.75;
	background-color: #fbfbfb;
	padding: 1.5rem 1.5rem;
	font-size: 0.95rem;
	border-radius: 10px;
}
.forms-inner .welcome-text h3{
	color: #000;
}
.welcome-text p:last-child {
	margin-bottom: 0;
}

.statement-text {
	border-top: #eee 1px solid;
    padding: 2rem 3rem;
    font-size: 0.9rem;
    color: #666;
    background: #fbfbfb;
}
.statement-text h3{
	font-weight: 600;
}
.statement-text p {
	margin-bottom: 0.5rem;
}

.statement-text p:last-child {
	margin-bottom: 0;
}
.forms-inner .btnBlk{
	border-top: 1px solid #eee;
}
.footer {
	text-align: center;
	font-size: 0.9rem;
	margin-top: 2rem;
}

.footer img {
	width: 150px;
	margin: 0 0.25rem;
	vertical-align: baseline;
}
@media (max-width: 991px) {
	.forms-inner .main {
		padding: 1.5rem 0 1.5rem;
	}
	.forms-inner .main>form{
		padding: 0 1.5rem;
	}
}

/* 頁數 */
.page {
	margin: 3rem 0 2rem;
}

	.page ul {
		justify-content: center;
		flex-wrap: wrap;
		margin: 0;
		list-style-type: none;
	}

		.page ul li {
			border: none;
			padding: 0;
			text-indent: initial;
			margin: 0;
		}

			.page ul li::before {
				display: none;
			}

			.page ul li a {
				width: 45px;
				height: 45px;
				font-size: 0.875rem;
				line-height: 1;
				color: #333;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 30px;
				background: transparent;
				margin: 0 0.25rem;
				padding: 0;
				transition: all .5s;
				text-decoration: none;
			}

				.page ul li a:hover, .page ul li a.page-button:hover {
					color: var(--esg-red);
					text-decoration: none;
					font-weight: 600;
					background-color: #fff;
					box-shadow: var(--textshadow-03-2);
				}

				.page ul li a.active {
					color: var(--esg-red);
					background-color: #fff;
					font-weight: 600;
					box-shadow: var(--textshadow-03-2);
				}

				.page ul li a.page-button {
					color: #888;
					border: 1px solid rgba(0,0,0,0);
					padding: 0 1rem;
				}

				.page ul li a i::before {
					vertical-align: middle;
				}

.page-display {
	text-align: center;
	color: #464646;
	font-size: 0.875rem;
}

@media (max-width: 992px) {
	.page ul {
		justify-content: center;
	}
}