@charset "utf-8";

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.content{
	min-width:940px;
}
#top_menu ul li:nth-child(5) p:first-child{
    color: #205167 !important;
}
.fixed{
	position:fixed !important;
}


.pc_menu {
    display: block !important;
    width: 100%;
    height: 60px;
    background: #fff;
    position: absolute;
    top: 0px;
	z-index:9999;
}


.csr_top{
	display:block;
	width:100%;
	height:644px;
	position:relative;
	background:url(../../images/csr/csr_top.jpg) no-repeat top center;
	background-size:cover;
	margin-top:60px;
}


.csr_top p.pan{
	position:relative;
	z-index:2;
	font-size:0.9rem;
	top:40px;
	width:95%;
	max-width:940px;
	margin:0 auto;
}
.csr_top p.pan a{
	font-size:0.9rem;
	display:inline-block;
	margin-right:15px;
}

.csr_top_title{
	width:100%;
	max-width:940px;
	margin:0 auto;
	position:relative;
	top:35%;
}


.csr_top h2{
	display:block;
	width:360px;
	text-align:center;
	position:absolute;
	height:48px;
	line-height:48px;
	right:0;
	font-size:2.4rem;
	letter-spacing:0.8rem;
	color:#fff;
	font-weight:normal;
	z-index:2;
}



.csr_top h2:after{
	position:absolute;
	display:block;
	content:'';
	height:22px;
	width:100%;
	bottom:-5px;
	background:rgba(0,29,49,0.5);
	z-index:-1;
}


h3.title_h3{
	font-size:1.4rem;
	letter-spacing:0.1rem;
	line-height:4rem;
	border-top:1px solid #C1C0BE;
	border-bottom:1px solid #C1C0BE;
	text-align:center;
	color:#003851;
}

.csr_content01{
	width:100%;
	background:url(../../images/csr/csr_content01.gif) no-repeat center center;
	background-size:cover;
	padding-bottom:240px;
  position:relative;

}

.csr_content01:after {
    display: block;
    width: 100%;
    height: 240px;
    content: '';
    position: absolute;
    background: url(../../images/head_area_after.png) no-repeat top right;
    background-size: cover;
    bottom: 0;
    right: 0;

}

.inner{
	width:90%;
	max-width:870px;
	margin:0 auto;
}


.csr_content01 .text_area{
	width:580px;
	float:left;
	margin-top:40px;
}


.csr_content01 .text_area p{
	font-size:0.9rem;
	color:#000;
	line-height:1.8rem;
	display:block;
}
.csr_content01 .text_area ul{
	display:block;
	margin-top:40px;
}
.csr_content01 .text_area ul li{
	width:180px;
	display:inline-block;
	margin-right:4%;
}

.csr_content01 .text_area ul li img{
	width:100%;
}

.csr_content01 .text_area ul li span{
	display:block;
	width:100%;
	text-align:center;
	font-size:0.9rem;
	color:#fff;
	background:#003851;
	line-height:2rem;
	margin-top:12%;
}

.csr_content01 .text_area .imgtitle{
	display:block;
	width:388px;
	text-align:center;
	font-size:0.9rem;
	color:#fff;
	background:#003851;
	line-height:2rem;
	margin-top:4%;
}

.csr_content01 .img01{
	display:block;
	width:270px;
	float:right;
	margin-top:40px;
}

.csr_content02{
	margin-top:200px;
}

.csr_content02 p{
	display:block;
	width:395px;
	float:left;
	font-size:0.9rem;
	line-height:1.6rem;
	margin-top:30px;
}

.csr_content02 .img04{
	width:279px;
	float:right;
	margin-top:30px;
}

.csr_content02 .img05{
	width:158px;
	float:right;
	margin-right:2%;
	margin-top:30px;
}

.csr_content02 .img05 img{
	width:100%;
}

.csr_content02 .img05 span{
	display:block;
	width:100%;
	text-align:center;
	margin-top:8%;
}

.csr_content02 .img05 span img{
	width:23px;
}

.csr_content02 .img05.heart {
    width: 40%;
    float: none;
    margin: 30px 0 0 20px;
    display: inline-block;
}

.csr_content02 .img06{
	width:279px;
	float:right;
	margin-top:15px;
}

.csr_content02 .img08{
	width:279px;
  float:right;
	margin-top:60px;
}

.corona .img09{
	width:158px;
	float:right;
	margin-right:2%;
	margin-top:30px;
}

.corona .img09 img{
	width:100%;
}

.corona .img09 span{
	display:block;
	width:100%;
	text-align:center;
	margin-top:8%;
}

.corona .img09 span img{
	width:23px;
}



.csr_content03{
	width:100%;
	background:url(../../images/csr/csr_content03.gif) no-repeat center center;
	background-size:cover;
	height:1260px;
	position:relative;
}


.csr_content03 .inner{
	width:90%;
	max-width:840px;
	position:absolute;
	height:500px;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
}

.csr_content03 .text_area{
	width:560px;
	float:left;
	margin-top:40px;
}
.csr_content03 .text_area p{
	font-size:0.8rem;
	line-height:1.7rem;
}
.csr_content03 .images_area{
	width:280px;
	float:right;
	margin-top:40px;
}

.csr_content03 .images_area img{
	width:100%;
}
.csr_content03 .images_area img.img07{
	width:120px;
	display:block;
	float:right;
	margin-top:20px;
}

.csr_content03 .images_area span{
	width:125px;
	height:48px;
	display:block;
	border:1px solid #5D808F;
	float:left;
	font-size:0.8rem;
	text-align:center;
	line-height:1.6rem;
	padding:15px 0;
	color:#000;
	position:relative;
	margin-top:40px;
}


.csr_content04, .csr_donation{
	margin:0 auto;
}
.csr_content04 .inner p, .csr_donation .inner p{
	display:block;
	width:562px;
	float:left;
	font-size:0.8rem;
	line-height:1.7rem;
	margin-top:40px;
}
.csr_content04 .inner img, .csr_donation .inner img{
	display:block;
	width:280px;
	float:right;
	margin-top:40px;
}


.csr_content05{
	width:100%;
	background:url(../../images/csr/csr_content05.gif) no-repeat center center;
	background-size:cover;
	height:1000px;
	position:relative;
	margin-top:100px;
}


.csr_content05 .inner{
	height:400px;
	width:90%;
	max-width:840px;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
}

.csr_content05 .inner p{
	display:block;
	width:552px;
	float:left;
	font-size:0.8rem;
	line-height:1.7rem;
	margin-top:40px;
}
.csr_content05 .inner img{
	display:block;
	width:279px;
	float:right;
	margin-top:40px;
}


.csr_content06{
	width:100%;
	background-size:cover;
	padding-bottom:0;

}

.csr_content06 h3{
	width:90%;
	max-width:840px;
	margin:100px auto 0;
	text-align:center;
	font-size:1.6rem;
	line-height:2.5rem;
	color:#003851;
	border:1px solid #003851;
	padding:30px 0;
}

.csr_sekijuji img{
	text-align: center;
}

