body { background: url(/img/web/about_theme_bg.jpg) top 100px center no-repeat; background-size: 100%; }
.main > .wrap { position: relative; }

.expertsList { display: flex; flex-flow: row wrap; justify-content: flex-start; justify-items: stretch; gap: 28px; }
.expertsList > a { width: 348px; padding: 40px; box-sizing: border-box; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; background: #fff; border-radius: 20px; position: relative; overflow: hidden; }
.expertsList > a > .bg { transition: .3s; opacity: 0; position: absolute; z-index: 6; top: -50px; right: -50px; bottom: -50px; left: -50px; filter: blur(8px); background: linear-gradient(-167deg, #1a5eff, #496bf2, #7373fa, #9966ff); background-size: cover; }
.expertsList > a > .pho { transition: .3s; margin: 10px; position: relative; z-index: 7; width: 180px; height: 180px; }
.expertsList > a > .pho > i { display: inline-flex; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: 100%; border-radius: 50%; }
.expertsList > a > .info { position: relative; z-index: 8; padding: 40px 0 0 0; width: 100%; box-sizing: border-box; }
.expertsList > a > .info > h2 { text-align: center; height: 72px; }
.expertsList > a > .info > h2 > b { color: #000; display: inline-flex; flex-flow: column nowrap; font-size: 30px; line-height: 30px; font-weight: 400; margin-bottom: 20px; }
.expertsList > a > .info > h2 > b::after { transition: .3s; content: ''; display: inline-flex; height: 2px; background: #1a5eff; width: 30px; margin-top: 20px; }
.expertsList > a > .info > p { text-align: center; color: #555; font-size: 12px; line-height: 20px; }
.expertsList > a:hover { box-shadow: 0 0 20px rgba(0,0,0,.15); }
.expertsList > a:hover > .bg { filter: blur(20px); opacity: 1; }
.expertsList > a:hover > .pho { width: 200px; height: 200px; margin: 0px; }
.expertsList > a:hover > .info > h2 > b { color: #fff; }
.expertsList > a:hover > .info > h2 > b::after { width: 100%; background: #fff; }
.expertsList > a:hover > .info > p { color: #fff; opacity: .7; }

.supOrgList { display: flex; flex-flow: row wrap; justify-content: center; justify-items: stretch; gap: 28px; }
.supOrgList > a { background: #fff; width: 348px; height: 238px; padding: 60px 20px; box-sizing: border-box; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; border-radius: 20px; position: relative; overflow: hidden; }
.supOrgList > a > .desc { margin-top: 10px; transition: .3s; text-align: center; font-size: 20px; line-height: 30px; font-weight: bold; position: relative; z-index: 7; }
.supOrgList > a > .bg { transition: .3s; opacity: 0; position: absolute; z-index: 6; top: -50px; right: -50px; bottom: -50px; left: -50px; filter: blur(0px); background: url(/img/web/line_bg.png) center center no-repeat; background-size: cover; }
.supOrgList > a::before { transition: .3s; opacity: .15; position: relative; z-index: 8; content: ''; display: inline-flex; height: 48px; width: 48px; background: url(/img/web/ico/parliament_black.svg); background-size: 100%; }
.supOrgList > a:hover { background: linear-gradient(-167deg, #1a5eff, #496bf2, #7373fa, #9966ff); color: #000; box-shadow: 0 0 20px rgba(0,0,0,.3); }
.supOrgList > a:hover > .desc { color: #fff; font-size: 24px; font-weight: bold; }
.supOrgList > a:hover > .bg { opacity: .3; filter: blur(0px); top: 0; right: 0; bottom: 0; left: 0; }
.supOrgList > a:hover::before { background-image: url(/img/web/ico/parliament_white.svg); height: 0; opacity: 0; }

.secList { }
.secList > .item { background: #fff; border-radius: 20px; padding: 40px 40px 60px 40px; margin-bottom: 20px; overflow: hidden; position: relative; }
.secList > .item > .topline { transition: .3s; position: absolute; left: 50%; top: 0; width: 0; height: 3px; background: #7d9ffc; z-index: 7; opacity: 0; }
.secList > .item > .btmline { transition: .3s; position: absolute; left: 50%; bottom: 0; width: 0; height: 3px; background: #7d9ffc; z-index: 7; opacity: 0; }
.secList > .item > h2 { margin-bottom: 20px; position: relative; z-index: 7; }
.secList > .item > h2 > i { transition: .3s; display: inline-flex; justify-content: center; align-items: center; font-family: 'MyriadPro_Condensed'; font-size: 30px; font-weight: 600; line-height: 30px; height: 64px; width: 64px; border-radius: 50%; border: solid 2px #7d9ffc; color: #1a5eff; box-sizing: border-box; }
.secList > .item > h2 > b { transition: .3s; font-size: 24px; font-weight: bold; margin-left: 20px; }
.secList > .item > .desc { transition: .3s; font-size: 18px; color: #555; line-height: 30px; margin-left: 84px; position: relative; z-index: 7; }
.secList > .item > .bg { transition: .3s; opacity: 0; position: absolute; z-index: 6; top: -50px; right: -50px; bottom: -50px; left: -50px; filter: blur(8px); background: linear-gradient(-167deg, #1a5eff, #496bf2, #7373fa, #9966ff); background-size: cover; }
.secList > .item:hover { color: #000; box-shadow: 0 0 20px rgba(0,0,0,.1); }
.secList > .item:hover .bg { opacity: .1; filter: blur(0px); top: 0; right: -20%; bottom: -30%; left: 0; }
.secList > .item:hover > h2 > i { border-color: #494cea; color: #494cea; }
.secList > .item:hover > h2 > b { font-size: 30px; }
.secList > .item:hover > .desc { color: #000; }
.secList > .item:hover > .topline { left: 0; width: 100%; opacity: 1; }
.secList > .item:hover > .btmline { left: 0; width: 100%; opacity: 1; }

.procList { }
.procList > .item { background: #fff; border-radius: 20px; padding: 40px 40px 60px 40px; margin-bottom: 20px; overflow: hidden; position: relative; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
.procList > .item > .topCir { transition: .3s; position: absolute; left: 50%; top: -30%; width: 300px; height: 300px; border-radius: 50%; border: solid 3px #7d9ffc; z-index: 7; opacity: .1; }
.procList > .item > .btmCir { transition: .3s; position: absolute; left: 80%; top: 0; width: 600px; height: 600px; border-radius: 50%; border: solid 3px #7d9ffc; z-index: 7; opacity: .1; }
.procList > .item > h2 { flex-shrink: 0; display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: center; width: 300px; }
.procList > .item > h2 > span { transition: .3s; display: inline-flex; height: 200px; width: 200px; border-radius: 50%; background: linear-gradient(-167deg, #1a5eff, #496bf2, #7373fa, #9966ff); box-sizing: border-box; padding: 26px; }
.procList > .item > h2 > span > i { transition: .3s; background: #fff; display: inline-flex; justify-content: center; align-items: center; color: #7d9ffc; font-family: 'MyriadPro_Condensed'; font-size: 60px; font-weight: 600; line-height: 30px; height: 100%; width: 100%; border-radius: 50%; box-sizing: border-box; }
.procList > .item > h2 > b { transition: .3s; text-align: center; font-family: 'MyriadPro_Condensed'; font-size: 20px; font-weight: 400; margin-left: 20px; color: #888; }
.procList > .item > .desc { width: 100%; transition: .3s; font-size: 18px; color: #555; line-height: 30px; margin-left: 40px; position: relative; z-index: 7; }
.procList > .item > .desc > h2 { color: #000; font-size: 26px; font-weight: bold; margin-bottom: 10px; }
.procList > .item > .bg { transition: .3s; opacity: 0; position: absolute; z-index: 6; top: -50px; right: -50px; bottom: -50px; left: -50px; filter: blur(8px); background: url(/img/web/line2_bg.png) center center no-repeat; background-size: cover; }
.procList > .item:hover { color: #000; box-shadow: 0 0 20px rgba(0,0,0,.1); }
.procList > .item:hover .bg { opacity: .3; filter: blur(0px); top: 0; left: -20%; bottom: -30%; left: 0; }
.procList > .item:hover > h2 > span { background: linear-gradient(-167deg, #1a5eff, #496bf2, #7373fa, #9966ff); }
.procList > .item:hover > h2 > span > i { border-color: #1a5eff; color: #1a5eff; }
.procList > .item:hover > h2 > b { }
.procList > .item:hover > .desc { color: #000; }
.procList > .item:hover > .topCir { transform: scale(1.2); opacity: 0; }
.procList > .item:hover > .btmCir { transform: scale(1.6); opacity: 0; }

.svcList { }
.svcList > .item { background: #fff; border-radius: 20px; padding: 60px 100px 60px 60px; margin-bottom: 20px; overflow: hidden; position: relative; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
.svcList > .item > h2 { position: relative; z-index: 6; width: 200px; height: 200px; flex-shrink: 0; display: inline-flex; flex-flow: column nowrap; justify-content: center; align-items: center; }
.svcList > .item > h2 > i { display: inline-flex; height: 96px; width: 96px; background: url(/img/web/ico/dropbox_color.svg) center center no-repeat; background-size: 100%; margin-bottom: 20px; }
.svcList > .item > h2 > i.ico_01 { background-image: url(/img/web/ico/dropbox_color.svg); }
.svcList > .item > h2 > i.ico_02 { background-image: url(/img/web/ico/star_of_bethlehem_color.svg); }
.svcList > .item > h2 > i.ico_03 { background-image: url(/img/web/ico/mind_map_color.svg); }
.svcList > .item > h2 > i.ico_04 { background-image: url(/img/web/ico/crowdfunding_color.svg); }
.svcList > .item > h2 > i.ico_05 { background-image: url(/img/web/ico/report_card_color.svg); }
.svcList > .item > h2 > i.ico_06 { background-image: url(/img/web/ico/trophy_color.svg); }
.svcList > .item > h2 > i.ico_07 { background-image: url(/img/web/ico/medal_color.svg); }
.svcList > .item > h2 > i.ico_08 { background-image: url(/img/web/ico/services_color.svg); }
.svcList > .item > h2 > i.ico_09 { background-image: url(/img/web/ico/biaozhunceping_color.svg); }
.svcList > .item > h2 > i.ico_10 { background-image: url(/img/web/ico/zaitiruzhu_color.svg); }
.svcList > .item > h2 > b { font-size: 24px; font-weight: bold; }
.svcList > .item > .desc { position: relative; z-index: 6; font-size: 20px; line-height: 32px; margin-left: 60px; }
.svcList > .item > .bg { transition: .3s; opacity: 0; position: absolute; z-index: 1; top: -50px; right: -50px; bottom: -50px; left: -50px; filter: blur(8px); background: linear-gradient(-167deg, #1a5eff, #496bf2, #7373fa, #9966ff); background-size: cover; }

.svcList > .item:hover > h2 > i.ico_01 { background-image: url(/img/web/ico/dropbox_white.svg); }
.svcList > .item:hover > h2 > i.ico_02 { background-image: url(/img/web/ico/star_of_bethlehem_white.svg); }
.svcList > .item:hover > h2 > i.ico_03 { background-image: url(/img/web/ico/mind_map_white.svg); }
.svcList > .item:hover > h2 > i.ico_04 { background-image: url(/img/web/ico/crowdfunding_white.svg); }
.svcList > .item:hover > h2 > i.ico_05 { background-image: url(/img/web/ico/report_card_white.svg); }
.svcList > .item:hover > h2 > i.ico_06 { background-image: url(/img/web/ico/trophy_white.svg); }
.svcList > .item:hover > h2 > i.ico_07 { background-image: url(/img/web/ico/medal_white.svg); }
.svcList > .item:hover > h2 > i.ico_08 { background-image: url(/img/web/ico/services_white.svg); }
.svcList > .item:hover > h2 > i.ico_09 { background-image: url(/img/web/ico/biaozhunceping_white.svg); }
.svcList > .item:hover > h2 > i.ico_10 { background-image: url(/img/web/ico/zaitiruzhu_white.svg); }
.svcList > .item:hover > h2 > b { color: #fff; }
.svcList > .item:hover > .desc { color: #fff; }
.svcList > .item:hover .bg { opacity: 1; filter: blur(0px); top: 0; left: -20%; bottom: -50%; left: 0; }