﻿.content{
  width: 100%;
  margin-top:135px;
}
.page_top{
  height: 338px;
}
.csr_ban{
  background: url(../images/csr_ban.jpg) no-repeat;
}
.csr_con,.sur{
  width: 100%;
  display: flex;
}
.csr_ope_i{
  width:50%;
  display: flex;
}
.csr_ope{
  width: 30%;
  display: flex;
}
.csr_ope img{
	width:100%;
	
	}

.csr_box{
  width:87%;
  padding: 0 20px;
}
.csr_box2{

  padding: 0 20px;
}
.csr_txt{
    width: 87%;
    padding-top: 50px;
	padding-left:20px;
}
.csr-blo-1{
  padding-right:10px;
}
.csr-blo-2{
  padding-left: 10px;
}
.csr_txt p{
  text-align: justify;
}
.p3{
  font-size:20px;
  padding: 10px 0;
}
.p1{
  font-size: 24px;
  margin-bottom: 40px;
}
.p2{
  padding: 10px 0;
  text-align: justify;
}
.mem h4{
  font-weight: 600;
  margin-bottom: 40px;
}
.sm{
  background: url(../images/csr_img5.jpg) no-repeat;
  color: #fff;
  font-size: 18px;
  line-height: 36px;
  padding: 100px 0;
}
.sm_txt{
  width: 600px;
  text-align: center;
  margin: 0 auto;
}
.sur_box{
  width: 50%;
}
.sur_r{
  padding-right: 10px;
}
.sur_l{
  padding-left: 10px;
}
.csr_rep li{
	float: left; padding:10px 20px;
}
.csr_rep li a>img{
  border-bottom: 2px solid #55bafa;
  position: relative;
}
.csr_rep li a>img::after{
  position: absolute;
  content: "";
  background: url(../images/shadow.png) bottom no-repeat;
  width: 208px;
  height: 20px;
}
@font-face {
  font-family: "Akzidenz-Grotesk BQ Light Small";
  src:url(../../fonts/AkzidenzGrotesk-LightSC.otf);
}
.year{
  position: relative;
  color: #36adf9;
  font-family: "Akzidenz-Grotesk BQ Light Small";
  text-align: left;
  font-size: 30px;
  margin: 25px 40px 10px 40px;
}
.year::after{
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-color:rgba(54,173,249,0.25) transparent transparent transparent ;
  border-style: solid;
  border-width: 35px;
    margin-top: -28px;
    margin-left: -41px
}
.csrdown{
  float:left;
  width:100%;
}
.csrdown_l{
  float:left;
  text-align:center;
  font-family: Microsoft JhengHei;
}
.csrdown_l img{
  float:left;
  margin:20PX 40px;
}

.csrdown_r{
  float:left;
  width:50%;
  font-family: Microsoft JhengHei;
}

/*ope.html*/
.ope_txt{
  width: 90%;
  margin:0 13px;
}
.ope_txt2{
  width: 75%;  margin:0 13px;
}
.ope_con{
  margin: 40px 0;
}


/*ppp.html*/
.pri{
  background: url(../images/ppp_img2.jpg) no-repeat;
  color: #fff;
  font-size: 18px;
  line-height: 36px;
  padding: 100px 0;
  text-align: center;
}
.p4{
  margin: 40px 0;
  text-align: justify;
}
.mem-block {
    display: inline-block;
}
.ch-3{
	width: 33%;
}
.mem h4 {
  font-weight: 600;
  font-size: 24px;
}
.name-if_blo {
  padding: 60px 0px;
}
.mem-tit01 {
    width: 133px;
    height: 133px;
    text-align: center;
    line-height: 133px;
    background: #36adf9;
    color: #fff;
    font-size: 20px;
}
.mem-tit01 span.rep-span {
    display: inline-block;
    line-height: 28px;
    margin-top: 38px;
}
.mem-ul-line {
  border-left: 1px #36adf9 solid;
  margin-left: 30px;
  padding: 20px 0px 25px 62px;
  /*background: url(../images/ma_icon_pen.png) no-repeat 5% 13%;*/
background: url(../images/ma_icon_pen.png) no-repeat 5% 25px;
}
.mem-ul-line li {
line-height:30px;
  font-size: 16px;
  color: #4d4e4e;
}

.csr-blo-p2 {
  padding:100px 0 100px 80px;
}

a.csr-btn {
    padding: 4px 50px;
}

.text-center.text-btn-link {
    margin-top: 50px;
}

h4.csr-tit-1 {
    font-size: 24px;
}



/*rep.html*/
.newrep{
    background: url(../images/rep_img1.jpg) no-repeat;
    color: #fff;
    font-size: 18px;
    line-height: 36px;
    padding: 200px 0;
}
.ch-6{
	width: 49.5%;
}

.mem .mem-block {
    vertical-align: top;
}