.transfer-wrap .activity-content {
  width: 800px;
  margin: 100px auto 0;
  display: block;
}
.transfer-wrap .activity-content h3 {
  position: relative;
  margin: 0 auto 50px;
  width: 490px;
  border: 1px solid #224D62;
  text-align: center;
  line-height: 36px;
  letter-spacing: 0.4rem;
  font-size: 1.6rem;
  color: #224D62;
  padding: 1% 0;
  font-weight: normal;
}
.transfer-wrap .activity-content h3 img {
  margin: 0 10px;
}
.transfer-wrap .activity-content h3 font {
  transform: translateY(-3px);
  display: inline-block;
}
.activity-content p.activity-lead {
  text-align: center;
  line-height: 200%;
  margin-bottom: 30px;
}
.transfer-wrap {
  width: 800px;
  margin: 75px auto 60px;
  display: block;
}
.transfer-wrap .trans-info-title {
  text-align: center;
  margin-bottom: 50px;
}
.transfer-wrap .trans-total-wrap {
  width: 780px;
  border: 2px solid #9E9E9F;
  margin-bottom: 40px;
}
.trans-total-wrap ul li .month-donation-value {
  font-size: 20px;
  color: 20px;
}
.trans-total-wrap ul li:first-child {
  border-right: 2px solid #9E9E9F;
  box-sizing: border-box;
}
.trans-total-wrap ul li:first-child em {
  background-color: #003751;
  font-style: normal;
}
.trans-total-wrap ul li em {
  background-color: #9E9E9F;
  padding: 5px;
  display: inline-block;
  color: #fff;
  margin-bottom: 10px;
}
.trans-total-wrap ul li {
  padding: 15px 0;
  width: 50%;
  float: left;
  text-align: center;
  font-size: 16px;
}
.trans-total-wrap ul li {
  float: left;
  text-align: center;
  font-size: 16px;
}
.trans-total-wrap ul li:last-child {
  width: 50%;
  background-color: #003751;
  font-size: 24px;
  color: #fff;
}
.trans-total-wrap ul li:last-child em {
  background-color: #003751;
  font-size: 16px;
  font-style: normal;
}
.trans-total-wrap ul li:last-child .month-donation-value {
  font-size: 24px;
  color: 20px;
}
.transfer-wrap .years-warp {
  width: 780px;
  padding: 0 30px;
  margin: 0 auto 20px;
}
.transfer-wrap .years-title {
  background-color: #224D62;
  padding: 5px 10px;
  float: left;
  margin-right: 20px;
  color: white;
}
.transfer-wrap .years-warp ul li {
  float: left;
  padding: 5px 10px;
  border-right: 1px solid #9E9E9F;
  color: #999;
}
.transfer-wrap .years-warp ul li a {
  font-weight: bold;
  color: #003751;
}
.transfer-wrap .years-warp .best-icon {
  transform: translate(5px, -7px);
}
.transfer-wrap .years-warp ul li:last-child {
  float: left;
  padding: 5px 10px;
  border: none;
}
.transfer-wrap .activity-content .activity-list {
  width: 870px;
  margin: 0 auto;
}
.transfer-wrap .activity-content .activity-list li {
  width: 280px;
  margin-right: 10px;
  margin-bottom: 30px;
  float: left;
}
.transfer-wrap .activity-content .activity-list li:nth-child(3n) {
  margin-right: 0px;
}
.transfer-wrap .activity-content .activity-list li p strong {
  margin: 10px 0px;
  display: block;
  font-size: 18px;
  color: #003751;
}
.transfer-wrap .activity-content .activity-list li p {
  line-height: 150%;
  font-size: 15px;
  text-align: justify;
  letter-spacing: 2px;
}





.blog_area{
	width:90%;
	max-width:840px;
	margin:40px auto 0;
}

.blog_area h4{
	border-bottom:1px solid #000;
	display:inline-block;
	font-size:0.8rem;
	line-height:2rem;
	margin-bottom:20px;
}


.blog_area ul li{
	width:48%;
	display:inline-block;
	border-bottom:1px dotted #898989;
	padding:5px 0;
}

.blog_area ul li:nth-child(1),
.blog_area ul li:nth-child(3),
.blog_area ul li:nth-child(5){
	margin-right:29px;
}

.blog_area ul li p{
	display:inline-block;
	font-size:0.8rem;
	line-height:1.6rem;
	color:#000;
}

.blog_area ul li p.date{
	margin-right:15px;
	color:#003851;
}

.blog_area ul li a{
	display:block;
	font-size:0.8rem;
	margin-left:15px;
	color:#000;
}

.blog_area ul li a:hover{
  opacity:0.4;
}


.banner01{
	display:block;
	width:100%;
	margin:80px auto 0;
	max-width:700px;
}

a.ghost_btn{
	display:block;
	width:95%;
	margin:80px auto 0;
	max-width:700px;
	position:relative;
}

a.ghost_btn img:hover{
	opacity:1;
}

.banner01:after{
	content:' ';
	position:absolute;
	top:0;
	left:0;
	display:block;
	height:100%;
	width:0%;
	background:rgba(255,255,255,0.1);
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -o-transition: 0.1s;
    -ms-transition: 0.1s;
	z-index:2;
}

a.ghost_btn:hover > .banner01:after{
	content:' ';
	position:absolute;
	top:0;
	left:0;
	display:block;
	height:100%;
	width:100%;
	background:rgba(255,255,255,0.1);
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -o-transition:0.1s;
    -ms-transition: 0.1s;
	z-index:2;
}

.csr_content07{
	display:block;
	width:100%;
	height:644px;
	position:relative;
	background:url(../../images/csr/csr_content07.jpg) no-repeat top center;
	background-size:cover;
}

.csr_content07 .csr_top_title{
	width:100%;
	max-width:940px;
	margin:0 auto;
	position:relative;
	top:40%;
}


.csr_content07 h2{
	display:block;
	width:580px;
	text-align:center;
	position:absolute;
	height:30px;
	line-height:30px;
	right:0;
	font-size:2.2rem;
	letter-spacing:0.4rem;
	color:#fff;
	font-weight:normal;
	z-index:2;
}

.csr_content07 h2:after{
	position:absolute;
	display:block;
	content:'';
	height:20px;
	width:100%;
	bottom:-5px;
	background:rgba(0,29,49,0.5);
	z-index:-1;
	right:0;
}

.csr_content07 p{
	display:inline-block;
	position:absolute;
	right:2%;
	color:#fff;
	font-size:1.8rem;
	line-height:100%;
	padding-top:4%;
	letter-spacing:0.4rem;

}
.csr_content07 p font{
	display:inline-block;
	color:#ff0000;
	font-size:3.2rem;
	line-height:80%;
	vertical-align:bottom;
}


/* = pic = */

.csr_content08{
	width:100%;
}

.csr_content08 .inner{
	width:90%;
	max-width:940px;
}
.csr_content08 h3{
	color:#345F73;
	margin-bottom:80px;

}

.pic_area{

}

.pic_area ul{
	display:block;
	width:100%;
	text-align:center;
}

.pic_area ul li{
	display:inline-block;
	width:22%;
	margin-right:28px;
	margin-bottom:28px;
}

