@charset "utf-8";
/* CSS Document */
.banner { position: relative; z-index: 10;}
.banner::after { content: ''; display: block; width: 100%; height: 10px; background: linear-gradient( 90deg, #0761ff 0%, #0761ff 16%, #009aff 16%, #009aff 33%, #00acff 33%, #00acff 50%, #15c6ff 50%, #15c6ff 67%, #4edaff 67%, #4edaff 84%, #77efff 84%, #77efff 100%);}
.banner .scroll_down { position: absolute; bottom: 25%; left: 0; right: 0; z-index: 2; transition: all 0.35s ease 0s;}
.banner .scroll_down .circle { position: relative; display: inline-block; transition: all 0.35s ease 0s;}
.banner .scroll_down .circle a { position: relative; display: inline-block; transition: all 0.35s ease 0s;}
.banner .scroll_down .circle .text { position: absolute; top: 10px; left: 40px; line-height: 1; color: #fff; font-weight: 500; transition: all 0.35s ease 0s;}
.banner .scroll_down .circle .arrow { position: absolute; bottom: 8px; left: 73px; line-height: 1; transition: all 0.35s ease 0s;}
.banner .scroll_down .circle:hover { filter: brightness(0) saturate(100%) hue-rotate(195deg);}
.banner .soci { position: absolute; top: 31%; left: 37px; z-index: 2;}
.banner .soci > div { margin: 0 0 10px 0;}
.ind_A { position: relative; margin: 7% 0 0 0;}
.ind_A .ind_A_T { display: flex; flex-flow: wrap;}
.ind_A .ind_A_T .text { width: 47%; letter-spacing: 0.8px;}
.ind_A .ind_A_T .text .titleA { margin: 0; letter-spacing: 3px;}
.ind_A .ind_A_T .text .titleB { margin: 33px 0 38px 0;}
.ind_A .ind_A_T .pic { width: 49%; margin: 5px 0 0 4%; display: flex; flex-flow: wrap;}
.ind_A .ind_A_T .pic > div { width: 49%;}
.ind_A .ind_A_T .pic > div:first-child { margin: 0 2% 0 0;}
.ind_A .ind_A_T .pic > div .blue_01 { width: 50%; background: #60BFEB; height: 24px; margin: 0 auto 24px 0;}
.ind_A .ind_A_T .pic > div .blue_02 { width: 50%; background: #273F6F; height: 24px; margin: 24px 0 0 auto;}
.ind_A .ind_A_B { display: flex; flex-flow: wrap; margin: 5% 0 0 0;}
.ind_A .ind_A_B > div { position: relative; width: 31.58%; margin: 0 2.63% 0 0; background: #079BE0; overflow: hidden; z-index: 1; transition: all 0.35s ease 0s;}
.ind_A .ind_A_B > div:nth-child(3n+2) { background: #0751dd;}
.ind_A .ind_A_B > div:nth-child(3n+3) { background: #033083; margin: 0;}
.ind_A .ind_A_B > div .pic { position: relative; width: 100%; height: 0; padding-bottom: 54.285%; overflow: hidden;border-radius: 70px 0 0 0; z-index: 2;}
.ind_A .ind_A_B > div .pic img { transition: all 0.35s ease 0s;}
.ind_A .ind_A_B > div .pic::before { content: ''; position: absolute; top: 100%; left: 100%; right: 0; bottom: 0; background: RGBA(0, 27, 143, 0.65); border-radius: 70px 0 0 0; z-index: 11; transition: all 0.35s ease 0s;}
.ind_A .ind_A_B > div .titleC { position: absolute; bottom: 30px; left: 0; width: 100%; color: #fff; margin: 0; padding: 0 65px 0 30px; z-index: 3;}
.ind_A .ind_A_B > div .titleC .icon { position: absolute; right: 0; bottom: 0; line-height: 1; z-index: 4; transition: all 0.35s ease 0s;}
.ind_A .ind_A_B > div:hover { background: #B3B3B3;}
.ind_A .ind_A_B > div:hover .pic img { transform: scale(1.1); filter: grayscale(1);}
.ind_A .ind_A_B > div:hover .pic::before { top: 0; left: 0;}
.ind_A .ind_A_B > div:hover .titleC .icon { filter: invert(1) grayscale(1);}
.ind_B { position: relative; background: url("../images/ind_bg_01.jpg") no-repeat center fixed; background-size: cover; margin: 5% 0 0 0;}
.ind_B .ind_B_in { padding: 7.369% 0;}
.ind_C { position: relative; background: url("../images/ind_bg_02.jpg") no-repeat center; background-size: cover;}
.ind_C .ind_C_in { padding: 8% 0;}
.ind_C .ind_C_in .titleC { margin: 0; display: flex; flex-flow: wrap; align-items: center;}
.ind_C .ind_C_in .titleC .icon { margin: 0 23px; line-height: 0;}
.ind_C .ind_C_in p { color: #fff;}
.ind_C .ind_C_in .ind_C_A { display: flex; flex-flow: wrap; margin: 80px 0 50px 0;}
.ind_C .ind_C_in .ind_C_A > div { position: relative; width: 23.158%; margin: 0 2.456% 30px 0; background: #fff; border-radius: 80px 0 80px 0; overflow: hidden; transition: all 0.35s ease 0s;}
.ind_C .ind_C_in .ind_C_A > div:nth-child(4n+4) { margin: 0 0 30px 0;}
.ind_C .ind_C_in .ind_C_A > div::before { content: ''; position: absolute; top: 0; right: 0; left: 100%; bottom: 0; background: #001B8F; z-index: 1; transition: all 0.35s ease 0s;}
.ind_C .ind_C_in .ind_C_A > div .pic { position: relative; width: 100%; height: 0; padding-bottom: 94.155844%; overflow: hidden; z-index: 1;}
.ind_C .ind_C_in .ind_C_A > div .pic::before { content: ''; position: absolute; top: 100%; left: 100%; right: 0; bottom: 0; background: RGBA(0, 27, 143, 0.65); border-radius: 80px 0 0 0; z-index: 11; transition: all 0.35s ease 0s;}
.ind_C .ind_C_in .ind_C_A > div .pic img { transition: all 0.35s ease 0s;}
.ind_C .ind_C_in .ind_C_A > div .text { position: relative; padding: 10px 40px 10px 20px; z-index: 1;}
.ind_C .ind_C_in .ind_C_A > div .text h3 { margin: 0; color: #273f6f; font-weight: 500; transition: all 0.35s ease 0s;}
.ind_C .ind_C_in .ind_C_A > div .text a { position: relative; color: #414141; transition: all 0.35s ease 0s;}
.ind_C .ind_C_in .ind_C_A > div .text a::after { content: ''; display: inline-block; margin: 0 0 0 5px; width: 13px; height: 12px; background: url("../images/icon_i01.png") no-repeat center; transition: all 0.35s ease 0s;}
.ind_C .ind_C_in .ind_C_A > div .text .icon { position: absolute; top: -18px; right: 17px; line-height: 1; z-index: 5; transition: all 0.35s ease 0s;}
.ind_C .ind_C_in .ind_C_A > div:hover::before { left: 0;}
.ind_C .ind_C_in .ind_C_A > div:hover .pic::before { top: 0; left: 0;}
.ind_C .ind_C_in .ind_C_A > div:hover .pic img { transform: scale(1.1); filter: grayscale(1);}
.ind_C .ind_C_in .ind_C_A > div:hover .text h3 { color: #fff;}
.ind_C .ind_C_in .ind_C_A > div:hover .text a { color: #fff;}
.ind_C .ind_C_in .ind_C_A > div:hover .text a::after { filter: invert(1);}
.ind_C .ind_C_in .ind_C_A > div:hover .text .icon { filter: invert(1) grayscale(1);}