@charset "utf-8";

#responsibility{margin: 0 auto; }
#responsibility .wrap{margin: 0 auto;max-width: 1600px;padding: 100px 0;}
#responsibility .environment{margin: 0 auto;}
#responsibility .environment .left{ width: 40%; text-align: left;}
#responsibility .environment .left>.title{ font-size: 4rem;}
#responsibility .environment .left>.describe{ padding-top: 20px; font-size: 1.6rem; color: #666; line-height: 2.8rem;}
#responsibility .environment .right{ display: block; float: right; width: 55%; text-align: right; padding: 120px 0 150px 0;}
#responsibility .environment .right .rows{display: block; float: left; width: 33.33%; position: relative; z-index: 1;text-align: center;}
#responsibility .environment .right .rows:after{ position: absolute;z-index: 1; left: 50%;top: 50%; background: #1e2687; width: 220px;height: 220px;transform: translate(-50%,-50%) rotate(45deg); content: '';}
#responsibility .environment .right .rows:nth-child(2){z-index: 10;}
#responsibility .environment .right .rows:nth-child(2):after{background: #b20013;}
#responsibility .environment .right .rows:nth-child(3):after{ background: #333;}
#responsibility .environment .right .rows>.ico{position: relative;z-index: 12;}
#responsibility .environment .right .rows>.ico>img{width: 50px;height: auto;}
#responsibility .environment .right .rows>.txt{ position: relative;z-index: 12; width: 50%;margin: 0 auto; padding-top: 10px; font-size: 1.8rem; color: #fff;}



#responsibility .business{ margin: 0 auto; height: 700px; box-sizing: border-box; padding: 100px 0; background: url("../img/responsibility_business_bg.jpg") no-repeat; background-attachment: fixed; background-position: top center; background-size: cover;}
#responsibility .business .ico{text-align: center;margin: 0 auto; padding-bottom: 5px;}
#responsibility .business .ico>img{height: 40px; width: auto;opacity: .6}
#responsibility .business .title{ text-align: center;margin: 0 auto;font-size: 1.6rem; color: rgba(255,255,255,.6);}
#responsibility .business .describe{text-align: center;margin: 0 auto; padding: 30px 0; font-size: 2.4rem; line-height: 4rem; color: #fff;}



#responsibility .welfare{margin: 0 auto;}
#responsibility .welfare .title{ font-size: 4rem;}
#responsibility .welfare .container{margin: 0 auto; padding-top: 50px;position: relative;}
#responsibility .welfare .container>.swiper .swiper-slide .img{ text-align: left;overflow: hidden;}
#responsibility .welfare .container>.swiper .swiper-slide .img>img{width: 100%;height: auto; transition: all .8s}
#responsibility .welfare .container>.swiper .swiper-slide .tit{padding: 30px 0; position: relative; font-size: 2rem;}
#responsibility .welfare .container>.swiper .swiper-slide .tit:after{position: absolute;z-index: 1;left: 0; bottom: 0;width: 40px;height: 1px; background: #1e2687; content: '';}
#responsibility .welfare .container>.swiper .swiper-slide:hover .img>img{transform: scale(1.1)}
#responsibility .welfare .container>.swiper-pagination{bottom: auto; text-align: right; top: -20px; }
#responsibility .welfare .container>.swiper-pagination .swiper-pagination-bullet{ width: 10px;height: 10px; border: 2px solid #000;}
#responsibility .welfare .container>.swiper-pagination .swiper-pagination-bullet-active{ border-color: #1e2687; background: none;}