.pic_area ul li img{
	width:100%;
	display:block;
	position:relative;
}

.pic_area ul li img:hover{
	opacity:1;
}

.pic_area ul li a{
	display:block;
	position:relative;
}

.pic_area ul li a:after{
	content:' ';
	position:absolute;
	top:0;
	left:0;
	display:block;
	height:100%;
	width:0%;
	background:rgba(255,255,255,0.4);
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -o-transition: 0.1s;
    -ms-transition: 0.1s;
}
.pic_area ul li a:hover{
	display:block;
	position:relative;
}

.pic_area ul li a:hover:after{
	content:' ';
	position:absolute;
	top:0;
	left:0;
	display:block;
	height:100%;
	width:100%;
	background:rgba(255,255,255,0.1);
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -o-transition:0.1s;
    -ms-transition: 0.1s;
}


.pic_area ul li:nth-child(4n+4){
	margin:0;
}

.pic_area input{
	display:none;
}


.pic_area label{
	display:block;
	width:70%;
	max-width:690px;
	text-align:center;
	cursor: pointer;
	margin:20px auto;
	border:1px solid #898989;
	line-height:55px;
	position:relative;
	font-size:1.2rem;
	color:#567A8A;
	font-weight:bold;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
}

.pic_area label:after{
	display:block;
	width:30px;
	height:30px;
	content:' ';
	background:url(../../images/csr/arrow.png) no-repeat center center;
	background-size:cover;
	position:absolute;
	top:10px;
	right:10px;
	z-index:2;
}


.pic_area section{
	height:0;
	opacity:0;
	overflow:hidden;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
}

.pic_area input:checked +label{
	display:none;
}

.pic_area input:checked +label + section{
	height:auto !important;
	overflow: visible;
	opacity:1;
}


.csr_content04 a, .csr_donation a, .illumination a{
  width: 691px;
  height: 73px;
  color: #003851;
  letter-spacing: 0.4rem;
  text-align: center;
  line-height: 76px;
  position: relative;
  margin: 60px auto 0;
  font-size: 23px;
}

a.ghost_btn {
  background: url(../../images/csr/sekijuji_btn.png) no-repeat top center;
  background-size: 100%;
  display: block;
}

.illumination {
  margin: 100px auto 0;
}

.illumination .inner p{
	display:block;
	width:100%;
	text-align: center;
	font-size:0.8rem;
	line-height:1.7rem;
	margin-top:40px;
}
.illumination-img {
  width:547px;
  margin: 0 auto;
  display: block;
}
.illumination .inner img{
	display:block;
	height:260px;
	float:left;
	margin-top:40px;
}

/* PC */

@media screen and (min-width:769px){
    .sp_area{display:none;}
}

@media screen and (max-width:980px){
    .pc_menu {
        display:none !important;
    }
    .csr_top{
        display:block;
        margin-top:0px;

    }

    .csr_content01 .text_area .imgtitle{
        display:block;
        width:90%;
        text-align:center;
        font-size:0.7rem;
        color:#fff;
        background:#003851;
        line-height:2rem;
        margin-top:4%;
      margin-left:3%;
    }
}

/* mobile */

