.about { background-color: #f4f4f4; }
.about .bannerBlock { background: url("../img/about/banner.jpg") no-repeat center/cover; }
@media screen and (max-width: 1024px) { .about .bannerBlock { background: url("../img/about/banner_mob.jpg") no-repeat center/cover; } }
.tempalteBlock { position: relative; margin: 0 0 0 0; width: calc(100% - 100px); background: #ffffff; z-index: 1;}
.tempalteBlock .navtab { margin: 0 0 0 100px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 0; }
.tempalteBlock .navtab ul { padding: 50px 0 0 0; }
.purposeBlock { margin: -44px 100px 0 0; padding: 90px 0 90px 100px; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff; position: relative; }
.purposeBlock h2 { color: #E30881; margin: 0 0 60px 0; }
.purposeBlock ul { display: -webkit-box; display: -ms-flexbox; display: flex; }
.purposeBlock ul li { display: inline-block; margin: 0 30px 0 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.purposeBlock ul li:last-child { margin: 0; }
.purposeBlock ul li div { margin: 0 0 30px 0; border-bottom: 1px solid rgba(51, 51, 51, 0.3); }
.purposeBlock ul li h5 { font: bold 14px/20px Microsoft JhengHei, sans-serif; margin: 0 0 10px 0; }
.aboutMomoBlock { font-size: 0; }
.aboutMomoBlock .textCont { display: inline-block; width: 58%; padding: 90px 100px; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: top; }
.aboutMomoBlock .textCont h2 { color: #E30881; margin: 0 0 60px 0; }
.aboutMomoBlock .textCont button, .aboutMomoBlock .textCont a { display: inline-block; padding: 0px 25px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #E30881; background: transparent; border: 2px solid rgba(227, 8, 129, 0.3); border-radius: 5px; font: bold 16px/36px Microsoft JhengHei, sans-serif; text-align: center; letter-spacing: 2px; cursor: pointer; margin: 20px 0 40px 0; }
.aboutMomoBlock .textCont button:hover, .aboutMomoBlock .textCont a:hover { background: #E30881; color: #ffffff; border-color: #E30881; }
.aboutMomoBlock .imgCont { display: inline-block; width: 42%; height: 1000px; background: transparent url(../img/about/building.jpg) no-repeat bottom center/cover; }
.teamMemberBlock { padding: 60px 100px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 0; }
.teamMemberBlock h2 { display: inline-block; width: 200px; vertical-align: top; color: #E30881; }
.teamMemberBlock h5 { font: 14px/20px Microsoft JhengHei, sans-serif; margin: 0; }
.teamMemberBlock .memberCont { display: inline-block; width: calc(100% - 200px); }
.teamMemberBlock .memberCont .imgBox { display: inline-block; }
.teamMemberBlock .memberCont .imgBox img { margin: 0 0 10px 0; }
.teamMemberBlock .memberCont .textBox { display: inline-block; width: calc(100% - 300px); padding: 0 0 0 30px; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: top; }
.teamMemberBlock .memberCont .textBox p { margin: 0 0 20px 0; }
.teamMemberBlock .memberCont .textBox ul li { font: 14px/20px Microsoft JhengHei, sans-serif; width: calc(50% - 20px); margin: 0 10px 15px 0; vertical-align: top; }
.teamMemberBlock .memberCont .textBox ul li::before { top: 7px; }
.teamMemberBlock .memberCont .presidentArea, .teamMemberBlock .memberCont .generalManagerArea { font-size: 0; margin: 0 0 60px 0; }
.teamMemberBlock .memberCont .otherMemberArea dl { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.teamMemberBlock .memberCont .otherMemberArea dl::after { content: ''; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; }
.teamMemberBlock .memberCont .otherMemberArea dl dd { margin: 0 30px 30px 0; max-width: calc((100% - 90px)/4); cursor: pointer; }
.teamMemberBlock .memberCont .otherMemberArea dl dd:nth-child(4n) { margin-right: 0; }
.teamMemberBlock .memberCont .otherMemberArea dl dd.turnOff { opacity: 0.3; }
.teamMemberBlock .memberCont .otherMemberArea dl dd ul { margin: 20px 0 0 0; display: none; }
.teamMemberBlock .memberCont .otherMemberArea dl dd ul li { font: 15px/30px Microsoft JhengHei, sans-serif; }
.orgBlock { padding: 30px 100px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 0; }
.orgBlock h2 { display: inline-block; width: 200px; vertical-align: top; color: #E30881; }
.orgBlock .orgCont { display: inline-block; width: calc(100% - 300px); }
.orgBlock .orgCont p { font: 36px/50px Microsoft JhengHei, sans-serif; margin: 0 0 20px 0; }
.historyBlock { padding: 30px 100px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; }
.historyBlock h2 { color: #E30881; }
.historyBlock .yearList { background-color: #E8E8E8; height: 600px; position: absolute; right: 0; top: 120px; padding: 0 25px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 10px 0px 0px 10px; overflow-y: auto; }
.historyBlock .yearList .dropBtnBasic { display: none; }
.historyBlock .yearList ul { margin: 30px 0; }
.historyBlock .yearList ul li { font: bold 18px/25px Arial, Helvetica, sans-serif; color: #B2B2B2; cursor: pointer; margin: 0 0 20px 0; letter-spacing: 2px; }
.historyBlock .yearList ul li:hover { color: #E30881; }
.historyBlock .yearList select { display: none; }
.historyBlock .historyCont { padding: 30px 100px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; position: relative; }
.historyBlock .historyCont::before { content: ""; display: inline-block; width: 2px; height: calc(100% - 160px); background: -webkit-gradient(linear, left top, left bottom, from(rgba(51, 51, 51, 0)), color-stop(3%, rgba(51, 51, 51, 0.2)), color-stop(97%, rgba(51, 51, 51, 0.2)), to(rgba(51, 51, 51, 0))); background: linear-gradient(rgba(51, 51, 51, 0), rgba(51, 51, 51, 0.2) 3%, rgba(51, 51, 51, 0.2) 97%, rgba(51, 51, 51, 0) 100%); position: absolute; top: 110px; left: calc(50% - 1px); }
.historyBlock .historyCont dl dt { font: bold 72px/72px Arial, Helvetica, sans-serif; color: #E30881; margin: 30px 0; }
.historyBlock .historyCont dl dd .bigthingArea li div { display: inline-block; -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15); box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15); width: calc((100% - 84px)/2); padding: 15px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; background-color: #fff; text-align: left; border-radius: 3px; }
.historyBlock .historyCont dl dd .bigthingArea li div span { display: block; font: bold 14px/20px Microsoft JhengHei, sans-serif; color: rgba(51, 51, 51, 0.5); margin: 0 0 5px 0; }
.historyBlock .historyCont dl dd .bigthingArea li div h5 { font: bold 14px/20px Microsoft JhengHei, sans-serif; color: #333333; margin: 0; }
.historyBlock .historyCont dl dd .bigthingArea li:nth-child(2n+1) { text-align: left; }
.historyBlock .historyCont dl dd .bigthingArea li:nth-child(2n+1) div::after { content: ""; display: inline-block; width: 24px; height: 19px; background: transparent url(../img/momo.png) no-repeat top left/100% auto; position: absolute; right: -54px; top: calc(50% - 10px); }
.historyBlock .historyCont dl dd .bigthingArea li:nth-child(2n) { text-align: right; }
.historyBlock .historyCont dl dd .bigthingArea li:nth-child(2n) div::after { content: ""; display: inline-block; width: 24px; height: 19px; background: transparent url(../img/momo.png) no-repeat top left/100% auto; position: absolute; left: -54px; top: calc(50% - 10px); }
.historyBlock .historyCont dl dd .gloryArea { text-align: right; }
.historyBlock .historyCont dl dd .gloryArea .innerArea { display: inline-block; text-align: left; width: calc((100% - 84px)/2); margin: 30px 0 0 0; }
.historyBlock .historyCont dl dd .gloryArea .innerArea h3 { margin: 0 0 5px 0; }
.floatLayer.detailInfo .imgBox { margin: 0 0 15px 0; text-align: center; }
.floatLayer.detailInfo .imgBox img { width: 70%; display: block; }
.floatLayer.detailInfo h3 { display: inline-block; color: #333333; margin: 0 10px 0 0; }
.floatLayer.detailInfo h5 { font: 14px/28px Microsoft JhengHei, sans-serif; display: inline-block; margin: 0; }
@media screen and (max-width: 1340px) { .teamMemberBlock h2 { display: block; width: 100%; margin: 0 0 30px 0; }
  .teamMemberBlock .memberCont { width: 100%; }
  .teamMemberBlock .memberCont .imgBox { width: 30%; }
  .teamMemberBlock .memberCont .textBox { width: 70%; }
  .orgBlock .orgCont { width: calc(100% - 200px); } }

@media screen and (max-width: 1024px) { .about .bannerBlock { background-position-x: right; }
  .tempalteBlock .navtab { display: none; }
  .purposeBlock { margin: 0; padding: 50px 30px; }
  .purposeBlock h2 { font-size: 18px; margin: 0 0 30px 0; }
  .purposeBlock ul { display: block; }
  .purposeBlock ul li { display: block; margin: 0 0 30px 0; }
  .purposeBlock ul li div { margin: 0 0 20px 0; }
  .aboutMomoBlock { background-color: #fff; }
  .aboutMomoBlock .textCont { display: block; width: 100%; padding: 30px 30px 0 30px; -webkit-box-sizing: border-box; box-sizing: border-box; }
  .aboutMomoBlock .textCont h2 { font-size: 18px; margin: 0 0 30px 0; }
  .aboutMomoBlock .textCont button, .aboutMomoBlock .textCont a { margin: 20px 0 30px 0; }
  .aboutMomoBlock .imgCont { display: block; width: 100%; height: 625px; margin: 0 0 30px 0; }
  .teamMemberBlock { padding: 30px; }
  .teamMemberBlock .memberCont .otherMemberArea dl dd { max-width: calc((100% - 60px) / 3); }
  .teamMemberBlock .memberCont .otherMemberArea dl dd:nth-child(4n) { margin-right: 30px; }
  .teamMemberBlock .memberCont .otherMemberArea dl dd:nth-child(3n) { margin-right: 0; }
  .orgBlock { background-color: #fff; padding: 30px; }
  .orgBlock h2 { display: block; width: 100%; }
  .orgBlock .orgCont { display: block; width: 100%; }
  .orgBlock .orgCont p { font-size: 24px; line-height: 36px; }
  .historyBlock { padding: 30px 0; background-color: #fff; }
  .historyBlock h2 { padding: 0 30px; }
  .historyBlock .yearList { display: block; position: -webkit-sticky; position: sticky; top: 44px; width: 100%; height: auto; border-radius: 0; background-color: #f4f4f4; padding: 12px 30px; margin: 10px 0 0 0; z-index: 2; }
  .historyBlock .yearList ul { display: none; }
  .historyBlock .yearList select { display: block; width: 100%; border: 0; background-color: #f4f4f4; font: bold 16px/30px Microsoft JhengHei, sans-serif; color: #333333; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(../img/arrow.png); background-repeat: no-repeat; background-position: right center; background-color: transparent; background-size: 25px auto; }
  .historyBlock .yearList select:focus { border: 0; outline: none; }
  .historyBlock .historyCont { padding: 30px; }
  .historyBlock .historyCont::before { display: none; }
  .historyBlock .historyCont dl dt { font-size: 36px; line-height: 72px; text-align: left; margin: 0; }
  .historyBlock .historyCont dl dd .bigthingArea li { margin: 0 0 15px 0; }
  .historyBlock .historyCont dl dd .bigthingArea li:nth-child(2n+1) div::after { display: none; }
  .historyBlock .historyCont dl dd .bigthingArea li:nth-child(2n) div::after { display: none; }
  .historyBlock .historyCont dl dd .bigthingArea li div { width: 100%; }
  .historyBlock .historyCont dl dd .gloryArea .innerArea { width: 100%; margin: 0 0 20px 0; padding: 0 15px; -webkit-box-sizing: border-box; box-sizing: border-box; } }
@media screen and (max-width: 640px) { .teamMemberBlock { padding: 30px; }
  .teamMemberBlock h2 { font-size: 18px; }
  .teamMemberBlock .memberCont .imgBox { width: 100%; }
  .teamMemberBlock .memberCont .imgBox img { margin: 0 0 10px 0; }
  .teamMemberBlock .memberCont .textBox { display: none; }
  .teamMemberBlock .memberCont .presidentArea { margin: 0 20px 30px 0; }
  .teamMemberBlock .memberCont .generalManagerArea { margin: 0 0 30px 0; }
  .teamMemberBlock .memberCont .presidentArea, .teamMemberBlock .memberCont .generalManagerArea { display: inline-block; width: calc(50% - 10px); }
  .teamMemberBlock .memberCont .presidentArea.turnOff, .teamMemberBlock .memberCont .generalManagerArea.turnOff { opacity: 0.3; }
  .teamMemberBlock .memberCont .otherMemberArea dl dd { margin: 0 20px 30px 0; max-width: calc(50% - 10px); }
  .teamMemberBlock .memberCont .otherMemberArea dl dd:nth-child(2n) { margin-right: 0; }
  .teamMemberBlock .memberCont .otherMemberArea dl dd:nth-child(2n-1) { margin-right: 20px; }
  .teamMemberBlock .memberCont .otherMemberArea dl dd ul li { line-height: 27px; }
  .orgCont .orgImg { overflow-x: auto; }
  .orgCont .orgImg img { width: 800px; } }