@charset "utf-8";
/* CSS Document */


#cooperation{margin: 0 auto; padding-top: 60px;}
#cooperation>.title{ text-align: center; margin: 0 auto;padding: 50px 0;}
#cooperation>.title>h3{ font-size: 4rem; font-weight: normal; color: #333; margin: 0 auto;}

#cooperation>.content{ padding: 50px 0 80px 0;}
#cooperation>.content>.box{ width: 60%; box-sizing: border-box; padding: 50px 0 50px 100px;}
#cooperation>.content>.box>.tit{font-size: 1.8em; color: rgba(14,189,201,1);}
#cooperation>.content>.box>.tit>span{display: inline-block; margin-right: 10px; }
#cooperation>.content>.box>.txt{ font-size: 1.6rem; color: #333; line-height: 2.8rem; padding: 30px 0;}
#cooperation>.content>.box>.txt>p{ margin-bottom: 20px;}
#cooperation>.content>.img{width: 40%;}
#cooperation>.content>.img .item{ position: relative; overflow:hidden; width: 49.5%; float:left; margin-right: 1%; margin-top: 1%;}
#cooperation>.content>.img .item:nth-child(2n){margin-right: 0;}
#cooperation>.content>.img .item>span{position: absolute;z-index: 10; left: 50%; top: 50%;  transform: translate(-50%, -30%);text-align: center;padding: 8px 20px; font-size: 1.6rem; color: #fff; opacity: 0; border-bottom: 1px solid rgba(255,255,255,.8); border-top: 1px solid rgba(255,255,255,.8); transition: all .35s;}
#cooperation>.content>.img .item:after{position: absolute;z-index: 1; left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,91,97,.9);opacity: 0; content: '';transition: all .35s;}
#cooperation>.content>.img .item>img{width:100%; transition:all .35s;}
#cooperation>.content>.img .item:hover:after{opacity: 1;}
#cooperation>.content>.img .item:hover>span{opacity: 1;transform: translate(-50%, -50%);}
#cooperation>.content>.img .item:hover>img{ transform: scale(1.2);  }


#cooperation>.invitation{ background: #f5f5f5; margin: 0 auto; padding: 80px 0;}
#cooperation>.invitation>.title{ text-align: center; margin: 0 auto; padding-top: 50px;}
#cooperation>.invitation>.title>h3{ font-size: 4rem; font-weight: normal; color: #333; margin: 0 auto;}
#cooperation>.invitation>.title>h4{ font-size: 2.4rem; font-weight: normal; color: #999; padding: 30px 0; margin: 0 auto;}
#cooperation>.invitation>.text{ font-size: 1.6rem; color: #999; text-align: center; margin: 0 auto;}
#cooperation>.invitation>.box{margin: 0 auto; padding: 80px 0;}
#cooperation>.invitation>.box>.item{ float: left; width: 23%; margin: 0 1%; background: #fff; box-sizing: border-box;padding: 80px 30px; text-align: center; transition: all .5s;}
#cooperation>.invitation>.box>.item>.icon{text-align: center; position: relative; padding-bottom: 50px; transition: all 1s;}
#cooperation>.invitation>.box>.item>.icon>i{font-size:8rem; color: rgba(0,91,97,1); transition: all .5s;}
#cooperation>.invitation>.box>.item>.tit{ position: relative; margin-top: 50px; height: 50px; font-size: 1.8rem; color: #333;}
#cooperation>.invitation>.box>.item>.tit:after{position: absolute;z-index: 10; left: 50%;top: -50px; margin-left: -15px; width: 30px;height: 2px; background: #999; content: '';}
#cooperation>.invitation>.box>.item:hover .icon{transform:rotateY(360deg); }
#cooperation>.invitation>.box>.item:hover:hover{ transform: translateY(-10px);}



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

    #cooperation>.content>.box{ padding: 20px 0 50px 80px;}
    #cooperation>.content>.box>.tit>span{display: inline-block; float: left; width: 50%; margin-right: 0;}
    #cooperation>.content>.box>.txt>p{ margin-bottom: 15px;}


}

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

    #cooperation>.content>.box>.txt>p{ margin-bottom: 10px;}

}

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


    #cooperation>.content>.box{ padding-top: 10px;}
    #cooperation>.content>.box>.tit{font-size: 1.6em;}
    #cooperation>.content>.box>.txt{ font-size: 1.4rem; line-height: 2.4rem;}

    #cooperation>.invitation>.box>.item>.icon>i{font-size:7rem;}
    #cooperation>.invitation>.box>.item>.tit{ font-size: 1.6rem;}




}

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


    #cooperation>.content{width: 100%; padding-bottom: 0;}
    #cooperation>.content>.box{ width: 86%; float: none; padding: 0; margin: 0 auto;}
    #cooperation>.content>.box>.tit>span{display: inline-block; float: none; width: auto; margin-right: 10px;}
    #cooperation>.content>.img{width: 100%; float: none;}

    #cooperation>.invitation>.box>.item{ width: 48%; margin: 1%;}

}


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

    #cooperation{padding-top: 30px;}

    #cooperation>.title{padding: 10px 0;}
    #cooperation>.title>h3{ font-size: 3.2rem;}

    #cooperation>.invitation{ padding: 50px 0;}
    #cooperation>.invitation>.title{ padding-top: 30px;}
    #cooperation>.invitation>.title>h3{ font-size: 3.2rem;}
    #cooperation>.invitation>.title>h4{ font-size: 2rem; padding: 20px 0;}
    #cooperation>.invitation>.text{ font-size: 1.4rem; }




}

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

    #cooperation>.content>.text{ font-size: 1.4rem; line-height: 2.4rem;}


}

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


}

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

    #cooperation>.title>h3{ font-size: 2.8rem;}

    #cooperation>.invitation>.title>h3{ font-size: 2.8rem;}
    #cooperation>.invitation>.title>h4{ font-size: 1.8rem;}

    #cooperation>.invitation>.box>.item{ padding: 30px;}
    #cooperation>.invitation>.box>.item>.icon>i{font-size:6rem; }

    #cooperation>.invitation>.box>.item>.icon{ padding-bottom: 30px;}
    #cooperation>.invitation>.box>.item>.tit{  margin-top: 30px; font-size: 1.6rem;}
    #cooperation>.invitation>.box>.item>.tit:after{top: -30px;}

}

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

    #cooperation>.title>h3{ font-size: 2.4rem;}
    #cooperation>.content{padding-top:30px;}

    #cooperation>.invitation>.title>h3{ font-size: 2.4rem;}

}