@media screen and (max-width:768px){

    .sp_area{
        display:block;
    }
    .content{
        max-width:736px;
        min-width:320px;
        margin:0 auto;
    }
    .pc_menu{
        display:none !important;
    }

    .csr_top{
        display:block;
        width:100%;
        height:644px;
        position:relative;
        background:url(../../images/csr/csr_top.jpg) no-repeat top center;
        background-size:cover;
        margin-top:0px;
    }


    .csr_top p.pan{
        position:relative;
        z-index:2;
        font-size:0.7rem;
        top:10px;
        width:95%;
        max-width:940px;
        margin:0 auto;
    }
    .csr_top p.pan a{
        font-size:0.7rem;
        display:inline-block;
        margin-right:15px;
    }

    .csr_top_title{
        width:100%;
        max-width:940px;
        margin:0 auto;
        position:relative;
        top:35%;
    }


    .csr_top h2{
        display:block;
        width:360px;
        text-align:center;
        position:absolute;
        height:48px;
        line-height:48px;
        right:0;
        font-size:2.4rem;
        letter-spacing:0.8rem;
        color:#fff;
        font-weight:normal;
        z-index:2;
    }



    .csr_top h2:after{
        position:absolute;
        display:block;
        content:'';
        height:22px;
        width:100%;
        bottom:-5px;
        background:rgba(0,29,49,0.5);
        z-index:-1;
    }


    h3.title_h3{
        font-size:1.4rem;
        letter-spacing:0.1rem;
        line-height:4rem;
        border-top:1px solid #C1C0BE;
        border-bottom:1px solid #C1C0BE;
        text-align:center;
        color:#003851;
    }

    .csr_content01{
        width:100%;
        background:url(../../images/csr/csr_content01.gif) no-repeat center center;
        background-size:cover;
        padding-bottom: 340px;

    }
    .csr_content01:after{
        height:120px;

    }

    .inner{
        width:90%;
        max-width:870px;
        margin:0 auto;
    }


    .csr_content01 .text_area{
        width:100%;
        float:none;
        margin-top:40px;
    }


    .csr_content01 .text_area p{
        font-size:0.9rem;
        color:#000;
        line-height:1.8rem;
        display:block;
    }
    .csr_content01 .text_area ul{
        display:block;
        margin-top:40px;
        text-align:center;
    }
    .csr_content01 .text_area ul li{
        width:42%;
        display:inline-block;
        margin-right:4%;
    }

    .csr_content01 .text_area ul li img{
        width:100%;
    }

    .csr_content01 .text_area ul li span{
        display:block;
        width:100%;
        text-align:center;
        font-size:0.9rem;
        color:#fff;
        background:#003851;
        line-height:2rem;
        margin-top:12%;
    }

    .csr_content01 .img01{
        display:none;
    }

    .csr_content02{
        margin-top:0px;
    }
    .csr_content02 .img04{
        width:60%;
        float:right;
        margin-top:30px;
    }

    .csr_content02 .img05{
        width:34.5%;
        float:right;
        margin-right:5%;
        margin-top:30px;
    }
    .csr_content02 .img05 img{
        width:100%;
    }

    .csr_content02 .img05.heart {
        width: 100%;
        margin: 20px 0 0 0;
    }

    .csr_content02 .img06{
        width:60%;
        float:right;
        margin-top:15px;
    }

    .csr_content02 .img08{
        width:60%;
        float:right;
        margin-top:30px;
    }

    .csr_content02 p{
        display:block;
        width:100%;
        float:none;
        font-size:0.9rem;
        line-height:1.6rem;
        margin-top:30px;
    }

    .csr_content02 .img05 span{
        display:block;
        width:100%;
        text-align:center;
        margin-top:8%;
    }


    .csr_content02 .img05 span img{
        width:23px;
    }

    .csr_content03{
        width:100%;
        background:url(../../images/csr/csr_content03.gif) no-repeat center center;
        background-size:cover;
        height:auto;
        position:relative;
        padding: 150px 0;
    }


    .csr_content03 .inner{
        width:90%;
        max-width:840px;
        position:relative;
        height:auto;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }

    .csr_content03 .text_area{
        width:68%;
        float:left;
        margin-top:40px;
    }
    .csr_content03 .text_area p{
        font-size:0.8rem;
        line-height:1.7rem;
    }
    .csr_content03 .images_area{
        width:30%;
        float:right;
        margin-top:40px;
    }

    .csr_content03 .images_area img{
        width:100%;
    }
    .csr_content03 .images_area img.img07{
        width:36%;
        display:block;
        float:right;
        margin-top:33px;
    }

    .csr_content03 .images_area span{
        width:55%;
        height:auto;
        display:block;
        border:1px solid #5D808F;
        float:left;
        font-size:0.6rem;
        text-align:center;
        line-height:1.6rem;
        padding:5px 0;
        color:#000;
        position:relative;
        margin-top:40px;
    }

    .csr_content03 .images_area span:after{
        display:block;
        content:'\0025b6';
        right:-12px;
        position:absolute;
        top:35%;
        color:#003851;

    }


    .csr_content04, .csr_donation, .illumination{
        margin:50px auto;
    }
    .csr_content04 .inner p{
        display:block;
        width:65%;
        float:left;
        font-size:0.8rem;
        line-height:1.7rem;
        margin-top:40px;
    }
    .csr_content04 .inner img{
        display:block;
        width:30%;
        float:right;
        margin-top:120px;
    }

    .csr_donation .inner p, .illumination .inner p{
      display: block;
      width: 100%;
      float: none;
      font-size: 15px;
      line-height: 150%;
      margin-bottom: 10px;
      text-align: left;
    }
    .csr_donation .inner img, .illumination .inner img {
      display: block;
      width: 100%;
      float: none;
      height: auto;
      margin-top: 0px;
    }

    .illumination-img {
      width: auto;
    }

    .csr_content05{
        width: 100%;
        background: url(../../images/csr/csr_content05.gif) no-repeat center center;
        background-size: cover;
        height: auto;
        position: relative;
        margin-top: 0px;
        padding: 150px 0;
    }
    .csr_content05 .inner{
        width:90%;
        max-width:840px;
        position:relative;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        height: auto;
    }

    .csr_content05 .inner p{
        display:block;
        width:65%;
        float:left;
        font-size:0.8rem;
        line-height:1.7rem;
        margin-top:40px;
    }
    .csr_content05 .inner img{
        display:block;
        width:30%;
        float:right;
        margin-top:40px;
    }


    .csr_content06{
        width:100%;
        background-size:cover;
        padding-bottom:0;

    }

    .csr_content06 h3{
        width:90%;
        max-width:840px;
        margin:0 auto;
        text-align:center;
        font-size:1.6rem;
        line-height:2.5rem;
        color:#003851;
        border:1px solid #003851;
        padding:30px 0;
    }

    .csr_content07 h2{
        width: 100%;
    }

    .csr_content07 h2 img{
        width: 80%;
    }

    .transfer-wrap {
      width: 100%;
    }
    .transfer-wrap .trans-total-wrap {
      width: 90%;
      margin: 0 auto 50px;
    }
    .trans-total-wrap ul li {
      box-sizing: border-box;
      padding: 15px;
      width: 100%;
      float: left;
      text-align: center;
      font-size: 16px;
    }

    .trans-total-wrap ul li:first-child {
      border-right: none;
    }
    .trans-total-wrap ul li em {
      font-style: normal;
    }
    .trans-total-wrap ul li:last-child {
      width: 100%;
    }

    .transfer-wrap .years-warp {
      width: 90%;
      margin: 0 auto 20px;
      padding: 0px;
    }
    .transfer-wrap .years-warp ul li {
      float: left;
      text-align: center;
      margin-bottom: 20px;
      width: 16%;
      padding: 0;
      border-right: 1px solid #9E9E9F;
      box-sizing: border-box;
    }
    .transfer-wrap .years-warp ul li:nth-child(6n) {
      border-right: none;
    }
    .transfer-wrap .years-warp ul li:last-child {
      width: 23%;
      padding: 0;
    }
    .years-warp .years-title {
      float: none;
      display: inline-block;
      margin-bottom: 10px;
    }
    .transfer-wrap .activity-content h3 font {
      font-size: 12px;
      letter-spacing: 0px;
    }

    .transfer-wrap .activity-content {
      width: 90%;
    }
    .transfer-wrap .activity-content h3 {
      position: relative;
      width: 80%;
      text-align: center;
      line-height: 100%;
      letter-spacing: 0.4rem;
      font-size: 18px;
      padding: 3% 0 2%;
      margin-bottom: 20px;
    }
    .transfer-wrap .activity-content h3 img{
      height: 18px;
      margin: 0 5px;
    }

    .transfer-wrap .activity-content h3 font{
      margin: 0;
    }
    .transfer-wrap .activity-content .activity-list {
      width: 90%;
      margin: 0 auto;
    }
    .transfer-wrap .activity-content .activity-list li {
      width: 100%;
      margin-right: 0;
      margin-bottom: 30px;
      float: left;
    }
    .transfer-wrap .activity-content .activity-list li img{
      width: 100%;
    }
    .transfer-wrap .activity-content .activity-list li:nth-child(3n) {
      margin-right: 0px;
    }
    .transfer-wrap .activity-content .activity-list li p strong {
      margin: 10px 0px;
      display: block;
      font-size: 18px;
      color: #003751;
    }
    .transfer-wrap .activity-content .activity-list li p {
      line-height: 150%;
      font-size: 15px;
      text-align: justify;
      letter-spacing: 2px;
    }


    .blog_area{
        width:90%;
        max-width:840px;
        margin:40px auto 0;
    }

    .blog_area h4{
        border-bottom:1px solid #000;
        display:inline-block;
        font-size:01rem;
        line-height:2rem;
        margin-bottom:20px;
        color:#003851;
    }


    .blog_area ul li{
        width:100%;
        display:inline-block;
        border-bottom:1px dotted #898989;
        padding:10px 0;
    }

    .blog_area ul li:nth-child(1),
    .blog_area ul li:nth-child(3),
    .blog_area ul li:nth-child(5){
        margin-right:29px;
    }

    .blog_area ul li p{
        display:inline-block;
        font-size:0.8rem;
        line-height:1.6rem;
        color:#000;
    }

    .blog_area ul li p.date{
        margin-right:15px;
        color:#003851;
    }

    .blog_area ul li a{
        display:inline-block;
        font-size:0.8rem;
        margin-left:15px;
        color:#000;
    }


    .banner01{
        display:block;
        width:100%;
        margin:80px auto 0;
        max-width:700px;
    }

    a.ghost_btn{
        display:block;
        width:95%;
        margin:80px auto 0;
        max-width:700px;
        position:relative;
    }

    a.ghost_btn img:hover{
        opacity:1;
    }

    .banner01:after{
        content:' ';
        position:absolute;
        top:0;
        left:0;
        display:block;
        height:100%;
        width:0%;
        background:rgba(255,255,255,0.1);
        -webkit-transition: 0.1s;
        -moz-transition: 0.1s;
        -o-transition: 0.1s;
        -ms-transition: 0.1s;
        z-index:2;
    }

    a.ghost_btn:hover > .banner01:after{
        content:' ';
        position:absolute;
        top:0;
        left:0;
        display:block;
        height:100%;
        width:100%;
        background:rgba(255,255,255,0.1);
        -webkit-transition: 0.1s;
        -moz-transition: 0.1s;
        -o-transition:0.1s;
        -ms-transition: 0.1s;
        z-index:2;
    }


    /* = pic = */

    .csr_content08{
        width:100%;
    }

    .csr_content08 .inner{
        width:90%;
        max-width:940px;
    }
    .csr_content08 h3{
        font-size:1rem !important;
        color:#345F73;
        margin-bottom:50px;

    }

    .pic_area{

    }

    .pic_area ul{
        display:block;
        width:100%;
        text-align:center;
    }

    .pic_area ul li{
        display:inline-block;
        width:46%;
        margin-right:28px;
        margin-bottom:28px;
    }
    .pic_area ul li img{
        width:100%;
    }
    .pic_area ul li:nth-child(2n){
        margin:0;
    }

    .pic_area input{
        display:none;
    }


    .pic_area label{
        display:block;
        width:70%;
        max-width:690px;
        text-align:center;
        cursor: pointer;
        margin:20px auto;
        border:1px solid #898989;
        line-height:55px;
        position:relative;
        font-size:1.2rem;
        color:#567A8A;
        font-weight:bold;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        -ms-transition: 0.5s;
    }

    .pic_area label:after{
        display:block;
        width:30px;
        height:30px;
        content:' ';
        background:url(../../images/csr/arrow.png) no-repeat center center;
        background-size:cover;
        position:absolute;
        top:10px;
        right:10px;
        z-index:2;
    }


    .pic_area section{
        height:0;
        opacity:0;
        overflow:hidden;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        -ms-transition: 0.5s;
    }

    .pic_area input:checked +label{
        display:none;
    }

    .pic_area input:checked +label + section{
        height:auto !important;
        overflow: visible;
        opacity:1;
    }

/* 																												end
----------------------------------------------------------------------------------------------------------------- */
}



