/* ddn */

:root {
    font-size: 16px;
}

@media (min-width: 1400px) {
    :root {
        font-size: 16px;
    }
}

@media (min-width: 992px) and (max-width: 1399px) {
    :root {
        font-size: 15px;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    :root {
        font-size: 13px;
    }
}

@media (max-width: 639px) {
    :root {
        font-size: 12px;
    }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{width: 100%;}
body {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    background-color: #f0f8ff;
    color: #fff;
    line-height: 1.3;
    font-weight: 500;
    font-size: 1rem;
}
/*------- Font-Family -------*/
/*Montserrat - iOS兼容优化*/
/* 注意：iOS Safari 对字体加载有严格要求，需要确保：
   1. font-style 必须正确（normal/italic）
   2. font-weight 必须匹配
   3. 字体文件路径正确
   4. 使用 swap 策略确保文本立即显示
*/

  @font-face{
    font-display: swap;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    src: url('/assets/fonts/Montserrat-Medium.woff2') format("woff2"),
         url('/assets/fonts/Montserrat-Medium.woff') format("woff"),
         url('/assets/fonts/Montserrat-Medium.ttf') format('truetype');
  }
  @font-face{
    font-display: swap;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 600;
    src: url('/assets/fonts/Montserrat-SemiBold.woff2') format("woff2"),
         url('/assets/fonts/Montserrat-SemiBold.woff') format("woff"),
         url('/assets/fonts/Montserrat-SemiBold.ttf') format('truetype');
  }
  @font-face{
    font-display: swap;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 700;
    src: url('/assets/fonts/Montserrat-Bold.woff2') format("woff2"),
         url('/assets/fonts/Montserrat-Bold.woff') format("woff"),
         url('/assets/fonts/Montserrat-Bold.ttf') format('truetype');
  }

/* 头部样式 */
header {
    display: flex;
    align-items: center;
    text-align: center;
    position: relative;
    padding:4rem 0 8rem;
    background: #0c131d;
    min-height: 100vh;
    background-image:url(../images/header-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
}
.header-flex{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 5rem;}
.logo {
    background: url(../images/logo.svg) center top no-repeat;
    background-size: 100% auto;
    display: block;
    width:4rem;
    height:4rem;
    margin:0 auto .5rem;
}
.logo-text{
    background: url(../images/logo-text.svg) center top no-repeat;
    background-size: 100% auto;
    display: block;
    width: 15rem;
    height:3.5rem;
    margin:0 auto}
header h1,
header h2{
    font-weight: 700;
    position: relative;
    text-transform: uppercase;
        font-size: 4.2rem;
        line-height: 1.1;
        color: #fff;
        text-shadow: 0 0 2rem rgba(102, 255, 250, 0.15);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
}

header h1 {background-image: linear-gradient(90deg, #87fe97 10%, #09c6ff 90%);}
header h2 {background-image: linear-gradient(90deg, #fff 15%, #d6ffdc, #fff 85%);}
.header p{max-width: 50rem;}
.header-icon{
        position: absolute;
        cursor: pointer;
        width: 2rem;
        bottom: 3rem;
        height: 2rem;
        left: calc(50% - 1rem);
        background:url(../images/head-icon.svg) center no-repeat;
        background-size: auto 100%;
    }
    @keyframes shake-up-down {
        0% { transform: translateY(0); }   /* 初始位置 */
        25% { transform: translateY(-3px); } /* 向上移3px */
        50% { transform: translateY(0); }   /* 回到初始 */
        75% { transform: translateY(3px); } /* 向下移3px */
        100% { transform: translateY(0); }  /* 回到初始 */
      }
  
      /* 按钮样式 + 绑定晃动动画 */
      .header-icon {
        /* 动画绑定（核心） */
        animation: shake-up-down 1.5s ease-in-out infinite; /* 1.5秒/次，顺滑，无限循环 */
        /* 可选：hover时暂停动画，更友好 */
        transition: transform 0.2s ease-in-out;
      }
  
      /* 鼠标悬浮时暂停晃动，轻微放大，强化交互反馈 */
      .header-icon:hover {
        animation-play-state: paused; /* 暂停晃动 */
        transform: scale(1.05); /* 轻微放大 */
      }
/* service */

.container{max-width:1400px;margin: auto;padding-left:3rem;padding-right:3rem;}
.service{
        overflow: hidden;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
    }

.service .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12rem;
    padding-bottom: 12rem;
    gap: 2rem;
}
.service-text {
    width: 55%;
}

.service-graphic {
    flex: 1;
    position: relative;
    max-width: 100%;
}
.service h3 {
    text-transform: uppercase;
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: .5rem;
}
.service h4 {
    font-size: 1.3rem;
    color: #3edfd3;
    margin: 2.5rem 0 1rem;
}
.primary-color{
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.card-img {width: 100%;}
/* internet-tuechnology  */
.internet-tuechnology{
    position: relative;
    background:url(../images/service-2-bg2.jpg) right bottom #0a152c no-repeat;
    background-size: 85% auto;
}
.internet-tuechnology .service h3 {color: #fff;margin-bottom: .5rem;}
.internet-tuechnology .primary-color{
    display: block;
    background-image: linear-gradient(90deg, #7ffb9d, #0381ff);
}
.internet-tuechnology  ul {
    margin-top: 2rem;
    list-style-type: none;
    color: #444;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    grid-auto-rows: 1fr; 
    gap:.8rem;
}
.internet-tuechnology  li{
    width: 100%;
    display: flex;
    align-items:center;
    text-align: left;
    background:linear-gradient(180deg, #0e1f42,#061633);
    color: rgba(255, 255, 255, 0.7);
    border-radius: .6rem;
    padding: 1.5rem;
    line-height: 1.2;
    gap: .8rem;
    border: solid 1px rgba(227, 229, 235, 0.1);
    box-shadow: 0 .8rem 1.5rem rgba(0, 11, 32, 0.5);
}
.internet-tuechnology  li i{width:2.2rem;max-height: 2.2rem;flex: none;}
.internet-tuechnology  li i img{height: 100%;}
/* digital-marketing */
.digital-marketing{background-image:url(../images/digital-marketing-bg.jpg);color: #5b6271;position: relative;}
.digital-marketing h3 {color: #000;margin-bottom: .5rem;}
.digital-marketing .primary-color{background-image: linear-gradient(90deg, #00bdf7, #0067e8);}
.digital-marketing  h4{color: #000;}
.digital-marketing  ul {
    margin-top:3rem;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
.digital-marketing li{
    display: inline-flex;
    align-items: flex-start;
    text-align: left;
    color: #000;
    font-size: 1.1rem;
    line-height: 1.2;
    gap: 1.2rem;
}
.digital-marketing li::before{content:" ";display: block;width: .6rem;height: 1.3rem;background: linear-gradient(0deg, #00bdf7, #0067e8);border-radius: .1rem;}

.digital-marketing .graphic-icon{
    width:75%;
    text-align: center;}
.digital-marketing-icon{position: absolute;}
.digital-marketing-icon1{width: 3.5rem;top: 12%;left: 40%;}
.digital-marketing-icon2{width: 7rem;right: 5%;bottom: 10%;}
.digital-marketing-icon3{width: 13rem;filter: blur(2rem);left: -3rem;bottom: -3rem;}

/* 页脚样式 */
footer {
    text-align: center;
    padding: 4rem 0;
    color: #f1f3f8;
    font-size: .95rem;
    background: #060b15;
}

/* 响应式适配（手机端） */
@media (max-width: 768px) {
    body{font-size: 1rem;}
    header{padding-top: 4rem;}
    .container {padding-left: 2.5rem;padding-right: 2.5rem;}
    .service h3,
    .service h4,
    .service p{text-align: left;}
    .service .container{
        flex-direction: column;
        padding:7rem 2.5rem;
    }
    header h1,header h2,.service h3 {font-size:2.5rem;}
    .logo {width: 3.5rem;height: 3.5rem;}
    .logo-text {width: 11.5rem;}
    .service {flex-direction: column;text-align: center;
    }
    .service-text{width: 100%;}

    .internet-tuechnology li{flex-direction: column;align-items: flex-start}
    .digital-marketing-icon1 {top: 7%;left: 92%;}
    .digital-marketing .graphic-icon{width: 53%;}
    .digital-marketing-icon3 {left: -5rem;bottom: -8rem;}
    .digital-marketing-icon2 {right: -7%;bottom: 1%;}
}