#responsibility .report{background:url("../img/report_bg.jpg") no-repeat; background-size: cover; margin: 0 auto; overflow: hidden;}
#responsibility .report>.wrap{ padding-bottom: 0;}
#responsibility .report .container{margin: 0 auto; position: relative;}
#responsibility .report .container>.img{ width: 16%; text-align: left;}
#responsibility .report .container>.img>img{width: 100%;height: auto;}
#responsibility .report .container>.box{ width: 84%;}
#responsibility .report .container>.box>.content{width: 50%;text-align: left; padding: 50px; box-sizing: border-box;}
#responsibility .report .container>.box>.content .title{font-size: 4rem; color: #fff;}
#responsibility .report .container>.box>.content .describe{ padding-top: 20px; font-size: 1.6rem; color: rgba(255,255,255,.8); line-height: 2.4rem;}
#responsibility .report .container>.box>.url{ position: absolute;z-index: 12; right: 0;bottom: 0; height: 100%; text-align: right; display: flex; justify-content: center;align-items: center;align-content: center;}
#responsibility .report .container>.box>.url>a{display: inline-block; width: 300px; border: 2px solid #fff; color: #fff;font-size: 1.6rem; border-radius: 8px; padding: 15px 20px; position: relative; overflow: hidden; transition: all .35s;}
#responsibility .report .container>.box>.url>a:after{position: absolute;z-index: 1; top: 0; left: 0;width: 0; height: 100%;background: #fff; opacity: 0; content: '';transition: all .35s;}
#responsibility .report .container>.box>.url>a>span{ position: relative;z-index: 12; display: inline-block; float: left; transition: all .35s;}
#responsibility .report .container>.box>.url>a>i{position: relative;z-index: 12; display: inline-block; float: right; font-size: 2.4rem; transition: all .35s;}
#responsibility .report .container>.box>.url>a:hover:after{ width: 100%;opacity: 1;}
#responsibility .report .container>.box>.url>a:hover{color: #1e2687;}


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

    #responsibility .environment .right .rows>.txt { font-size: 1.8rem; }
    #responsibility .environment .right .rows:after{ width: 200px;height: 200px;}

    #responsibility .report .container>.img{ width: 20%;}
    #responsibility .report .container>.box{ width: 80%;}
    #responsibility .report .container>.box>.content{width: 56%}
}

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

    #responsibility .environment .right .rows>.txt { font-size: 1.6rem; }
    #responsibility .environment .right .rows:after{ width: 180px;height: 180px;}


    #responsibility .report .container>.box>.content { width: 60%; padding: 30px 50px;}

}

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

    #responsibility .wrap{padding: 50px 0;}

    #responsibility .environment .left>.title{ font-size: 3.2rem;}
    #responsibility .environment .left>.describe { font-size: 1.4rem;line-height: 2.4rem;}


    #responsibility .welfare .title{ font-size: 3.2rem;}
    #responsibility .welfare .container>.swiper .swiper-slide .tit {font-size: 1.8rem;}

    #responsibility .business { height: 600px; }
    #responsibility .business .describe { font-size: 2.4rem;line-height: 4rem;}



    #responsibility .report .container>.box>.content .title{font-size: 3.2rem;}
    #responsibility .report .container>.box>.content .describe { font-size: 1.4rem;}
    #responsibility .report .container>.box>.url>a {width: 260px;}


}


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

    #responsibility .environment .right .rows>.txt { font-size: 1.4rem; }
    #responsibility .environment .right .rows:after{ width: 160px;height: 160px;}



    #responsibility .report .container>.box>.url>a {width: 220px;}

}

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

    #responsibility .environment .left {width: 100%; float: none; }
    #responsibility .environment .right {  float: none; width: 70%; margin: 0 auto; padding: 120px 0 200px 0;}

    #responsibility .welfare .container>.swiper .swiper-slide .tit {font-size: 1.6rem;}


    #responsibility .report .container>.img{ width: 35%;}
    #responsibility .report .container>.box{ width: 60%;}
    #responsibility .report .container>.box>.content {float: none; width: 100%; padding: 30px 0;}
    #responsibility .report .container>.box>.url { float: none; position: relative;height: auto;text-align: left; display: flex;justify-content: flex-start;align-items: center; align-content: center;}
    #responsibility .report .container>.box>.url>a { width: 180px; font-size: 1.4rem; padding: 10px 20px;}


}
@media only screen and (max-width: 860px){


    #responsibility .environment .left>.title{ font-size: 3rem;}
    #responsibility .environment .right{ width: 80%;}



    #responsibility .welfare .title{ font-size: 3rem;}
    #responsibility .welfare .container>.swiper .swiper-slide .tit { font-size: 1.4rem;}

    #responsibility .business .describe { font-size: 2rem;}

    #responsibility .report .container>.box>.content .title{font-size: 3rem;}




}

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

    #responsibility .environment .right{ width: 90%;}

    #responsibility .report>.wrap { padding-bottom: 50px;}
    #responsibility .report .container>.img{float: none; text-align: center; margin: 0 auto;}
    #responsibility .report .container>.box{float: none; width: 100%;}
    #responsibility .report .container>.box>.content { width:80%; padding: 20px 0; margin:  0 auto;text-align: center;}
    #responsibility .report .container>.box>.content .title{font-size: 2.4rem;}
    #responsibility .report .container>.box>.content .describe { font-size: 1.3rem; line-height: 2.4rem; padding-top: 10px;}
    #responsibility .report .container>.box>.url{text-align: center;}
    #responsibility .report .container>.box>.url>a {  margin: 0 auto;}

}


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


    #responsibility .environment .wrap{ width: 100%; padding-bottom: 0;}
    #responsibility .environment .left{width: 86%; margin: 0 auto;}
    #responsibility .environment .left>.title{ font-size: 2.4rem;}

    #responsibility .environment .right{ width: 100%; padding: 30px 0 0 0;}
    #responsibility .environment .right .rows{ float: none; width: 100%; padding: 50px 0; }
    #responsibility .environment .right .rows:after{ position: absolute;z-index: 1; left: 50%;top: 50%; background: #1e2687; width: 100%;height: 100%;transform: translate(-50%,-50%) rotate(0deg); content: '';}


    #responsibility .welfare .title{ font-size: 2.4rem;}

    #responsibility .business{height: 480px;}
    #responsibility .business .describe { font-size: 1.8rem; line-height: 3rem; }



}

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


    #responsibility .business { height: 400px; padding: 50px 0;}
    #responsibility .business .describe {font-size: 1.6rem;}


    #responsibility .report .container>.img{ width: 70%;}
    #responsibility .report .container>.box>.content { width: 90%;}

}