@media screen and (max-width:640px){
    .content{
        max-width:640px;
        min-width:320px;
    }

    .csr_top{
        display:block;
        width:100%;
        height:444px;
        position:relative;
        background:url(../../images/csr/csr_top.jpg) no-repeat top center;
        background-size:cover;
        margin-top:0px;
    }


    .csr_top p.pan{
        position:relative;
        z-index:2;
        font-size:0.7rem;
        top:10px;
        width:95%;
        max-width:940px;
        margin:0 auto;
    }
    .csr_top p.pan a{
        font-size:0.7rem;
        display:inline-block;
        margin-right:15px;
    }

    .csr_top_title{
        width:100%;
        max-width:940px;
        margin:0 auto;
        position:relative;
        top:35%;
    }


    .csr_top h2{
        display:block;
        width:360px;
        text-align:center;
        position:absolute;
        height:48px;
        line-height:48px;
        right:0;
        font-size:2.4rem;
        letter-spacing:0.8rem;
        color:#fff;
        font-weight:normal;
        z-index:2;
    }

    .csr_top h2:after{
        position:absolute;
        display:block;
        content:'';
        height:22px;
        width:100%;
        bottom:-5px;
        background:rgba(0,29,49,0.5);
        z-index:-1;
    }


    h3.title_h3{
        font-size:1.2rem;
        letter-spacing:0.1rem;
        line-height:4rem;
        border-top:1px solid #C1C0BE;
        border-bottom:1px solid #C1C0BE;
        text-align:center;
        color:#003851;
    }

    .csr_content01{
        width:100%;
        background:url(../../images/csr/csr_content01.gif) no-repeat center center;
        background-size:cover;
        padding-bottom:150px;

    }
    .inner{
        width:90%;
        max-width:870px;
        margin:0 auto;
    }


    .csr_content01 .text_area{
        width:100%;
        float:none;
        margin-top:40px;
    }


    .csr_content01 .text_area p{
        font-size:0.9rem;
        color:#000;
        line-height:1.8rem;
        display:block;
    }
    .csr_content01 .text_area ul{
        display:block;
        margin-top:40px;
        text-align:center;
    }
    .csr_content01 .text_area ul li{
        width:42%;
        display:inline-block;
        margin-right:4%;
    }

    .csr_content01 .text_area ul li img{
        width:100%;
    }

    .csr_content01 .text_area ul li span{
        display:block;
        width:100%;
        text-align:center;
        font-size:0.9rem;
        color:#fff;
        background:#003851;
        line-height:2rem;
        margin-top:12%;
    }

    .csr_content01 .text_area .imgtitle{
        display:block;
        width:90%;
        text-align:center;
        font-size:0.7rem;
        color:#fff;
        background:#003851;
        line-height:2rem;
        margin-top:6%;
      margin-left:3%;
    }

    .csr_content01 .img01{
        display:none;
    }

    .csr_content02{
        margin-top:0px;
    }
    .csr_content02 .img04{
        width:60%;
        float:right;
        margin-top:30px;
    }

    .csr_content02 .img05{
        width:34.5%;
        float:right;
        margin-right:5%;
        margin-top:30px;
    }
    .csr_content02 .img05 img{
        width:100%;
    }

    .csr_content02 .img06{
        width:60%;
        float:right;
        margin-top:15px;
    }

    .csr_content02 .img08{
        width:60%;
        float:right;
        margin-top:30px;
    }

    .csr_content02 p{
        display:block;
        width:100%;
        float:none;
        font-size:0.9rem;
        line-height:1.6rem;
        margin-top:30px;
    }

    .csr_content02 .img05 span{
        display:block;
        width:100%;
        text-align:center;
        margin-top:8%;
    }


    .csr_content02 .img05 span img{
        width:23px;
    }

    .csr_content03{
        width:100%;
        background:url(../../images/csr/csr_content03.gif) no-repeat center center;
        background-size:cover;
        height:400px;
        position:relative;
        padding:160px 0;
    }


    .csr_content03 .inner{
        width:90%;
        max-width:840px;
        position:relative;
        height:auto;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }

    .csr_content03 .text_area{
        width:68%;
        float:left;
        margin-top:40px;
    }
    .csr_content03 .text_area p{
        font-size:0.8rem;
        line-height:1.7rem;
    }
    .csr_content03 .images_area{
        width:30%;
        float:right;
        margin-top:40px;
    }

    .csr_content03 .images_area img{
        width:100%;
    }
    .csr_content03 .images_area img.img07{
        width:36%;
        display:block;
        float:right;
        margin-top:33px;
    }

    .csr_content03 .images_area span{
        width:55%;
        height:auto;
        display:block;
        border:1px solid #5D808F;
        float:left;
        font-size:0.6rem;
        text-align:center;
        line-height:1.6rem;
        padding:5px 0;
        color:#000;
        position:relative;
        margin-top:40px;
    }

    .csr_content03 .images_area span:after{
        display:block;
        content:'\0025b6';
        right:-12px;
        position:absolute;
        top:35%;
        color:#003851;

    }


    .csr_content04{
        margin:0 auto;
    }
    .csr_content04 .inner p{
        display:block;
        width:65%;
        float:left;
        font-size:0.8rem;
        line-height:1.7rem;
        margin-top:40px;
    }
    .csr_content04 .inner img{
        display:block;
        width:30%;
        float:right;
        margin-top:120px;
    }

    .csr_content05{
        width:100%;
        background:url(../../images/csr/csr_content05.gif) no-repeat center center;
        background-size:cover;
        position:relative;
        margin-top:0px;
    }
    .csr_content05 .inner{
        height:auto;
        width:90%;
        max-width:840px;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }

    .csr_content05 .inner p{
        display:block;
        width:65%;
        float:left;
        font-size:0.8rem;
        line-height:1.7rem;
        margin-top:40px;
    }
    .csr_content05 .inner img{
        display:block;
        width:30%;
        float:right;
        margin-top:40px;
    }


    .csr_content06{
        width:100%;
        background-size:cover;
        padding-bottom:0;

    }

    .csr_content06 h3{
        width:90%;
        max-width:840px;
        margin:0 auto;
        text-align:center;
        font-size:1.6rem;
        line-height:2.5rem;
        color:#003851;
        border:1px solid #003851;
        padding:30px 0;
    }


    .blog_area{
        width:90%;
        max-width:840px;
        margin:40px auto 0;
    }

    .blog_area h4{
        border-bottom:1px solid #000;
        display:inline-block;
        font-size:01rem;
        line-height:2rem;
        margin-bottom:20px;
        color:#003851;
    }


    .blog_area ul li{
        width:100%;
        display:inline-block;
        border-bottom:1px dotted #898989;
        padding:10px 0;
    }

    .blog_area ul li:nth-child(1),
    .blog_area ul li:nth-child(3),
    .blog_area ul li:nth-child(5){
        margin-right:29px;
    }

    .blog_area ul li p{
        display:inline-block;
        font-size:0.8rem;
        line-height:1.6rem;
        color:#000;
    }

    .blog_area ul li p.date{
        margin-right:15px;
        color:#003851;
    }

    .blog_area ul li a{
        display:inline-block;
        font-size:0.8rem;
        margin-left:15px;
        color:#000;
    }


    .banner01{
        display:block;
        width:100%;
        margin:80px auto 0;
        max-width:700px;
    }

    a.ghost_btn{
        display:block;
        width:95%;
        margin:80px auto 0;
        max-width:700px;
        position:relative;
    }

    a.ghost_btn img:hover{
        opacity:1;
    }

    .banner01:after{
        content:' ';
        position:absolute;
        top:0;
        left:0;
        display:block;
        height:100%;
        width:0%;
        background:rgba(255,255,255,0.1);
        -webkit-transition: 0.1s;
        -moz-transition: 0.1s;
        -o-transition: 0.1s;
        -ms-transition: 0.1s;
        z-index:2;
    }

    a.ghost_btn:hover > .banner01:after{
        content:' ';
        position:absolute;
        top:0;
        left:0;
        display:block;
        height:100%;
        width:100%;
        background:rgba(255,255,255,0.1);
        -webkit-transition: 0.1s;
        -moz-transition: 0.1s;
        -o-transition:0.1s;
        -ms-transition: 0.1s;
        z-index:2;
    }


    /* = pic = */

    .csr_content08{
        width:100%;
    }

    .csr_content08 .inner{
        width:90%;
        max-width:940px;
    }
    .csr_content08 h3{
        font-size:1rem !important;
        color:#345F73;
        margin-bottom:50px;

    }

    .pic_area{

    }

    .pic_area ul{
        display:block;
        width:100%;
        text-align:center;
    }

    .pic_area ul li{
        display:inline-block;
        width:46%;
        margin-right:5%;
        margin-bottom:28px;
    }
    .pic_area ul li img{
        width:100%;
    }
    .pic_area ul li:nth-child(2n){
        margin:0;
    }

    .pic_area input{
        display:none;
    }


    .pic_area label{
        display:block;
        width:70%;
        max-width:690px;
        text-align:center;
        cursor: pointer;
        margin:20px auto;
        border:1px solid #898989;
        line-height:55px;
        position:relative;
        font-size:1.2rem;
        color:#567A8A;
        font-weight:bold;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        -ms-transition: 0.5s;
    }

    .pic_area label:after{
        display:block;
        width:30px;
        height:30px;
        content:' ';
        background:url(../../images/csr/arrow.png) no-repeat center center;
        background-size:cover;
        position:absolute;
        top:10px;
        right:10px;
        z-index:2;
    }


    .pic_area section{
        height:0;
        opacity:0;
        overflow:hidden;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        -ms-transition: 0.5s;
    }

    .pic_area input:checked +label{
        display:none;
    }

    .pic_area input:checked +label + section{
        height:auto !important;
        overflow: visible;
        opacity:1;
    }



/* 																												end
----------------------------------------------------------------------------------------------------------------- */
}


