@charset "utf-8";

/************************************** import **************************************/


/* search css */
@import url('../sub-common.css');


/************************************** service **************************************/

.service-tit {text-align: center}
.service-tit h2 {font-weight:300;font-size:3rem;line-height:50px; letter-spacing: -1.7px; ;  color:#160042; font-weight:900}
.service-tit h2 br:first-child {display:none}
.service-tit h2 .gredient-txt {font-weight:900;background: -webkit-linear-gradient(45deg, #37eaff, var(--theme-color) 110%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block;word-break: keep-all; font-size:4.5rem; position:relative; top:2px; -webkit-animation: txt 4s infinite linear;}
.service-tit p.sub {font-size:1.9rem; color:#a5a5a5; padding:25px 0; line-height:22px}

@-webkit-keyframes txt {
    from { -webkit-filter: hue-rotate(0deg); }
    to { -webkit-filter: hue-rotate(-360deg); }
  }


.service-cont .cont-box {background:#f7f8fd; width:calc(33.3% - 10px); margin-right:15px; float:left; text-align: center; padding:35px 20px; border-radius:8px}
.service-cont .cont-box:last-child {margin-right:0}
.service-cont .cont-box .box-tit {font-size:1.7rem; font-weight:700; color:#444; padding-bottom:15px}
.service-cont .cont-box .box-txt {font-size:4rem; font-weight:900;background: -webkit-linear-gradient(45deg, #37eaff, var(--theme-color) 110%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; word-break: keep-all; opacity:0.9}

@media(max-width:1200px) {
  .service-tit p.sub {font-size:1.6rem; padding:40px 0}
}

@media(max-width:1024px) {
  .service-tit h2 {font-size:2.8rem; line-height:42px}
  .service-tit h2 .gredient-txt {font-size:3.5rem}  
  .service-tit p.sub {font-size:1.5rem; padding:20px 0 0}
}

@media(max-width:900px) {
  .service-tit h2 br:first-child {display:block}
}

@media(max-width:768px) {
  .service-tit h2 {font-size:3rem; line-height:42px}
  .service-tit h2 .gredient-txt {font-size:3rem}
  .service-cont .cont-box .box-tit {font-size:1.3rem;padding-bottom:10px;}
  .service-cont .cont-box .box-txt {font-size:2rem}
}

@media(max-width:500px) {
  .service-cont .cont-box {padding:20px 5px; margin-right:5px; width:calc(33.3% - 5px);}
  .service-tit h2 {font-size:2.6rem; line-height:35px}
  .service-tit p.sub { padding:30px 0 0;}
  .service-tit h2 .gredient-txt {font-size:2.5rem}
}


.service-tab { text-align: center; width:100%; margin:50px 0 50px; padding:50px 0; border-top:1px dashed #e5e5e5;}
.service-tab ul {background:#f2f4fd; padding:10px; border-radius: 50px; width: 100%; display: inline-block; }
.service-tab ul > li { display: inline-block; width:calc(33.3% - 10px);margin: 0 5px;}
.service-tab ul > li:last-child {margin-right:0}
.service-tab ul > li > a { display: block; font-size: 1.5rem; padding: 
  20px; border-radius: 50px; color:#9499b3; font-weight:600;  transition: background .15s, color .2s; }
.service-tab ul > li:hover a,
.service-tab ul > li.select > a { background:#fff; color:#280553; box-shadow: 1px 1px 4px rgba(0,0,0,0.1); }


@media(max-width:1200px) {  
  .service-tab {margin:0; padding:45px 0 0;}
}

@media(max-width:820px) {
  .service-tab ul {border-radius:10px}
  .service-tab ul > li {width:100%;display:block; margin:0; margin-bottom:8px}
  .service-tab ul > li:last-child {margin-bottom:0}
  .service-tab ul > li > a {font-size:1.4rem; padding:15px 20px}
}

.service-cont .sub-tit {text-align: center; font-size:2.9rem; color:#160042; font-weight:600; line-height:42px; padding-bottom:100px}
.service-cont .sub-tit span {background: -webkit-linear-gradient(45deg, #37eaff, var(--theme-color) 110%);
  -webkit-background-clip: text;-webkit-text-fill-color: transparent; display: inline-block; word-break: keep-all; display:inline-block;position:relative;}
  .service-cont .sub-tit span:after {content:''; background:-webkit-linear-gradient(45deg, #37eaff, var(--theme-color) 110%); width:100%; height:2px; position:absolute; bottom:-2px; left:0;}
.service-cont .box-wrap {margin-bottom:100px;  padding-bottom:100px; border-bottom:1px dashed #e5e5e5;}
.service-cont .box-wrap:last-child {border-bottom:0}
.service-cont .box-wrap .left-box {float:left; width:500px; margin-right:50px}
.service-cont .box-wrap .left-box img {max-width:100%; width:100%}
.service-cont .box-wrap .right-box {float:right; width:calc(100% - 550px); font-size:1.7rem; line-height:29px; color:#6b7194; padding-top:30px}
.service-cont .box-wrap .right-box .big {font-size:2.1rem; padding-bottom:25px; line-height:33px}
.service-cont .box-wrap .right-box b {color:#3a416b}

@media(max-width:1024px) {
  .service-cont .sub-tit {font-size:2.6rem; padding-bottom:60px;}  
  .service-cont .box-wrap {margin-bottom:60px ;padding-bottom:60px;}
  .service-cont .box-wrap .left-box {width:330px; margin-right:30px}
  .service-cont .box-wrap .right-box {width: calc(100% - 360px); padding-top:0;}  
  .service-cont .box-wrap .right-box .big {font-size:1.8rem; line-height:27px;}
}

@media(max-width:768px) {  
  
  .service-cont .sub-tit {font-size:2.3rem; padding-bottom:45px;}  
  .service-cont .box-wrap {margin-bottom:45px ;padding-bottom:45px;}
  .service-cont .box-wrap .right-box,
  .service-cont .box-wrap .left-box {width:100%; float:none;}
  .service-cont .box-wrap .left-box {margin-right:0}
  .service-cont .box-wrap .right-box {text-align: center;font-size:1.5rem; line-height:26px;padding-top:30px}    
  .service-cont .box-wrap .right-box .big {font-size:1.7rem;}
  .service-cont .box-wrap .right-box br {display:none;}
  .tab2 .service-cont .box-wrap .right-box br {display:block}
}

@media(max-width:500px) {
  .service-cont .sub-tit {font-size:2rem; line-height:35px}
  .service-cont .sub-tit span:after {bottom:2px;}
}