/*env.html*/
.env{
  display: flex;
  justify-content: space-between;
}
.env .env_box{
  width: 30%;
}
.env .env_box2{
  width: 70%;
  padding-left:50px;
}
.env .env_box3{
  width: 50%;
}
.env_box3.boxml{
  margin-left: 50px;
}
.pol{
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
.pol_box{
  display: block;
  border: 1px solid #36adf9;
  text-align: center;
  width: 20%;
padding-top: 65px;
    color: #414141;
    line-height: 92px;
  font-size:20px;
}
.pol_box:hover{
	background-color: #EFEFEF;    color: #36adf9;
	}
.pgl{
  background: url(../images/env_img4.jpg) no-repeat;
  color: #fff;
  font-size: 18px;
  line-height: 36px;
  padding: 100px 0;
  text-align: center;
}
.pgl_txt{
  width: 600px;
  margin: 0 auto;
}
.p5{
  color: #36adf9;
}
table .tab-bg{
  background-color: #36adf9;
  color: #fff;
  line-height: 40px;
}
table tr.tab-bom{
  border-bottom: 1px solid #ccc;
}
table tr.tab-bom td{
  padding: 10px 0;
}

.learn-more {
    background: rgba(255, 255, 255, 0.85);
}
#ope{
  line-height: 30px;
  text-align: justify;
}
.sur_l2{
  width: 70%;
  padding-left: 20px;
}


 /**risk.html**/
.risk table{
	text-align:left;
	border: #36adf9;

	
	
}
.risk th{
	background-color:#36adf9;text-align: center;
	color: #FFF;
	padding: 10px 0;
	
}
.risk td{	
	padding: 10px;
}
.risk table .w01{
	color: #0966E5;
	font-weight: bold;
	text-align: center;
}

.risk table .w02{

	font-weight: bold;
	
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
    /**品質政策**/

  .qur_txt {
    position: relative;
  }
  .qur_txt_l {
    padding: 3% 2.5% 5% 2.5%;
    width: 53%;
    float: left;
  }

  .qur_txt_l span {
    width: 100%;
  }

  .qur_txt_l .tit {
    text-align: left;
  }

  .qur_txt_r {
    width: 63%;
    position: absolute;
    display: inline-block;
    top: 15px;
    right: -158px;
  }

  .qur_txt_r img {
    width: 100%;
  }
}


@media screen and (min-width: 768px) and (max-width: 1024px) {
    /**品質政策**/
  .qur_txt_l {
    padding: 3% 2.5% 5% 2.5%;
    width: 97%;
    float: left;
  }

  .qur_txt_l span {
    width: 100%;
  }

  .qur_txt_l .tit {
    text-align: left;
  }

  .qur_txt_r {
    width: 95%;
    position: relative;
    display: inline-block;
    top: -30px;
  }
}

@media screen and (min-width: 667px) and (max-width: 768px) {
  .qur_txt_l {
    padding: 3% 2.5% 5% 2.5%!important;
  }
}

@media screen and (min-width: 700px) and (max-width: 768px) {
  /**ope.html**/


  img.ope-img-r {
    width: 51%;
    display: inline-block;
    float: right;
    padding-left: 20px;
    margin-top: -24px;
    vertical-align: top;
  }

  img.ope-img-l {
    width: 49%;
    display: inline-block;
    float: left;
  }

  .ope_txt2 p.ope-txt2-p1 {
    margin-top: 15px;
    display: inline-block;
  }

  .ope_txt {
    width: 100%;
  }

  .ope_txt2 {
    width: 100%;
  }

  .csr_txt {
    padding-top: 96px;
  }

  .csr_txt p {
    padding: 0px 25px;
  }

  .blo-clear {
    clear: both;
  }

  .learn-more {
    padding: 10px 30px!important;
  }

  .text-center a.csr-btn {
    padding: 10px 50px !important;
  }

  .csr-blo-p2 {
    padding: 80px 0 0 20px;
    /*width: 35%;
    display: inline-block;
    padding: 0px 5px 0px 20px;
    position: relative;
    top: 100px;*/
  }

  .mem .mem-block {
    width: 49%;
  }

  .mem-pos {
    position: relative;
    top: -24px;
  }

  /**env.html**/
  .env-table-b {
    overflow-x: auto;
    min-height: .01%;
  }

  table.env-table {
    width: 200%;
  }

  .pol_box {
    width: 24%;
  }
  .csr_box{
    width: 50%;
    margin-bottom: 30px;
  }

  /*rep.html*/
  .csrdown_r {
    width: 100%;
    padding: 0px 10px;
  }


}