@media screen and (max-width:414px){
    .content{
        max-width:414px;
        min-width:320px;
    }

    .csr_top{
        display:block;
        width:100%;
        height:404px;
        position:relative;
        background:url(../../images/csr/csr_top.jpg) no-repeat top center;
        background-size:cover;
        margin-top:0px;
    }


    .csr_top p.pan{
        position:relative;
        z-index:2;
        font-size:0.7rem;
        top:10px;
        width:95%;
        max-width:940px;
        margin:0 auto;
    }
    .csr_top p.pan a{
        font-size:0.7rem;
        display:inline-block;
        margin-right:15px;
    }

    .csr_top_title{
        width:100%;
        max-width:940px;
        margin:0 auto;
        position:relative;
        top:35%;
    }


    .csr_top h2{
        display:block;
        width:240px;
        text-align:center;
        position:absolute;
        height:48px;
        line-height:48px;
        right:1%;
        font-size:2rem;
        letter-spacing:0.4rem;
        color:#fff;
        font-weight:normal;
        z-index:2;
    }

    .csr_top h2:after{
        position:absolute;
        display:block;
        content:'';
        height:22px;
        width:100%;
        bottom:-5px;
        background:rgba(0,29,49,0.5);
        z-index:-1;
    }


    h3.title_h3{
        font-size:0.8rem;
        letter-spacing:0.1rem;
        line-height:3rem;
        border-top:1px solid #C1C0BE;
        border-bottom:1px solid #C1C0BE;
        text-align:center;
        color:#003851;
    }

    .csr_content01{
        width:100%;
        background:url(../../images/csr/csr_content01.gif) no-repeat center center;
        background-size:cover;

    }
    .inner{
        width:90%;
        max-width:870px;
        margin:0 auto;
    }


    .csr_content01 .text_area{
        width:100%;
        float:none;
        margin-top:40px;
    }


    .csr_content01 .text_area p{
        font-size:0.8rem;
        color:#000;
        line-height:1.8rem;
        display:block;
    }
    .csr_content01 .text_area ul{
        display:block;
        margin-top:40px;
        text-align:center;
    }
    .csr_content01 .text_area ul li{
        width:42%;
        display:inline-block;
        margin-right:4%;
    }

    .csr_content01 .text_area ul li img{
        width:100%;
    }

    .csr_content01 .text_area ul li span{
        display:block;
        width:100%;
        text-align:center;
        font-size:0.9rem;
        color:#fff;
        background:#003851;
        line-height:2rem;
        margin-top:12%;
    }

    .csr_content01 .img01{
        display:none;
    }

    .csr_content02{
        margin-top:0px;
    }
    .csr_content02 .img04{
        width:60%;
        float:right;
        margin-top:30px;
    }

    .csr_content02 .img05{
        width:34.5%;
        float:right;
        margin-right:5%;
        margin-top:30px;
    }
    .csr_content02 .img05 img{
        width:100%;
    }

    .csr_content02 .img06{
        width:100%;
        float:right;
        margin-top:15px;
    }

    .csr_content02 .img08{
        width:100%;
        margin:20px 0 30px;
    }

    .csr_content02 .img09 img{
        width:100%;
    }

    .corona .img09 span{
        display:block;
        width:100%;
        text-align:center;
        margin-top:7%;
    }

    .corona .img09 span img{
        width:23px;
    }

    .csr_content02 p{
        display:block;
        width:100%;
        float:none;
        font-size:0.8rem;
        line-height:1.6rem;
        margin-top:30px;
    }

    .csr_content02 .img05 span{
        display:block;
        width:100%;
        text-align:center;
        margin-top:8%;
    }

    .csr_content02 .img05 span img{
        width:23px;
    }



    .csr_content03{
        width:100%;
        background:url(../../images/csr/csr_content03.gif) no-repeat center center;
        background-size:cover;
        position:relative;
        padding: 80px 0;
        height: auto;
    }


    .csr_content03 .inner{
        width:90%;
        max-width:840px;
        position:relative;
        height:auto;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }

    .csr_content03 .text_area{
        display:block;
        width:100%;
        float:left;
        margin-top:30px;
    }
    .csr_content03 .text_area p{
        font-size:0.7rem;
        line-height:1.7rem;
    }

    .csr_content03 .images_area{
        width:40%;
        float:right;
        margin-top:0px;
        margin-left:1%;
    }

    .csr_content03 .images_area img{
        width:100%;
    }

    .csr_content03 .images_area img.img07{
        width:36%;
        display:block;
        float:right;
        margin-top:15px;
    }

    .csr_content03 .images_area span{
        width:55%;
        height:auto;
        display:block;
        border:1px solid #5D808F;
        float:left;
        font-size:0.5rem;
        text-align:center;
        line-height:1rem;
        padding:5px 0;
        color:#000;
        position:relative;
        margin-top:20px;
    }

    .csr_content03 .images_area span:after{
        display:block;
        content:'\0025b6';
        right:-12px;
        position:absolute;
        top:35%;
        color:#003851;

    }


    .csr_content04{
        margin:50px auto;
    }
    .csr_content04 .inner p{
        display:block;
        width:55%;
        float:left;
        font-size:0.8rem;
        line-height:1.7rem;
        margin-top:40px;
    }
    .csr_content04 .inner img{
        display:block;
        width:40%;
        float:right;
        margin-top:40px;
    }

    .csr_content05{
        width:100%;
        background:url(../../images/csr/csr_content05.gif) no-repeat center center;
        background-size:cover;
        height:auto;
        position:relative;
        margin-top:0px;
        padding:100px 0;
    }
    .csr_content05 .inner{
        width:90%;
        max-width:840px;
        position:relative;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }

    .csr_content05 .inner p{
        display:block;
        width:55%;
        float:left;
        font-size:0.8rem;
        line-height:1.7rem;
        margin-top:40px;
    }
    .csr_content05 .inner img{
        display:block;
        width:40%;
        float:right;
        margin-top:40px;
    }


    .csr_content06{
        width:100%;
        background-size:cover;
        padding: 50px 0;

    }

    .csr_content06 h3{
        width:90%;
        max-width:840px;
        margin:0 auto;
        text-align:center;
        font-size:1rem;
        line-height:2rem;
        color:#003851;
        border:1px solid #003851;
        padding:10px 0;
    }


    .blog_area{
        width:90%;
        max-width:840px;
        margin:40px auto 0;
    }

    .blog_area h4{
        border-bottom:1px solid #000;
        display:inline-block;
        font-size:01rem;
        line-height:2rem;
        margin-bottom:20px;
        color:#003851;
    }


    .blog_area ul li{
        width:100%;
        display:inline-block;
        border-bottom:1px dotted #898989;
        padding:10px 0;
    }

    .blog_area ul li:nth-child(1),
    .blog_area ul li:nth-child(3),
    .blog_area ul li:nth-child(5){
        margin-right:0px;
    }

    .blog_area ul li p{
        display:inline-block;
        font-size:0.8rem;
        line-height:1.6rem;
        color:#000;
    }

    .blog_area ul li p.date{
        margin-right:15px;
        color:#003851;
    }

    .blog_area ul li a{
        display:inline-block;
        font-size:0.8rem;
        margin-left:15px;
        color:#000;
    }


    .banner01{
        display:block;
        width:100%;
        margin:80px auto 0;
        max-width:700px;
    }

    a.ghost_btn{
        display:block;
        width:95%;
        margin:25px auto 0;
        max-width:700px;
        position:relative;
      line-height: 100%;
      font-size: 20px;
      padding-top: 10px;
      min-height: 30px;
      height: auto;
    }

    a.ghost_btn img:hover{
        opacity:1;
    }

    .banner01:after{
        content:' ';
        position:absolute;
        top:0;
        left:0;
        display:block;
        height:100%;
        width:0%;
        background:rgba(255,255,255,0.1);
        -webkit-transition: 0.1s;
        -moz-transition: 0.1s;
        -o-transition: 0.1s;
        -ms-transition: 0.1s;
        z-index:2;
    }

    a.ghost_btn:hover > .banner01:after{
        content:' ';
        position:absolute;
        top:0;
        left:0;
        display:block;
        height:100%;
        width:100%;
        background:rgba(255,255,255,0.1);
        -webkit-transition: 0.1s;
        -moz-transition: 0.1s;
        -o-transition:0.1s;
        -ms-transition: 0.1s;
        z-index:2;
    }


    .csr_content07{
        display:block;
        width:100%;
        height:434px;
        position:relative;
        background:url(../../images/csr/csr_content07.jpg) no-repeat top center;
        background-size:cover;
    }

    .csr_content07 .csr_top_title{
        width:100%;
        max-width:940px;
        margin:0 auto;
        position:relative;
        top:45%;
    }


    .csr_content07 h2{
        display:block;
        width:320px;
        text-align:center;
        position:absolute;
        height:30px;
        line-height:30px;
        right:0;
        font-size:1.2rem;
        letter-spacing:0.2rem;
        color:#fff;
        font-weight:normal;
        z-index:2;
        margin-right: 20px;
    }
    .csr_content07 h2 img{
        width: 100%;
    }

    .csr_content07 h2:after{
        position:absolute;
        display:block;
        content:'';
        height:15px;
        width:100%;
        bottom:0px;
        background:rgba(0,29,49,0.5);
        z-index:-1;
        right:0;
    }

    .csr_content07 p{
        display:inline-block;
        position:absolute;
        right:2%;
        color:#fff;
        font-size:0.8rem;
        line-height:100%;
        padding-top:8%;
        letter-spacing:0.4rem;

    }
    .csr_content07 p font{
        display:inline-block;
        color:#ff0000;
        font-size:1rem;
        line-height:80%;
        vertical-align:bottom;
    }


    /* = pic = */

    .csr_content08{
        width:100%;
    }

    .csr_content08 .inner{
        width:90%;
        max-width:940px;
    }
    .csr_content08 h3{
        font-size:1rem !important;
        line-height:1.8rem;
        color:#345F73;
        margin-bottom:40px;

    }

    .pic_area{

    }

    .pic_area ul{
        display:block;
        width:100%;
        text-align:center;
    }

    .pic_area ul li{
        display:inline-block;
        width:46%;
        margin-right:5%;
        margin-bottom:28px;
    }
    .pic_area ul li img{
        width:100%;
    }
    .pic_area ul li:nth-child(2n){
        margin:0;
    }

    .pic_area input{
        display:none;
    }


    .pic_area label{
        display:block;
        width:90%;
        max-width:690px;
        text-align:center;
        cursor: pointer;
        margin:10px auto;
        border:1px solid #898989;
        line-height:35px;
        position:relative;
        font-size:1.2rem;
        color:#567A8A;
        font-weight:bold;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        -ms-transition: 0.5s;
    }

    .pic_area label:after{
        display:block;
        width:25px;
        height:25px;
        content:' ';
        background:url(../../images/csr/arrow.png) no-repeat center center;
        background-size:cover;
        position:absolute;
        top:5px;
        right:6px;
        z-index:2;
    }


    .pic_area section{
        height:0;
        opacity:0;
        overflow:hidden;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        -ms-transition: 0.5s;
    }

    .pic_area input:checked +label{
        display:none;
    }

    .pic_area input:checked +label + section{
        height:auto !important;
        overflow: visible;
        opacity:1;
    }

/* 																												end
----------------------------------------------------------------------------------------------------------------- */
}


