@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(1,83,139,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;}
/* 人才 */
#hr, #job{padding: 30px 0 130px 0;}
#hr .wrap>.tit, #job .wrap>.tit{font-size: 3.9rem; color: #2b2b2b; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei';}
#hr .wrap>.tit-en, #job .wrap>.tit-en{color: #bbb; font-size: 1.5rem; font-family: 'Montserrat'; margin-top: 12px;}


#hr .m1{margin-top: 80px; border: 1px solid #e6e6e6; padding: 50px 45px 15px 45px; position: relative;}
#hr .m1 .tit{background: #fff; position: absolute; top: -20px; height: 40px; line-height: 40px; padding: 0 20px; font-size: 2.6rem; font-weight: bold;}
#hr .m1 .con{line-height: 1.9; font-size: 1.7rem; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei';}
#hr .m1 .con p, #hr .m1 .con div{line-height: 1.9; font-size: 1.7rem; margin-bottom: 25px; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei';}


#hr .m2{margin-top: 60px;}
#hr .m2>.tit{font-size: 2.6rem; font-weight: bold;}
#hr .m2 .box{display: flex; justify-content: space-between; margin-top: 40px;}
#hr .m2 .box .item{width: calc((100% - 200px)/5); background: #f6f7fb; border-radius: 10%; text-align: center;}
#hr .m2 .box .item .tit{font-size: 2rem; font-weight: 300; color: #01538b; overflow: hidden; margin-top: 50px;}
#hr .m2 .box .item .ico{margin-top: 30px;}
#hr .m2 .box .item .ico i{color: #9d9d9d; font-size: 4.6rem;}
#hr .m2 .box .item .desc{font-size: 1.6rem; line-height: 1.6; margin-top: 30px; padding: 0 30px 50px 30px; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei';}


#hr .m3{margin-top: 60px;}
#hr .m3>.tit{font-size: 2.6rem; font-weight: bold;}
#hr .m3 .con{font-size: 1.7rem; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei'; margin-top: 30px;}
#hr .m3 .con p, #hr .m3 .con div{line-height: 1.9; font-size: 1.7rem; margin-bottom: 25px; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei';}
@media (max-width:1679px){ /*1440*/
  #hr .wrap>.tit,#job .wrap>.tit{font-size: 3.8rem; }
  #hr .wrap>.tit-en, #job .wrap>.tit-en{font-size: 1.4rem;}

  #hr .m1 .tit{font-size: 2.4rem;}
  #hr .m1 .con{font-size: 1.6rem;}
  #hr .m1 .con p, #hr .m1 .con div{line-height: 1.8; font-size: 1.6rem;}

  #hr .m2>.tit{font-size: 2.4rem;}
  #hr .m2 .box .item{width: calc((100% - 180px)/5);}
  #hr .m2 .box .item .tit{font-size: 1.9rem;}
  #hr .m2 .box .item .ico i{font-size: 4.2rem;}
  #hr .m2 .box .item .desc{font-size: 1.5rem;}

  #hr .m3>.tit{font-size: 2.4rem;}
  #hr .m3 .con{font-size: 1.6rem;}
  #hr .m3 .con p, #hr .m3 .con div{line-height: 1.8; font-size: 1.6rem;}
@media (max-width:1439px){ /*1366*/
  #banner{height: 450px;}

  #hr .m1{margin-top: 60px;}
  #hr .m1 .tit{font-size: 2.3rem;}
  #hr .m1 .con{font-size: 1.5rem;}
  #hr .m1 .con p, #hr .m1 .con div{line-height: 1.8; font-size: 1.5rem;}

  #hr .m2{margin-top: 50px;}
  #hr .m2>.tit{font-size: 2.3rem;}
  #hr .m2 .box .item{width: calc((100% - 160px)/5);}
  #hr .m2 .box .item .tit{font-size: 1.8rem;}
  #hr .m2 .box .item .ico i{font-size: 4rem;}
  #hr .m2 .box .item .desc{font-size: 1.5rem;}

  #hr .m3{margin-top: 50px;}
  #hr .m3>.tit{font-size: 2.3rem;}
  #hr .m3 .con{font-size: 1.5rem;}
  #hr .m3 .con p, #hr .m3 .con div{font-size: 1.5rem;}
@media (max-width:1365px){ /*1280*/
  #hr .m1 .tit{font-size: 2.2rem;}
  #hr .m1 .con{font-size: 1.4rem;}
  #hr .m1 .con p, #hr .m1 .con div{font-size: 1.4rem;}

  #hr .m2>.tit{font-size: 2.2rem;}
  #hr .m2 .box .item{width: calc((100% - 160px)/5);}
  #hr .m2 .box .item .desc{font-size: 1.4rem;}

  #hr .m3>.tit{font-size: 2.2rem;}
  #hr .m3 .con{font-size: 1.4rem;}
  #hr .m3 .con p, #hr .m3 .con div{font-size: 1.4rem;}

}
@media (max-width:1279px){ /*mp*/
  #hr, #job{padding: 0 15px 50px 15px;}
  #hr .wrap>.tit, #job .wrap>.tit{font-size: 2.4rem;}
  #hr .wrap>.tit-en, #job .wrap>.tit-en{font-size: 1.2rem; margin-top: 6px;}

  #hr .m1{margin-top: 60px; padding: 30px 15px 0 15px;}
  #hr .m1 .tit{height: 30px; line-height: 40px; padding: 0 10px; font-size: 1.8rem; left: 5px;}
  #hr .m1 .con{line-height: 1.7; font-size: 1.4rem;}
  #hr .m1 .con p, #hr .m1 .con div{line-height: 1.7; font-size: 1.4rem; margin-bottom: 20px;}

  #hr .m2{margin-top: 40px;}
  #hr .m2>.tit{font-size: 1.8rem;}
  #hr .m2 .box{display: block; margin-top: 30px;}
  #hr .m2 .box .item{width: 100%;}
  #hr .m2 .box .item .tit{font-size: 1.6rem; margin-top: 30px; padding-top: 25px; font-weight: bold;}
  #hr .m2 .box .item .ico{margin-top: 20px;}
  #hr .m2 .box .item .ico i{color: #2e2d3c; font-size: 4.2rem;}
  #hr .m2 .box .item .desc{font-size: 1.4rem; line-height: 1.6; margin-top: 20px; padding: 0 20px 25px 20px;}

  #hr .m3{margin-top: 40px;}
  #hr .m3>.tit{font-size: 1.8rem;}
  #hr .m3 .con{font-size: 1.4rem; margin-top: 20px;}
  #hr .m3 .con p, #hr .m3 .con div{line-height: 1.7; font-size: 1.4rem; margin-bottom: 20px;}
@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;}
}