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


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

#culture>.display{margin: 0 auto; padding: 50px 0;}
#culture>.display .item{ position: relative; display: block;margin: 0 auto 50px auto; background: #f7f7f7; overflow: hidden; border-radius: 80px 0 80px 0;}
#culture>.display .item:last-child{margin-bottom: 0;}
#culture>.display .item>.img{display: block;width: 40%; float: left; overflow: hidden;}
#culture>.display .item>.img>img{width: 100%;height: auto;}
#culture>.display .item>.box{ width: 60%; float: right; box-sizing: border-box; padding: 6% 8% 0 8%; text-align: left;}
#culture>.display .item>.box>.tit{font-size: 3rem; font-weight: bold; color: rgba(0,91,97,1);}
#culture>.display .item>.box>.sub{ padding: 10px 0; font-size: 1.8rem; color: #999;}
#culture>.display .item>.box>.intro{ height: 200px; overflow: auto; margin: 10px auto; padding-right: 10px; font-size: 1.6rem; color: #666; line-height: 2.4rem;}
#culture>.display .item>.box>.intro>p{ margin-bottom: 20px;}
#culture>.display .item:nth-child(even) .img{float: right;}
#culture>.display .item:nth-child(even) .box{float: left;}


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

    #culture>.display .item>.box>.intro{ height: 160px;}

}

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

    #culture>.display .item>.box>.tit{font-size: 2.4rem;}
    #culture>.display .item>.box>.intro{ height: 120px;}

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

    #culture>.display .item>.box{ padding-top: 4%;}
    #culture>.display .item>.box>.sub{ font-size: 1.6rem;}
    #culture>.display .item>.box>.intro{ font-size: 1.4rem; line-height: 2rem;}

}

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

    #culture>.title>h3{ font-size: 3.2rem;}


    #culture>.display .item>.img{width: 50%;}
    #culture>.display .item>.box{width: 50%;}
    #culture>.display .item>.box>.sub{ font-size: 1.5rem;}
    #culture>.display .item>.box>.intro{height: 160px;}


}

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

    #culture>.display .item>.img{float: none; width: 100%;}
    #culture>.display .item>.box{ float: none; width: 100%; padding: 5% 8%;}
    #culture>.display .item>.box>.intro{height: auto;}

}

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

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

    #culture>.display .item{ border-radius: 40px 0 40px 0;}
    #culture>.display .item>.box>.tit{font-size: 2rem;}


}

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

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

    #culture>.display{padding:30px 0;}
}