@media screen and (max-width:375px){
    .content{
        max-width:375px;
        min-width:320px;
    }

    h3.title_h3{
        font-size:0.7rem;
        letter-spacing:0.1rem;
        line-height:3rem;
        border-top:1px solid #C1C0BE;
        border-bottom:1px solid #C1C0BE;
        text-align:center;
        color:#003851;
    }
    .csr_content01 .text_area p{
        font-size:0.6rem;
        color:#000;
        line-height:1.4rem;
        display:block;
    }
    .csr_content02 p{
        display:block;
        width:100%;
        float:none;
        font-size:0.6rem;
        line-height:1.4rem;
        margin-top:30px;
    }
    .csr_content03 .text_area p{
        font-size:0.6rem;
        line-height:1.4rem;
    }

    .csr_content04 .inner p{
        display:block;
        width:55%;
        float:left;
        font-size:0.6rem;
        line-height:1.4rem;
        margin-top:40px;
    }

    .csr_content05 .inner p{
        display:block;
        width:55%;
        float:left;
        font-size:0.6rem;
        line-height:1.4rem;
        margin-top:40px;
    }
    .blog_area ul li p{
        display:inline-block;
        font-size:0.6rem;
        line-height:1.4rem;
        color:#000;
    }

    .blog_area ul li p.date{
        margin-right:15px;
        color:#003851;
    }

    .blog_area ul li a{
        display:inline-block;
        font-size:0.6rem;
        margin-left:15px;
        color:#000;
    }
    .csr_content08 h3{
        font-size:1rem !important;
        line-height:1.8rem;
        color:#345F73;
        margin-bottom:40px;

    }



/* 																												end
----------------------------------------------------------------------------------------------------------------- */
}

