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


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

#hr>.content{margin: 0 auto; padding: 50px 0;}
#hr>.content>.text{ font-size: 1.6rem; color: #333; line-height: 2.8rem;}
#hr>.content>.text>p{ margin-bottom: 20px;}

#hr>.idea{margin: 0 auto; padding: 50px 0;}
#hr>.idea>.item{ position: relative; display: block;float: left;width: 25%; box-sizing: border-box;padding: 0; text-align: center;}
#hr>.idea>.item:after{position: absolute;z-index: 1; left: 0;top: 0;width: 100%;height: 100%; background: rgba(0,0,0,.6); content: '';transition: all .35s;}
#hr>.idea>.item>.img{overflow: hidden;}
#hr>.idea>.item>.img>img{ width: 100%;height: auto; transition: all 1s;}
#hr>.idea>.item>.box{position: absolute;z-index: 60; left: 50%; top: 50%; width: 70%; transform: translate(-50%, -50%);transition: all .35s;}
#hr>.idea>.item>.box>.icon{margin: 0 auto;}
#hr>.idea>.item>.box>.icon>img{width: 80px;height: auto; transition: all .1s;}
#hr>.idea>.item>.box>.tit{ padding: 10px 0; font-size: 2.4rem;color: #fff;}
#hr>.idea>.item>.box>.intro{opacity: 0; font-size: 1.6rem; color: rgba(255,255,255,.8); line-height: 2.4rem;transition: all .35s;}
#hr>.idea>.item:hover:after{background: rgba(0,91,97,.8);}
#hr>.idea>.item:hover .box{transform: translate(-50%, -65%);}
#hr>.idea>.item:hover .box>.intro{opacity: 1;}
#hr>.idea>.item:hover .img>img{transform: scale(1.1);}

#hr>.fringe{margin: 0 auto;padding: 50px 0;}
#hr>.fringe>.item{display: block;float: left;width: 25%; padding: 80px 0; text-align: center; box-sizing: border-box; border-top: 1px solid #ddd; border-right: 1px solid #ddd;}
#hr>.fringe>.item:nth-child(1),#hr>.fringe>.item:nth-child(2),#hr>.fringe>.item:nth-child(3),#hr>.fringe>.item:nth-child(4){border-top: 0;}
#hr>.fringe>.item:nth-child(4n){border-right: 0;}
#hr>.fringe>.item>.icon{text-align: center;}
#hr>.fringe>.item>.icon>img{ background: rgba(14,189,201,1); width: 90px; height: auto; padding: 10px; border-radius: 8px; transition: all .6s; }
#hr>.fringe>.item>.tit{ padding-top: 20px; font-size: 1.8rem; font-weight: 600; color: #333;}
#hr>.fringe>.item:hover .icon>img{ transform:rotateY(360deg);}


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

    #hr>.idea>.item>.box>.icon>img{width: 70px;}
    #hr>.idea>.item>.box>.tit{ font-size: 2.2rem;}
    #hr>.idea>.item>.box>.intro{font-size: 1.4rem; line-height: 2rem;}

}

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

    #hr>.idea>.item{ width: 50%;}

    #hr>.fringe>.item{padding: 60px 0;}
    #hr>.fringe>.item>.icon>img{ width: 80px; }

}




@media only screen and (max-width: 980px) {
    #hr{padding: 30px 0;}
    #hr>.title{padding: 10px 0;}
    #hr>.title>h3{ font-size: 3.2rem;}

    #hr>.idea{padding: 30px 0;}
    #hr>.fringe{padding: 30px 0;}
    #hr>.fringe>.item{padding: 50px 0;}
    #hr>.fringe>.item>.icon>img{ width: 75px; }
    #hr>.fringe>.item>.tit{ font-size: 1.6rem;}

}

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

    #hr>.fringe>.item{padding: 30px 0;}
    #hr>.fringe>.item>.icon>img{ width: 60px; }


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

}


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

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


    #hr>.idea>.item{float: none; width: 100%;}
    #hr>.idea>.item>.box>.tit{ font-size: 2.2rem;}
    #hr>.idea>.item>.box>.intro{opacity: 1; font-size: 1.4rem; line-height: 2rem;}



    #hr>.fringe>.item{width: 50%;}
    #hr>.fringe>.item:nth-child(2n){border-right: 0;}
    #hr>.fringe>.item:nth-child(3),#hr>.fringe>.item:nth-child(4){border-top: 1px solid #ddd;}






}

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

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

}