.solution{width:100%; margin:auto;  padding: 0px;list-style: none; display:flex; flex-wrap: wrap; align-items: center;align-content: center;  justify-content: center; position: relative }
.solution:after{content: ""; width:100%; height:100%;position: absolute;z-index: -1; right:0; top:0; background: url("../images/index/a-line.svg") no-repeat right 45%; background-size: 90% auto;opacity: 0.7; }
.solution li {width:calc(100%/4 - 100px); margin:50px; cursor: pointer; position: relative;}
.solution li:after{ content: ""; width: 100%; height:30px; position: absolute;z-index: -1; right:-40%; top:12vh; background: url("../images/index/arrow-r.svg") no-repeat right center; }
.solution li:nth-child(4):after,.solution li:last-child:after{display: none;}
.solution li .item { width: 100%; padding: 10px;display:flex; flex-wrap: wrap; align-items: center;  justify-content: center; margin: auto; border-radius:25px;border:solid 2px #e8334a;background: #fff ;box-shadow: 1px 1px  8px 3px rgba(233, 51 ,74,.3); }
.solution li figure{  width:120px;height:120px;margin: auto; padding: 10px;}
.solution li span{  width:100%;min-height: 46px; font-size: clamp(.9rem, 2.3vw, 1.125rem); color:#000e3d;font-weight: 700; line-height: 1.275rem;text-align: center;  }
 @media (max-width:1112px) {
.solution{width:100%;}	 
.solution:after{background-position:right 52%; }	
.solution li {width:calc(100%/4 - 80px); margin:50px 40px; cursor: pointer; position: relative;}
 }
  
 @media (max-width:840px) {
.solution:after{ width:100%; height:100%;  background-position:right 52%; }
.solutionl i:after{ content: ""; width: 100%; height:30px; position: absolute;z-index: -1; right:-22%; top:6vh; background: url("../images/index/arrow-r.svg") no-repeat right center; }
}
 @media (max-width:767.98px) {
.solution{width:90%; margin:auto; flex-direction: column   }
.solution:after{display: none;}
.solution li {width:200px; margin:30px auto;  }
.solution li:after{   width: 100%; height:30px;  z-index: -1; left:0; top:auto;bottom:-30px; background: url("../images/index/arrow-r.svg") no-repeat center;-moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);  }
.solution li:nth-child(4):after{display: block;}
}


/*hover*/
.solution li .item:hover, .solution li .item:focus { background-color:rgba(233, 51 ,74,1);   animation: pulse 1s; box-shadow: 0 0 0 2em transparent;}
.solution li .item:hover figure img{ filter:invert(100%) brightness(5) grayscale(1) }
.solution li .item:hover span{color: #fff;}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(146, 148, 248, 0.4);  }
}
 
@keyframes rotate {
  0% { transform: rotate(0deg) }
  to { transform: rotate(360deg)  }
}
@keyframes rotate2 {
  0% { transform: rotate(0deg) scale(1) }
  to { transform: rotate(359deg) scale(1)  }
}

@keyframes rotateIt {
  to { transform: rotate(-360deg); }
}
.step{width:100%; margin:auto;  padding:0px 40px  100px 40px;list-style: none; }
.step li {width:100%; margin:60px auto; padding:0px 30px;background-color:#fff;border-radius: 30px;  position: relative; }
.step li:after{ content: "";  width: 150px; height:30px;  z-index:-2;position: absolute;  left:60px; top:auto;bottom:-30px; background: url("../images/index/arrow-r.svg") no-repeat center;-moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);  }
.step li:last-child:after{ display: none}

.step li .item { width: 100%; padding: 10px;display:flex; flex-wrap: wrap; align-items: center;  justify-content: center; margin: auto;   position: relative; z-index: 9}
.step li .item .icon{ width:200px; padding:20px;display:flex; flex-wrap: wrap; align-items: center;  justify-content: center; border-radius:25px;border:solid 2px #e8334a;background: #fff ;box-shadow: 1px 1px  8px 3px rgba(233, 51 ,74,.3);}
.step li .item .icon figure{  width:120px;height:120px;margin: auto; padding: 10px;}
.step li .item .icon span{  width:100%;min-height: 46px; font-size: clamp(.9rem, 2.3vw, 1.125rem); color:#000e3d;font-weight: 700; line-height: 1.275rem;text-align: center;  }

.step li .item .inner{width: calc(100% - 200px); padding: 20px 40px}
.step li .item .inner h3{font-size:1.575rem; font-weight: 700; margin-bottom: 15px; color: #e9334a }
.step li .item .inner p{font-size:1rem; font-weight: 400; line-height: 1.5rem  }
.step li:hover, .step li .item:focus { background-color:rgba(233, 51 ,74,1); animation: pulse 1s; box-shadow: 0 0 0 2em transparent;}
.step li:hover span{color:rgba(233, 51 ,74,1); }
.step li:hover .inner h3{color: #fff;}

 @media (max-width:992px) {
.step{ padding:0px 0px 100px 0px;  }
}
  @media (max-width:767.98px) {
.step li .item { padding: 20px 0px; flex-direction: column}  
.step li .item .inner{width: 100%; padding: 20px 0px}	
.step li:after{ left:25%;}
.step li .inner h3{text-align: center}
}

.solution_A { display: flex; flex-flow: wrap; align-items: center; line-height: 1.625; margin: calc(20px + 1%) 0 calc(20px + 4%) 0; font-family: "Noto Sans TC", sans-serif;}
.solution_A > div:nth-child(1) { width: 49.5%;}
.solution_A > div:nth-child(2) { width: calc(50.5% - 30px); position: relative; margin-left: 30px; z-index: 1;}
.solution_A .tit_a { position: relative; font-size: 225%; color: #010c3f; font-weight: 600; letter-spacing: 1px; line-height: 1.1; max-width: 80%; padding-bottom: 35px; margin-bottom: 20px; font-family: 'Oswald', sans-serif;}
.solution_A .tit_a::after { content: ''; position: absolute; bottom: 10px; left: 0; height: 4px; width: 80px; background: #b91c1c;}
.solution_A .mr_btm { margin-bottom: 30px;}
.solution_A .mr_btm span { font-weight: 400;}
.solution_A .category { display: flex; flex-flow: wrap;}
.solution_A .category > div { width: 50%; display: flex; flex-flow: wrap; align-items: center; margin-top: 15px;}
.solution_A .category > div .pic { width: 36px;}
.solution_A .category > div .txt { width: calc(100% - 36px); padding: 0 20px 0 15px; color: #212529; font-weight: 350; line-height: 1.4;}
.solution_A .img { border-radius: 15px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); max-width: 647px; line-height: 0; overflow: hidden;}
.solution_A .text { position: absolute; bottom: -30px; left: -30px; background: #1e293b; color: #fff; padding: 15px 20px; border-radius: 10px; width: 46%; font-weight: 350; border-top: 3px solid #b91c1c; box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);}
.solution_A .text .sma { font-size: 14px; margin-top: 8px; font-weight: 300;}
.solution_B { position: relative; display: flex; flex-flow: wrap; align-items: center; color: #fff; background: #0f172a; padding: calc(20px + 5%) 0;; font-family: "Noto Sans TC", sans-serif;}
.solution_B::before { content: ''; position: absolute;top: 0; bottom: 0; left: -100%; right: -100%; background: #0f172a; z-index: -1;}
.solution_B > div:nth-child(1) { width: 51.4%; padding-right: 3%;}
.solution_B > div:nth-child(2) { width: 48.6%; background: #262434; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 30px;}
.solution_B .tit_b { color: #fff; font-weight: 600; font-size: 225%; font-family: 'Oswald', sans-serif;}
.solution_B .text { font-size: 18px; color: #cbd5e1; font-weight: 300; line-height: 1.61; margin: 20px 0;}
.solution_B .check_on { position: relative; display: flex; flex-flow: wrap; align-items: center; margin-bottom: 20px; font-weight: 350;}
.solution_B .check_on::before { content: ''; display: inline-block; width: 21px; height: 21px; background: url("../images/solution_icon_check.png") no-repeat center; margin-right: 15px;}
.solution_B .check_on:last-child { margin-bottom: 0;}
.solution_B .tit { position: relative; display: flex; align-items: center; color: #fff; font-weight: 600; font-size: 20px; letter-spacing: 1px; font-family: 'Oswald', sans-serif;}
.solution_B .tit::before { content: ''; display: inline-block; width: 22px; height: 24px; background: url("../images/solution_icon_setting.png") no-repeat center; margin-right: 10px;}
.solution_B .item { display: flex; flex-wrap: wrap; margin: 20px 0; padding-bottom: 20px; border-bottom: 1px solid #334155;}
.solution_B .item > div { padding: 8px 13px; border: 1px solid #334155; border-radius: 6px; color: #fff; background-color: #1e293b; font-size: 14px; margin: 0 10px 10px 0; transition: all 0.25s ease 0s;}
.solution_B .item > div:hover { border: 1px solid #b91c1c;}
.solution_B .text_2 { text-align: center; color: #94a3b8; font-size: 14px;}
.solution_B .sol_btn { margin-top: 10px;}
.solution_B .sol_btn a { background: #b91c1c; display: block; color: #fff; text-align: center; padding: 10px; border-radius: 5px; font-weight: 400; transition: all 0.25s ease 0s;}
.solution_B .sol_btn a:hover { background: #dc2626;}
.solution_C { margin: calc(20px + 6%) 0 calc(20px + 5%) 0; font-family: "Noto Sans TC", sans-serif;}
.solution_C .tit_a { position: relative; font-size: 225%; color: #010c3f; font-weight: 600; letter-spacing: 1px; line-height: 1.1; padding-bottom: 35px; margin: 0 0 calc(20px + 1%) 0; text-align: center; font-family: 'Oswald', sans-serif;}
.solution_C .tit_a::after { content: ''; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); height: 4px; width: 80px; background: #b91c1c;}
.solution_C .service { display: flex; flex-flow: wrap; justify-content: space-between;}
.solution_C .service > div { width: calc(25% - 15px); border: 1px solid rgba(148, 163, 184, 0.3); padding: 20px; border-radius: 10px;}
.solution_C .tit_a::after { left: 50%; transform: translateX(-50%);}
.solution_C .tit { font-size: 18px; color: #010c3f; font-weight: 500; margin: 15px 0; font-family: 'Oswald', sans-serif;}
.solution_C .sma { font-size: 14px; color: #64748b; font-weight: 350;}
.solution_D { margin: 0 0 calc(20px + 5%) 0;}
.solution_D .tit_a { position: relative; font-size: 225%; color: #010c3f; font-weight: 500; letter-spacing: 1px; line-height: 1.1; padding-bottom: 35px; margin: 0 0 calc(20px + 1%) 0; text-align: center; font-family: 'Oswald', sans-serif;}
.solution_D .tit_a::after { content: ''; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); height: 4px; width: 80px; background: #b91c1c;}
.solution_D .contact_in { display: flex; flex-flow: wrap; margin: auto; max-width: 830px; background: #f3f6f9; padding: 40px; border: 1px solid rgba(148, 163, 184, 0.4); border-radius: 20px;}
.solution_D .contact_in > div { display: flex; flex-flow: wrap; width: 100%; margin-bottom: 25px;}
.solution_D .contact_in > div > div:nth-child(1) { width: 100%; font-weight: 500; font-size: 18px; margin-bottom: 5px; color: #010c3f;}
.solution_D .contact_in > div > div:nth-child(2) { width: 100%;}
.solution_D .contact_in .w_50 { width: 48%; margin: 0 4% 25px 0;}
.solution_D .contact_in .w_50:nth-of-type(2n+2) { margin-right: 0;}
.solution_D .contact_in span { position: relative; color: #010c3f;}
.solution_D .must { padding: 0 0 0 10px;}
.solution_D .must::after { content: "*"; color: #ed6d34; font-size: 1.25rem; font-weight: 700; padding-right: 3px; position: absolute; left: 0px; top: -5px;}
.solution_D .contact_in input, .solution_D .contact_in option, .solution_D .contact_in select, .solution_D .contact_in textarea { font-size: 16px; background: #fff; border: 1px solid #c3d7e4; border-radius:5px;}
.solution_D .contact_in select, .solution_D .contact_in input, .solution_D .contact_in option, .solution_D .contact_in textarea, .solution_D .contact_in input[type=radio] + label, .solution_D .contact_in input[type=checkbox] + label { font-size: 1rem; box-sizing: border-box; outline: none; transition: all 0.25s ease 0s;}
.solution_D .contact_in input { padding: 10px; width: 100%; height: 42px;}
.solution_D .contact_in input::placeholder, .solution_D .contact_in textarea::placeholder,.solution_D .contact_in textarea { color:#CBCCD2; font-size: 14px; font-weight: 500;}
.solution_D .contact_in select { padding: 0 0 0 5px;  width: 100%; height: 42px; line-height: 40px;font-weight:400; color:#CBCCD2;}
.solution_D .contact_in select:focus option {color: #666;}
.solution_D .contact_in option { padding: 5px 10px;}
.solution_D .contact_in textarea { width: 100%;min-height: 42px; padding: 10px;}
.solution_D .contact_in input:focus, .solution_D .contact_in textarea:focus {background: #e6f1f8;color: #000;}
.solution_D .contact_in input:focus::placeholder, .solution_D .contact_in textarea:focus::placeholder {  color: #000;}
.solution_D .contact_in .con_btn { justify-content: center; margin-top: 10px; margin-bottom: 10px;}
.solution_D .contact_in .con_btn > div { width: auto!important;}
.solution_D .contact_in .con_btn .send { padding: 15px; line-height: 1.3; min-width: 205px;  border: none;background: #b91c1c;color: #fff;border-radius: 30px;font-weight: 500; transition: all 0.25s ease 0s;}
.solution_D .contact_in .con_btn .send:hover { background: #dc2626;}

 @media (max-width:1112px) {
 .solution_A .tit_a { max-width: 100%;}
 .solution_A .mr_btm { margin-bottom: 15px;}
 .solution_A > div:nth-child(1) { width: 100%;}
 .solution_A > div:nth-child(2) { width: 100%; max-width: 647px; margin: 30px 30px 30px 0;}
 .solution_A .text { left: auto; right: -30px;}
 .solution_A .category { max-width: 580px;}
 .solution_D { margin: calc(20px + 5%) 0;}
 }
 
 @media (max-width:992px) {
 .solution_B { padding: calc(20px + 2%) 0 calc(20px + 4%) 0;}
 .solution_B > div:nth-child(1) { width: 100%; padding-right: 0; margin-bottom: 20px;}
 .solution_B > div:nth-child(2) { width: 100%;}
 .solution_B .sol_btn { margin-top: 15px;}
 .solution_D .contact_in { padding: 30px; max-width: 100%;}
 .solution_D .contact_in > div { margin-bottom: 20px;}
 .solution_D .contact_in .w_50 { margin: 0 4% 20px 0;}
 }
 
 @media (max-width:767.98px) {
 .solution_A .tit_a { font-size: 187.5%; padding-bottom: 25px;}
 .solution_A .tit_a::after { bottom: 5px; width: 60px;}
 .solution_A .text { width: 55%;}
 .solution_B .tit_b { font-size: 187.5%;}
 .solution_B .text { font-size: 16px;}
 .solution_C { margin: calc(20px + 6%) 0 calc(20px + 3%) 0;}
 .solution_C .tit_a { font-size: 187.5%; padding-bottom: 25px;}
 .solution_C .tit_a::after { bottom: 5px; width: 60px;}
 .solution_C .service > div { width: calc(50% - 10px); margin-bottom: 20px;}
 .solution_D { margin: calc(20px + 3%) 0 calc(20px + 5%) 0;}
 .solution_D .tit_a { font-size: 187.5%;}
 .solution_D .tit_a::after { width: 60px;}
 .solution_D .contact_in .con_btn .send { min-width: 170px;}
 }

 @media (max-width:576px) {
 .solution_A .tit_a { font-size: 162.5%;}
 .solution_A .mr_btm { font-size: 14px;}
 .solution_B > div:nth-child(2) { padding: 25px;}
 .solution_B .item { padding-bottom: 15px;}
 .solution_B .tit_b { font-size: 162.5%;}
 .solution_B .text { font-size: 14px;}
 .solution_B .check_on { font-size: 14px;}
 .solution_B .sol_btn a { font-size: 14px;}
 .solution_C .tit_a { font-size: 162.5%;}
 .solution_D .tit_a { font-size: 162.5%;}
 .solution_D .contact_in .w_50 { width: 100%; margin: 0 0 15px 0;}
 .solution_D .contact_in .con_btn .send { min-width: 130px; padding: 10px 15px;}

 }

 @media (max-width:430px) {
 .solution_A .category > div { width: 100%;}
 .solution_A .category > div .txt { padding: 0 0 0 15px;}
 .solution_B .item { padding-bottom: 10px;}
 .solution_B .item > div { padding: 6px 9px; font-size: 13px;}
 .solution_C .service > div { width: 100%; margin-bottom: 20px;}
 .solution_D .contact_in { padding: 20px;}
 .solution_D .contact_in > div > div:nth-child(1) { font-size: 16px;}
 .solution_D .contact_in .con_btn .send { min-width: 100px; padding: 8px 10px;}
 }