@media screen and (max-width:360px){
	.csr_content03 .images_area span{
		letter-spacing: -1.2px;
	}
/* 																												end
----------------------------------------------------------------------------------------------------------------- */

}

@media screen and (max-width:320px){

    .content{
        max-width:320px;
        min-width:320px;
    }


    h3.title_h3{
        font-size:0.6rem;
        letter-spacing:0.1rem;
        line-height:3rem;
        border-top:1px solid #C1C0BE;
        border-bottom:1px solid #C1C0BE;
        text-align:center;
        color:#003851;
    }
    .csr_content01 .text_area p{
        font-size:0.6rem;
        color:#000;
        line-height:1.2rem;
        display:block;
    }
    .csr_content02 p{
        display:block;
        width:100%;
        float:none;
        font-size:0.6rem;
        line-height:1.2rem;
        margin-top:30px;
    }
    .csr_content03 .text_area p{
        font-size:0.6rem;
        line-height:1.2rem;
    }

    .csr_content04 .inner p{
        display:block;
        width:55%;
        float:left;
        font-size:0.6rem;
        line-height:1.2rem;
        margin-top:40px;
    }

    .csr_content05 .inner p{
        display:block;
        width:55%;
        float:left;
        font-size:0.6rem;
        line-height:1.2rem;
        margin-top:40px;
    }
    .blog_area ul li p{
        display:inline-block;
        font-size:0.6rem;
        line-height:1.2rem;
        color:#000;
    }

    .blog_area ul li p.date{
        margin-right:15px;
        color:#003851;
    }

    .blog_area ul li a{
        display:inline-block;
        font-size:0.6rem;
        margin-left:15px;
        color:#000;
    }
    .csr_content06 h3{
        width:90%;
        max-width:840px;
        margin:0 auto;
        text-align:center;
        font-size:0.8rem;
        line-height:1.4rem;
        color:#003851;
        border:1px solid #003851;
        padding:10px 0;
    }

    .csr_content07 h2{
        display:block;
        width:290px;
        text-align:center;
        position:absolute;
        height:30px;
        line-height:30px;
        right:1%;
        font-size:1.1rem;
        letter-spacing:0.2rem;
        color:#fff;
        font-weight:normal;
        z-index:2;
    }

    .csr_content07 h2:after{
        position:absolute;
        display:block;
        content:'';
        height:15px;
        width:100%;
        bottom:0px;
        background:rgba(0,29,49,0.5);
        z-index:-1;
        right:0;
    }

    .csr_content07 p{
        display:inline-block;
        position:absolute;
        right:2%;
        color:#fff;
        font-size:0.6rem;
        line-height:100%;
        padding-top:10%;
        letter-spacing:0.4rem;

    }
    .csr_content07 p font{
        display:inline-block;
        color:#ff0000;
        font-size:1rem;
        line-height:80%;
        vertical-align:bottom;
    }


    .csr_content08 h3{
        font-size:1rem !important;
        line-height:1.8rem;
        color:#345F73;
        margin-bottom:40px;

    }

/* 																												end
---------------------------------------------------------------------------------------------------------------- */
}