@charset "utf-8";
/* CSS Document */
.banner { position: relative; z-index: 10;}
.ind_A { margin: 70px 0 80px 0; text-align: center;}
.ind_A .btn_a { justify-content: center; margin: 50px 0 0 0;}
.ind_B { position: relative; background: #d4d6d7; padding: 40px 0 10px 0; overflow: hidden; z-index: 1;}
.ind_B::before { content: ''; position: absolute; bottom: 0; right: 0; width: 20.782%; height: 48.92%; background: url("/images/theme-b67/bg_logo_01.svg") no-repeat center bottom / contain; z-index: -1;}
.ind_B .ind_B_T { display: flex; flex-flow: wrap; justify-content: space-between;}
.ind_B .ind_B_B { display: flex; flex-flow: wrap; margin: 65px auto 0 auto; max-width: 999px;}
.ind_B .ind_B_B > div { position: relative; width: 31.7%; margin: 0 2.45% 50px 0; background: #608dca; transition: all 0.25s ease 0s;}
.ind_B .ind_B_B > div:nth-child(3n+3) { margin: 0 0 50px 0;}
.ind_B .ind_B_B > div .pic { position: relative; width: 100%; height: 0; padding-bottom: 97.7917%; overflow: hidden; transition: all 0.25s ease 0s;}
.ind_B .ind_B_B .tit { background: #608dca; color: #fff; padding: 10px 10px; line-height: 1.5; font-size: 112.5%; transition: all 0.25s ease 0s;}
.ind_B .ind_B_B > div:hover { background: #385881;}
.ind_B .ind_B_B > div:hover .pic { transform: scale(0.9);}
.ind_B .ind_B_B div:hover .tit { background: #385881;}
.ind_C { margin: 90px 0 90px 0; overflow: hidden;}
.ind_C .title_A { margin-bottom: 100px; text-align: center;}
.ind_C .bg_right { position: relative; display: flex; flex-flow: row; align-items: center; margin: 0 0 20px 0;}
.ind_C .bg_right::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; background: #efefef; width: 5000px; z-index: -1;}
.ind_C .bg_right > div:nth-child(1) { width: 38.554%; clip-path: polygon(0 0, 70% 0, 100% 100%, 0% 100%); margin: -20px 0 0 0;}
.ind_C .bg_right > div:nth-child(2) { width: 61.446%; padding: 20px 10% 20px 3%;}
.ind_C .bg_right > div:nth-child(2) p { margin: 0;}
.ind_C .bg_left { position: relative; display: flex; flex-flow: row-reverse; align-items: center; margin: 0 0 20px 0;}
.ind_C .bg_left::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; background: #efefef; width: 5000px; z-index: -1;}
.ind_C .bg_left > div:nth-child(1) { width: 38.554%; clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%); margin: -20px 0 0 0;}
.ind_C .bg_left > div:nth-child(2) { width: 61.446%; padding: 20px 3% 20px 10%; }
.ind_C .bg_left > div:nth-child(2) p { margin: 0;}
.ind_D { margin: 70px 0 90px 0; overflow: hidden;}
.ind_D .title_A { text-align: center;}
.ind_D .btn_a { justify-content: center;} 
.ind_D .process > div { position: relative; display: flex; flex-flow: wrap;}
.ind_D .process { max-width: 1200px; margin: 100px auto 20px auto;}
.ind_D .process > div > div { position: relative; width: 33.33%; text-align: center; margin: 0 0 50px 0;}
.ind_D .process > div > div::before { content: ''; position: absolute; top: 75px; left: 0; height: 1px; width: 100%; background: #608dca; z-index: -1;}
.ind_D .process > div > div:nth-child(1)::before { left: auto; right: 0; width: 50%;}
.ind_D .process > div > div:nth-child(3)::before { width: 1000px;}
.ind_D .process > div > div:nth-child(4)::before { left: auto; right: 0; width: 1000px;}
.ind_D .process > div > div:nth-child(6)::before { width: 50%;}
.ind_D .process > div > div .step { font-weight: 500; transition: all 0.25s ease 0s;}
.ind_D .process > div > div .text { color: #595757; line-height: 1.5; transition: all 0.25s ease 0s;}
.ind_D .process > div > div .pic { position: relative; width: 150px; margin: 0 auto 5px auto; z-index: 1;}
.ind_D .process > div > div .pic::before { content: ''; position: absolute; top: calc(50% - 75px); left: calc(50% - 75px); width: 150px; height: 150px; animation: rotateIt 15s infinite linear; background: url("/images/theme-b67/ind_14_1.png") no-repeat center / contain; z-index: -1;}
.ind_D .process > div > div:hover .step { color: #608dca;}
.ind_D .process > div > div:hover .text { color: #608dca;}