"file://192.168.1.9/Changingtec2021/assets/images/page_banner_project.png"map-bg-cover/*


/*============Glogbal Style================ */
html,
body {
    height: 100%;
	font-family:"微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande";
}

p {
    font-family:"微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande";
    font-size: 17px;
    line-height: 2.3rem;
    color: #000;
    margin: 0;
}

.section-padding {
padding: 80px 0 80px 0;
}


.text-changing{
color: #0192ff;
}


.text-green{
color:#8bc751;
}


a {
-webkit-transition: .3s;
transition: .3s
}

a:hover {
color: #000;
text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-family:"微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande";
color: #000;
font-weight: 600;
line-height: 1.6;
margin: 0;
}

h5{
color: #0071bc;
}



td,th,a,p{
font-size:17px;	
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
color: #fff;
background-color:#04b1cd;}



/*collapse 控制箭頭方向*/
.with-chevron[aria-expanded='true'] i {
display: block;
transform: rotate(180deg) !important;
}

.fa{
font-size:25px;
}
.btn-color {
color: #fff; 
background-color: #333535;
border-color: #fff;
}


.collapse-title h5{
color: #fff;

}


/*table表頭顏色*/

.table .thead-dark-changing th {
color: #fff;
background-color: #05a2cc;
/*    border-color: #006cc4;*/
}


/*共用 title*/
.main-banner-title h1{
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
line-height: 4.9rem;
font-size: 60px;
color: #fff;
}

.esg-title {
margin-bottom: 60px;
}

.esg-title h2 {
position: relative;
font-size: 45px;
padding-bottom: 20px;
margin-bottom: 15px;
line-height: 4rem;
}

.esg-title h2:before,
.esg-title h2:after {
position: absolute;
content: '';
left: 50%;
bottom: 0;
width: 50px;
height: 5px;
background-color: #000;
}

.esg-title h2:before {
left: auto;
right: 50%;
background-color: #0192ff
}


/*-------------------------------------------*/


/*經營者的話*/

.chairman-banner-cover{
padding:13% 0;
background-image: url("../images/esg/chairman_bg.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}

.signaute-title img{
/*width:20%;*/
margin-left:2%;
}

/*永續發展*/
.develepment-banner-cover{
padding:13% 0;
background-image: url("../images/esg/develepment_bg.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}

.sdgs-title img{
width:70%;
margin:6% 0;
}

.sdgs-title > p{
line-height: 1.8rem;
margin-bottom: 6%;
}


/*公司治理*/
.governance-banner-cover{
padding:13% 0;
background-image: url("../images/esg/governance_bg.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}

.supplier-box{
box-sizing: border-box;
border: 1px solid #000;
padding: 1rem;
margin: 0.5rem;
}

.supplier-type-img{
padding:47% 0 8% 0;
background-image: url("../images/esg/pic_supplier_type.png");
/*background-size: cover;*/
/*background-position: center center;*/
/*width:50%;*/
background-repeat: no-repeat;
	
}



/*利害人關係*/
.stakeholders-banner-cover{
padding:13% 0;
background-image: url("../images/esg/stakeholders_bg.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}

.process-box{
border: 1px solid #000;
padding:2%;
margin:1% 0 ;
}


/*永續環境*/

.environment-banner-cover{
padding:13% 0;
background-image: url("../images/esg/environment_bg.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}


/*社會公益*/
.welfare-banner-cover{
padding:13% 0;
background-image: url("../images/esg/welfare_bg.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}


.word-break-h1{
display: block;
}


.word-break-h2{
display: block;
}

/*media query*/
@media screen and (max-width: 1600px) {

}

/*Large devices 筆電*/
@media screen and (max-width: 1400px) {
.main-banner-title h1{
font-size: 50px;
line-height: 4rem;
}
.esg-title h2 {
font-size: 42px;
line-height: 3.5rem;
}
	
}

/*Large devices (desktops, less than 1200px)*/
@media screen and (max-width: 1199.98px) {
.section-padding {
padding: 50px 0 20px 0;
}	

}


/*Medium devices (tablets, less than 992px)*/
@media screen and (max-width: 991.98px) {
.main-banner-title h1{
line-height: 3.5rem;
font-size: 37px;
}

.esg-title h2 {
font-size: 34px;
line-height: 3rem;
}
	
}


/*Small devices (landscape phones, less than 768px)*/
@media screen and (max-width: 767.98px) { 
.main-banner-title h1{
line-height: 3rem;
font-size: 36px;
}

.esg-title h2 {
font-size: 32px;
line-height: 2.5rem;
}

}


/*Extra small devices (portrait phones, less than 576px)*/

@media screen and (max-width: 575.98px) { 
	
/*經營者的話*/

.chairman-banner-cover{
padding:40% 0;
background-image: url("../images/esg/chairman_bg_phone.png");
}


/*永續發展*/
.develepment-banner-cover{
padding:40% 0;
background-image: url("../images/esg/develepment_bg_phone.png");
}


/*公司治理*/
.governance-banner-cover{
padding:40% 0;
background-image: url("../images/esg/governance_bg_phone.png");
}
	

/*利害人關係*/
.stakeholders-banner-cover{
padding:40% 0;
background-image: url("../images/esg/stakeholders_bg_phone.png");
}

/*永續環境*/
.environment-banner-cover{
padding:40% 0;
background-image: url("../images/esg/environment_bg_phone.png");
}

/*社會公益*/
.welfare-banner-cover{
padding:40% 0;
background-image: url("../images/esg/welfare_bg_phone.png");
}	
	
	
.main-banner-title h1{
line-height: 2.5rem;
font-size: 32px;
}
.esg-title h2{
font-size:30px;
line-height: 2.5rem;
}	
	
.supplier-type-img{
padding:100% 0;
background-image: url("../images/esg/pic_supplier_type_phone.png");
/*background-size: cover;*/
background-position: center center;
/*width:50%;*/
background-repeat: no-repeat;	
}
	
a{
word-break: break-all;
}	
/*永續發展*/
.sdgs-title img{
width:130%;
margin:6% 0;
}
	
.word-break-h2{
display:inline;
}	

}

/*Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width*/