@media screen and (min-width: 320px) and (max-width: 700px) {
  .content{
    margin-top: 90px;
  }
  .csr-blo-2 .text-right,.csr-blo-1 .text-right,.sur_box .text-right,.csr_txt  .text-right{
    text-align: center;
  }
  .csr_ban {
    background: url(../images/csr_ban.jpg) -400px 0 no-repeat;
}
  .csr_con,.sur{
    display: block;
  }
  .csr_box{
    width: 100%;
    margin-bottom: 30px;
  }
  .ch-3{
    width: 100%;
  }
  .csr_box > img{
    width: 100%;
  }
  .csr_ope{
    width: 100%;
  }
  .csr_txt{
    width: 100%;
    padding-top:30px;
  }
  /*#ope{
    padding: 0 10px;
  }*/
  .evr_box{
    width: 100%;
  }
  .evr_box2{
    width: 100%;
  }
  .env_box{
    width: 100%;
  }
  .env_box2{
    width: 100%;
  }
  .table-responsive{
    border: 0;
  }
  .env_box2 table{
    width: 100%;
    margin: 30px 0;
  }
  .evr_box2 img{
    width:100%;
  }
  .evr .p1{
    margin: 0 20px 50px 20px;
  }
  .sm_txt{
    width: 100%;
    margin-left:0;
  }
  .sur_box{width: 100%;}

  /**品質政策**/
  .qur_txt_l {
    padding: 3% 2.5% 12% 2.5%;
    width: 97%;
    float: left;
  }

  .qur_txt_l span {
    width: 100%;
  }

  .qur_txt_l .tit {
    text-align: left;
  }

  .qur_txt_r {
    width: 95%;
    position: relative;
    display: inline-block;
    top: -30px;
  }

  .bgw {
    font-size: 32px;
  }
  .csr-blo-1 {
    padding-bottom: 28px;
    padding-right:0;
  }
  .csr-blo-2 {
    padding-left: 0px;
  }
  .csr-blo-2 > img,.sur_box > img{
    width: 100%;
    max-width: 100%;
  }
  .sur_l{
    padding-left: 0;
  }
  .sur_r{
    padding-right: 0;
  }
  /*ppp*/
  .csr-blo-p2 {
    padding: 30px 0;
    text-align: justify;
  }
  /*rep.html*/
  .csrdown_r {
    width: 100%;
    padding: 0px 10px;
  }


  .csr_txt {
    width: 100%;
    padding-top: 0px;
  }

  .csr_ope {
    width: 100%;
    display: flex;
  }

  .blo-clear {
    padding: 0;
  }


  .sm {
    padding: 20px;
  }

  .sm_txt {
    width: 100%;
    margin-left: 0%;
  }

  .sm .sm_txt p {
    font-size: 16px;
  }

  .sm .sm_txt p.p1 {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .sur_box {
    width: 100%;
  }

  .sur_box .text-right {
    padding-bottom: 25px;
  }

  .ope_txt {
    width: 100%;
	margin:0px;
  }

  .ope_txt2 {
    width: 100%;	margin:0px;

  }
  .ope_txt2 p{
	  margin:0 25px;
  }	  
	  
  p.ope-txt2-p1 {
    margin-top: 20px;
  }

  /**ppp.html**/


  .pri {
    padding: 20px 0;
  }

  /*.mem-ul-line {
    padding: 20px 15px 25px 56px;
  }*/

  .section-heading h2 {
    font-size: 36px;
  }

  /**rep.html**/
  .newrep {
    background-position: -318px 0px;
  }

  .ch-6 {
    width: 100%;
  }

  .mem-blo-p2 p {
    padding-top: 10px;
    text-align: left;
  }

  /**pop**/
  .csrdown_l img {
    margin: 20PX 0px;
    padding: 20px;
  }

  .csrdown_l p a {
    font-size: 16px;
    padding: 10px 20px;
  }



  .panel-body ul.ask-ul {
    padding: 0;
  }

  /**ope.html**/
  .csr_con .ope_txt2 p, .ope_txt p {

	margin:5px;
  }

  .csr_box {
    margin-bottom: 0px;
  }
   .csr_box img{
	   width:70%;
	   margin:0 25px;
  }  

  /**env.html**/
  .env {
    display: block;
    justify-content: space-between;
  }

  .env .env_box2 {
    width: 100%;
    padding-left: 0px;
    margin-top: 40px;
  }

  .env .env_box {
    width: 100%;
  }

  .env .env_box3 {
    width: 100%;
  }

  .env-table-b {
    overflow-x: auto;
  }

  table.env-table {
    width: 200%;
  }

  .env_box3.boxml {
    margin-left: 0px;
    margin-top: 40px;
  }

  .pol {
    display: block;
  }

  .pol_box {
    display: inline-block;
    width: 49%;
    margin-bottom: 3px;
    font-size: 15px;
    padding-top: 42px;
  }

  .pgl_txt {
    width: 100%;
    margin: 0 auto;
  }
  .text-center.text-btn-link {
    margin-top: 20px;
  }
.csr_box2 img{
	margin:0 25px;
	width:70%;
	} 
  
}

@media screen and (max-width:420px){
  .env_box2 table{
    width: 200%;
  }
}

/**「iphone5」**/
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
  .bgw {
    font-size: 28px;
  }
  .pri p {
    font-size: 16px;
  }

  .pri .p1 {
    font-size: 24px;
    margin-bottom: 25px;
  }
  .section-heading h2 {
    font-size: 32px;
  }

  .pol_box {
    font-size: 15px;
  }

}
