@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200;300;400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

@charset "UTF-8";

@font-face {
  font-family: Avenir Light;
  src: url(../font/AvenirLight.ttf);
  font-weight: bold;
}


html,body{
    width: 100%;
    height: 100%;
    font-size: 10px; 
    font-family:Inter,'Noto Sans TC','微軟正黑體', 'Microsoft JhengHei', sans-serif;
    -webkit-text-size-adjust: 100%;color: #383838;
        letter-spacing: .1em;
        line-height: 1.25em;
}

@media (max-width: 1919px){
    html,body{
        font-size: 0.5208vw;
    }
}
@media (max-width: 767px){
    html,body{
        font-size: 10px;
    }   
}

@media (max-width: 750px){
    html,body{
        font-size: 1.3333vw;
    }   
}


a {
    -webkit-transition: .3s all ease;
    transition: .3s all ease;
}
img{max-width: 100%;height: auto;display: block;}
.ff-sans{
    font-family:'Noto Sans TC','微軟正黑體', 'Microsoft JhengHei', sans-serif;
}
.font2{font-size: 1.25rem;}
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.btn.btn-black {
    background: #000 !important;
    color: #fff;
}
.btn.btn-black:hover {
    background: #333333 !important;
}
.btn.btn-white{
    background: #fff !important;
}
.btn.btn-white:hover {
    background: #f8f8f8 !important;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn {
    position: relative;
    top: 0;
    border-radius: 0px;
}
.container{
    position: relative;
    width: 100%;
    max-width: 155rem;
    margin: 0 auto;
    padding: 0px;
    /*height: 100vh;*/
}
.row{
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.wrap {
    width: 100%;
    height: auto;
}
.t-a-c{
    text-align: center;
}

.mt{
    margin-top: 40px;
}
.d-flex{
    display: flex;
}
header{
    position: fixed;
    z-index: 999;
    top: 0;left: 0;
    width: 100%;
    height: 10rem;
    background:#F0F0EC;
    -webkit-transition: .4s all ease;
    transition: .4s all ease;
}
.header-h{height: 10rem;}
header .container{
    max-width: 1680px;
    width: calc(100% - 40px);
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    /*padding: 0 75px;*/
}
.logo{
    position: relative;
    height: 3.7rem;
    width: 46.6rem;
    /*padding:5% 0;*/
    background: url(../images/logo.svg) center center no-repeat;
    background-size: contain;
    z-index: 1;
    /*background-size: cover;*/
}

.logo a{width: 100%;height: 100%;position: relative;display: block;}
.logo img{height: 100%;width: auto;}

/*header nav a {font-size: 2.4rem;border-left: 1px solid #000;padding: 0 1em;line-height: 1em;position: relative;text-align: center;}*/
/*header nav a:last-child{border-right: 1px solid #000;}*/
/*header nav a:hover,header nav a.active{
    color: #5AB3A9;
}*/
.header-row{display: flex;align-items: center;}

header .marquee{
    position: relative;
    font-size: 2rem;
    margin-left: 10rem;
    justify-content: center;align-self: center;
    border-radius: 2rem;
    padding: 1.25em 2.5em 1.25em 1.25em;
    border:1px solid #fff;
}
header .marquee-close{
    width: 3rem;
    height: 3rem;
    position: absolute;
    right: -.5rem;
    top: -.5rem;
    cursor: pointer;
}
/*header nav{display: none;}*/
header::after{
    content: "";
    width: 100%;
    height: 100vh;
    -webkit-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}
header.open::after{
    /*opacity: 1;*/
    /*visibility: visible;*/
}
.nav-btn {
    width: 36px;
    height: 90px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    margin-right: 0px;
    position: relative;
    top: 0px;
    right: 15px;
    z-index: 99;
}

.nav-btn span {
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    background: #000;
    top: calc(50% - 2px);
    border-radius: 0px;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease
}

header .nav-btn{height: 100%;}
header .nav-btn span{background:#383838; }
.nav-btn.open span{background: #fff;}
.nav-btn span:nth-child(1) {
    -webkit-transform: scale(1, 1) translate(0, -6px) rotate(0);
    transform: scale(1, 1) translate(0, -6px) rotate(0)
}

.nav-btn span:nth-child(2) {
    -webkit-transform: scale(1, 1) translate(0, 6px) rotate(0);
    transform: scale(1, 1) translate(0, 6px) rotate(0)
}

.nav-btn.open span:nth-child(1) {
    -webkit-transform: scale(1, 1) translate(0, 0) rotate(45deg);
    transform: scale(1, 1) translate(0, 0) rotate(45deg)
}

/*.nav-btn.open span:nth-child(2) {
    -webkit-transform: scale(0, 1) translate(0, 0) rotate(0);
    transform: scale(0, 1) translate(0, 0) rotate(0)
}
*/
.nav-btn.open span:nth-child(2) {
    -webkit-transform: scale(1, 1) translate(0, 0) rotate(-45deg);
    transform: scale(1, 1) translate(0, 0) rotate(-45deg)
}
nav a.active{
    pointer-events: none;
}
nav{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em 0;
    font-size: 1.25rem;
    position: relative;
    z-index: 1;
    width: 100%;
}
.nav-box .con{
    width: 69rem;
}
.nav-box{
    display: block;
    width: 45%;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 98;
    padding-top: 20px;
    background: rgba(232, 129, 0, 0.9);
    height: calc(100vh);
    -webkit-transform: translateX(110%);
    transform: translateX(110%);
    -webkit-box-shadow: -10px 0 20px -10px rgb(0 0 0 / 10%);
    box-shadow: -10px 0 20px -10px rgb(0 0 0 / 10%);
    -webkit-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-box.open{
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
}
.nav-box .nav-btn{
    position: absolute;
    top: 0px;
    right: 35px;
}
.nav-box nav{
    flex-direction: column;
    color: #000;
    text-align: left;
    align-items: flex-start;
    padding: 8rem 0;
    border-bottom: 1px solid #fff;
}
.nav-search{width: 48.3rem;border-bottom: 1px solid #fff;display: flex;}
.nav-search a{width: 4.6rem;height: 4.6rem;display: block;margin:1rem;}
.nav-search input{background: transparent;border:none;font-size: 2.5rem;padding-left: .5em;border-left: 1px solid #fff;outline: none;color: #fff;}
.nav-search input::placeholder{
    color: rgb(255,255,255,.6);
}
.nav-footer{
    font-size: 2rem;
    color: #fff;
    line-height: 1.25em;
    display: flex;
    margin-top: 1em;
}
.nav-footer dl{margin-right: 2em;}
.nav-footer dt{margin-bottom: 1em;}
.nav-footer dd{color: #fff;}
nav > a,nav > div{
    padding: 0px;
    /*padding-left: 20px;*/
    font-size: 2.6rem;
    color: #fff;
    text-decoration: none;
    /*text-align: center;*/
    width: 100%;
    line-height: 1em;
    padding: .6em .75em;
    position: relative;
    margin:0.5rem 0;
}
nav > div {
    z-index: 2;
}
nav > div i{width: .5em;position: relative;top: 50%;display: inline-block;vertical-align: middle;}
nav > div i svg{vertical-align: middle;width: 100%;}
/*nav > a::before,nav > a:last-child:after{content: "";height: 1px;width: 2em;position: absolute;top: 0;background: #000;left: 50%;transform: translateX(-50%);}*/
/*nav > a:last-child:after{top: initial;bottom: 0;}*/
nav > div:hover,nav > a:hover{color: #fff;}
nav > div:hover,nav > div.active,nav > a:hover,nav > a.active{
    /*color: #5AB3A9;*/
    background: rgba(74, 33, 0, .4);
}
nav > div:hover,nav > div.active,nav > a:hover,nav > a.active{
    /*color: #5AB3A9;*/
    background: rgba(74, 33, 0, .4);
}
nav > div.level2{cursor: pointer;}
nav > div.level2:hover,nav > div.level2.active{
    background: transparent;
}
nav .group-content{
    width: fit-content;
    position: absolute;left: 7em;
    top: 0;
    height: 0;
    display: none;
    background: rgba(74, 33, 0, .39)
}
nav > div:hover .group-content{
    height: auto;
    display: block;
}
nav > div .group-content a{
     font-size: 2.2rem;
     text-decoration: none;
    color: #fff;
    line-height: 1em;
    padding: .6em .75em;
    position: relative;
    display: block;
    margin:0.5rem 0;
}
nav > div .group-content li{position: relative;}
nav > div .group-content a i{margin-left: .5em;}
.group-content a:hover{
     background: rgba(74, 33, 0, .4);
}
nav > div .level3 .group-content-level3{
    position: absolute;top: 0;
    display: none;
    right: 0;
    transform: translateX(100%);
    background: rgba(74, 33, 0, .39);
    border-left:1px solid #E88100;
}
nav > div .level3:hover .group-content-level3{
    display: block;
    height: auto;
}
nav > div .group-content .group-content-level3 a{
    font-size: 2rem;
}
.group-content-level3 {
    white-space: nowrap; /* HIGHLIGHT: Prevent text from wrapping */
    overflow: hidden; /* Optional: Hide any overflow */
    text-overflow: ellipsis; /* Optional: Add ellipsis (...) if the text is too long */
  }
  
  .group-content-level3 a {
    display: inline-block; /* Ensure the link container is treated as an inline block */
    margin-right: 10px; /* Optional: Add spacing between links */
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Use inherited color for links */
  }
  
footer{
    background: #E88100;
    /*height: 16rem;*/
    padding: 30px 0;
    color: #fff;
    font-family: "myriad-variable",'Noto Sans TC', sans-serif;
    font-variation-settings: "wdth" 90, "wght" 300;
    
}
footer p{
    font-size: 16px;
    line-height: 1.5em;
}
footer .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
footer .footer-social{
    display: flex;
}
footer .footer-social a{
    width: 36px;
    margin:0 5px;
}
footer p{font-weight: 300;}


.footer-social a img {
    width: 40px;
    margin: 0 8px;
    transition: transform 0.3s ease; /* 平滑過渡 */
}

/* hover 浮起效果 */
.footer-social a img:hover {
    transform: translateY(-10px); /* hover 往上移 */
}



.fixed-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.6);
    border-radius: 50%;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    z-index: 9999;
    padding: 0;
}

/* 隱藏文字 */
.fixed-btn p {
    display: none;
}

/* icon */
.fixed-btn i {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;  /* icon 在 a 下方，避免蓋掉連結 */
}

.fixed-btn i img {
    width: 36px;
    height: 36px;
}

/* a 覆蓋整個按鈕，確保可點擊 */
.fixed-btn a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3; /* 確保連結在最上層 */
}

/* hover 動畫 */
.fixed-btn:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}


section{
    position: relative;
    /*height: 100vh;*/
    overflow: hidden;
}

h1{
    position: relative;
    font-size: 6.5rem;
    display: inline-block;
    color: #5AB3A9;
    line-height: 1em;
    font-weight: bold;
    padding-bottom: .5em;
    margin-bottom: .5em;;
}
h1::after{
    content: "";
    height: .3rem;
    width: 80%;
    background: #AE7F47;
    position: absolute;
    left: 0;
    bottom: 0;
}
.kv{
    /*background: #f2f2f2;*/
    background-size: cover;
    height: 48.8vw;
    /*min-height: 650px;*/
}

.kv .container{
    height: 100%;
    max-width: 100%;
    /*padding: 180px 75px 80px 75px;*/
    display: flex;
    justify-content: space-between;
    align-items:center;
}

.kv  .swiper-pagination-bullets .swiper-pagination-bullet{
    background: #DCDDDD;
    width: 12px;
    height: 12px;
}
.form{
    background: #E88100;
    color: #fff;
}

/*form*/
.form .container{
    padding: 9rem 0;
    display: flex;justify-content: center;align-items: flex-start;
    font-family: "myriad-variable",'Noto Sans TC', sans-serif;
    border-bottom: 1px solid #fff;
}
.form-main{
    width: 500px;
    margin: 0 40px;
    padding-top: 30px;
    /*margin-right: 9rem;*/
}
.form-main .fb-page{width: 500px;}
.form  .form-content{
    width: 100%;
    max-width: 510px;
    height: 100%;   
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.form  .form-content h3{font-size: 26px;margin-bottom: 1em;}
.form  .form-content p{font-size: 14px;margin-bottom: 1em;font-weight: 300;line-height: 1.5em;}

.form  .form-content ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.form  .form-content li{
    width: 100%;
    /*height: 44px;*/
    /*line-height: 44px;*/
    color: #fff;
    font-size: 22px;
    text-align: center;
    margin: .5em 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.form  .form-content li.send-row{
    display: flex;align-items: flex-end;justify-content: flex-end;
}
.form  .form-content li.xs-6{
    width: 48%;
}
.form  .form-content ul li:first-child,
.form  .form-content ul li:last-child{
    /*border:1px solid #C5E7FF;*/
    /*border-radius: 5px;*/
}

.form  .form-content li input[type="text"],
.form  .form-content li input[type="tel"],
.form  .form-content li input[type="email"],.form  .form-content li select{
    width: 100%;
    height: 100%;
    border:1px solid #fff;
    outline: none;
    padding: 0 1em;
    color: #fff;
    font-size: 18px;
    line-height: 48px;
    height: 48px;
    background: transparent;
    letter-spacing: .25em;
}
.form  .form-content li select{
    width: 100%;
    height: 100%;
    /*max-width: 400px;*/
    background: transparent;
  overflow: hidden;
  overflow: -moz-hidden-unscrollable;
    background: transparent;
  -webkit-appearance: none;
  /*background: url(../images/select_arrow.png) no-repeat right;*/
  background-position: 98% center;
    background-size: 32px auto;
    outline: none;
    border:1px solid  #fff;
    padding: 0 1em;
    /*line-height: 5rem;*/
    height: 48px;
}

.form label{
    display: block;
    position: relative;
    text-align: left;
    font-size: 18px;
    /*margin-bottom: .8em;*/
}
.form-content textarea{
    font-size: 18px;
    line-height: 1.5em;
    height: 7em;
    color: #fff;
    width: 100%;
    padding: .5em 1em;
    position: relative;
    background: transparent;
    border-radius:0px;
    border:1px solid #fff;
    outline: none;

}
.form-bottom{
    text-align: center;
    margin: 0 auto;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
      /*border: 1px solid #fff;*/
       -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
  /*-webkit-text-fill-color: #fff;*/
  /*-webkit-box-shadow: 0 0 0px 1000px #A97F36 inset;*/
  transition: background-color 5000s ease-in-out 0s;
}
.form  .form-content li input[type="checkbox"]{
    width: 18px;
    height: 18px;
    border-radius: 2px;
    border: 1px solid #fff;
    background: transparent;
    outline: none;
}
.form .demand-check{
    color: #fff;
    font-size: 14px;
    text-align: left;
    margin-top: 2em;
}
.form .demand-check span{
    color: #fff;
}
.form  .form-content li.demand-check p:first-child{
    line-height: 1.5em;
}
.form  .form-content li:last-child{
    margin-top: 1em;   
}
::placeholder {
    color: #fff;
  /*color: rgb(255 255 255 / .8);*/
  font-size: 1em;
  letter-spacing: .25em;
}
.form  .form-content li select:invalid { color: gray; }

option[value=""][disabled] {
  display: none;
}
option {
    background-color: #fff;
  color: #E88100;
}
.form-check-inline{
    margin-right: 1em;
}
.form button.send {
    position: relative;
    overflow: hidden;           /* 保證動畫不跑到外面 */
    display: inline-block;
    height: 100%;
    background-color: #E88100;  /* 原本橘色 */
    color: #fff;                /* 原本文字白色 */
    font-size: 2.1rem;
    line-height: 5rem;
    cursor: pointer;
    border: 1px solid #fff;
    padding: 0 1em;
    transition: all 0.4s ease;  /* 平滑過渡 */
    z-index: 1;                 /* 文字在前面 */
}

/* 動畫的填充層 */
.form button.send::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #fff;      /* hover 要變成白底 */
    transition: all 0.2s ease;
    z-index: -1;                 /* 放在文字下面 */
}

/* hover 狀態 */
.form button.send:hover::before {
    width: 100%;                /* 滑鼠經過填滿整個按鈕 */
}

.form button.send:hover {
    color: #E88100;             /* 文字變橘色 */
    transform: scale(1.05);     /* 微放大 */
}
.form button.send:focus{
    outline: none;
}

.form .grass{
    position: absolute;
    right: -20px;
    top: 0;
}

.form .form-content li.demand-check{
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    /*line-height: 70px;*/
}
.demand-check a{
    text-decoration: underline;
    color: #fff;
}


/*form*/

.section-title{
    padding-top: 6rem;
    padding-bottom: 12rem;
    display: flex;
    justify-content: flex-start;align-items: center;
}

.section-title-en{
    position: relative;
    color: #B5B5B6;
    font-family: Inter;
    font-size: 12.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: auto;
    flex-basis: max-content;
    flex-shrink: 0;
    padding-left: .5em;
    letter-spacing: -0.025em;
}
.section-title-en::before{
    content: "";
    position: absolute;
    background: #E88100;
    width: 1.25em;
    height: 1.25em;
    z-index: -1;
    left: 0em;
    top: 50%;
    transform: translate(0em,-50%);

}
.section-title-con{
    padding-left: 2em;
    flex-shrink: 2;
    width: fit-content;
    /*flex-wrap: wrap;*/
}
.section-title h2{
    color: #000;
    font-size: 3.8rem;
    font-weight: 400;
    line-height: normal;
}
.section-title p{
    margin-top: .5em;
    color: #5E5A5A;
font-size: 1.8rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.section-title.even{
    flex-direction: row-reverse;
    
}
.section-title.even .section-title-con{
    padding-left: 0;
    padding-right: 1.5em;
}
.section-title.even .section-title-en{
    padding-left: 0;
    padding-right: .5em;
}
.section-title.even .section-title-en::before{
    left: initial;
    right: 0em;
    top: 50%;
    transform: translate(0em,-50%);
}

.section-title.even h2,.section-title.even p{text-align: right;}

/*page*/
.breadcrumb{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    width: 100%;
    margin-top: 3rem;
    margin-bottom: 2rem;
}
.breadcrumb i{margin:0 5px;}
/*.breadcrumb i::before{content: "➝";display: inline-block;position: relative;vertical-align: middle;}*/
.breadcrumb a{
    color: #000;
}
.breadcrumb a:hover{
    opacity: .5
}

.pages-list{
    display: flex;
    justify-content: center;
    align-self: center;
    padding-bottom: 8rem;
}

.pages-list li{
    position: relative;
    width: 4rem;
    height: 4rem;
    border:1px solid #E88100;
    color: #000;
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
    line-height: 4rem;
    margin:0 5px;
    -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  display: flex;
  justify-content: center;
  align-self: center;
  border-radius: 1rem;

}
.pages-list li .page-prev{
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}
.pages-dots{
    line-height: 40px;
    color:  #E88100;
}
.pages-list li.active,.pages-list li:hover{
    background: #E88100;
    color: #fff;
}
.pages-list li a{color:#E88100;width: 100%;height: 100%;position: relative;display: flex;justify-content: center;align-items: center; }
.pages-list li:hover svg path{fill:#fff;stroke: #fff;}
.pages-list li:hover a{color: #fff;}
.pages-list a{
    display: flex;
  justify-content: center;align-self: center;
}

/*page*/

@media (min-width: 1921px){

}
@media (min-width:1150px ){

}
@media (max-width:1550px ){
   
    /*.container{max-width: 1200px;}*/
    .kv .container{max-width: 100%;}
}

@media (max-width:1440px ){

}
@media (max-width:1366px ){
    .building-content{padding-right: 12rem;}
  
}
@media (max-width:1280px ){
   
}
.mb{display: none;}
@media (max-width: 1024px){
    .pc{display: none;}
    .mb{display: block;}
/*    .logo{
        width: calc(16.7rem * 1.5);
        height: calc(4.7rem * 1.5);
    }*/
    header,.header-h{height: 90px;}
    
    footer p span{display: block;}
    footer p br.mb{display: none;}
    

    .container {
        max-width: 760px;
        width: 90%;
    }
    .kv .container{width: 100%;max-width: 100%;}

    .form{background-size: 100% 100%;}
    .form > .con{
        flex-direction: column;
        width: 80%;
        /*max-width: 70rem;*/
    }
    .form .con > div{width: 100%;margin:0 auto;}
    /*footer{display: none;}*/
    .nav-list{position: fixed;bottom: 0;
        z-index: 99;justify-content: space-between;width:100% }
    .nav-list li{margin:0;width: 33.125vw;height: 11.09375vw;line-height: 11.09375vw;}
    .nav-list li p{font-size: 4.428125vw;margin-left: .25em;}
    .nav-list li i{width: 7.5vw;height: 7.5vw;}
    .form-line{width: 100%;margin:5vw 0;}
    .form-line img{width: 100%;}
    /*.form{padding-bottom: 15vw;}*/
     .breadcrumb{font-size: 18px;}
}

@media (max-width: 767px){
    header,.header-h,.nav-box .nav-btn{
        height: 12rem;
    }
    .logo {
        width: calc(16.7rem * 1);
        height: calc(4.7rem * 1);
    }
    header .container{padding: 0 24px;}
   /* .kv{
        height: 163vw;
    }*/
    .kv .swiper-slide img{
        position: relative;
        height: 100%; width: auto;
        max-width: initial;
        left: 50%;
        transform: translateX(-50%);
    }

    

    .building-content{
        padding:4.5rem;
        padding-bottom: 0;
    }
    h1{font-size: 5rem;}
    .building-content p,.intro-content p{font-size: 3rem;}
    .building-content span,.intro-content span{font-size: 2.4rem;}

    .intro{
        height: 80vw;
        display: flex;
        align-items: center;
        padding: 0 4rem;
    }
    .intro-content{
        margin-left: 0rem;
        margin-top: 0;
    }
    .intro-content p{margin-bottom: 0;}
    .achievement{
        padding: 4.5rem;
    }
    .achievement-item p{font-size: 3.2rem;}
    .achievement-item span{font-size: 2rem;}
    .intro-content p{font-size: 2.8rem;text-shadow: black 0.1em 0.1em 0.2em }

    .release{padding-bottom: 12rem;}
    .release-txt{
        width: calc(100% - 8rem);
    }
    .release-tip{width: calc(37.4rem * .6);height: calc(11.8rem * .6);left: -2rem;font-size: 1.8rem;}
    .fullmap-wrap{height: auto;}
    .fullmap{height: 35vw;}

    .form .container{flex-direction: column;}
    .form-main{width: 100%;margin-right: 0}
    .form-content{
        margin-top: 8rem;
    }
    .form .form-content{
        max-width: 100%;
    }
    .form .form-content li input[type="text"], .form .form-content li input[type="tel"], .form .form-content li input[type="email"], .form .form-content li select{
        line-height: 6rem;
        height: 6rem;
    }
}


@media (max-width: 767px){
    header .container{width: 100%;}
    .logo {
        width: calc(46.6rem * 1);
        height: calc(3.7rem * 1);
    }
    header .marquee{display: none;}
    .nav-box{
        width: 100%;
        overflow-y: scroll;
            align-items: flex-start;
    }
    .nav-box .con{
        width: 100%;
        padding: 0 5rem;
    }
    .nav-search{width: 100%;}
    .nav-search a{width: 6rem;height: 6rem;}
    .nav-search input{font-size: 4rem;}
    nav > a, nav > div{font-size: 4rem;}
    .nav-footer{font-size: 3rem;flex-direction: column;line-height: 1.5em;}
    nav .level2{
        padding:0;
    }
    nav .level2 .group-title{
        padding: 0.6em 0.75em;
    }
    
    nav .level2.active{background: none;}
    nav .level2.active .group-title{
        background: rgba(74, 33, 0, .4);
    }
    nav > div.active .group-content{
        position: relative;
        width: 100%;
        display: block;
        height: auto;
        left: 0;
    }
    nav > div .level3 .group-content-level3{
        position: relative;
        transform: none;
        border:none;
    }
    nav > div .level3 .group-content-level3 a{font-size: 3rem;}
    .nav-footer dl{margin-right: 0;margin-bottom: 3rem;}
    .nav-footer dt{margin-bottom: .5em;}
    .nav-footer dl:first-child br{display: none;}
    nav > div .group-content a{
        font-size: 4rem;
    }
    /*footer*/


    footer{
        line-height: 1.5em;
        padding: 3.5rem 3.5rem;
        height: auto;
    }
    footer .container{flex-direction: column-reverse;}
    footer .footer-social{margin-bottom: 2rem;}
    footer .footer-social a{width: 8rem;}
    footer p{text-align: center;font-size: 16px;}
    .nav-btn{right: 0;}
    footer p br.mb{display: block;}


    .pages-list li{width: 6rem;height: 6rem;font-size: 3.5rem;line-height: 6rem;}
    .pages-dots{line-height: 6rem;}

    .section-title,.section-title.even{    flex-direction: column;    }

    .section-title-en{
        align-self: flex-start;
    }

    .section-title.even h2, .section-title.even p{text-align: left;}
    .section-title-con{
        align-self: flex-end;
        width: 40%;
        padding-right: 1em;
        margin-right: 2%;
    }
    .section-title-en{font-size: 32px;}   
    .section-title.even .section-title-en{padding-left: 0.5em;}
    .section-title.even .section-title-en::before{right: initial;    transform: translate(0em,-50%);left: 0;}
    .section-title-con{width: 100% !important;align-self: flex-start !important;}
    .section-title h2{font-size:28px;margin:.5em 0;}
    .section-title p{font-size: 18px;}

    .breadcrumb{font-size: 16px;flex-wrap: wrap;}
    .form-main{margin:0;padding-top: 0;}
    .form .form-content p{font-size: 16px;line-height: 1.5em;}
}



@media (max-width: 750px){
    
    .form h3{font-size: 8rem;}
    .form .form-logo{width: 75rem;}
    .form > .con{width: calc(100% - 30px);}
    .form .form-content{max-width: 100%;}
    .form button.send{padding: .5em 1em;}
    .form-content textarea,.form label,.form button.send,.form .form-content li input[type="text"], .form .form-content li input[type="tel"], .form .form-content li input[type="email"], .form .form-content li select,.form .form-content li{font-size: 16px;}
    .form .form-content li input[type="text"], .form .form-content li input[type="tel"], .form .form-content li input[type="email"], .form .form-content li select{line-height: 40px;height: 40px;}
    .form .form-content li select{background-size: 6.4rem auto;}
    .form-main .fb-page{width: 100%;}

    .form-main .fb-page > span,.form-main .fb-page iframe{height: 50vh !important;}
}

@media (max-width: 414px){
/*    header,.header-h,.nav-box .nav-btn{
        height: 60px;
    }
    
    footer p{font-size: 8px;}*/
    /*footer{height: auto;padding-top: 40px;padding-bottom: 40px;}*/
   
}

@media (max-width: 320px){
/*    html,body{font-size: 14px;}
    header,.header-h{
        height: 55px;
    }*/
}





/*
 * author:evanliu2968
 * github:https://github.com/EvanLiu2968/el-checkbox
 * lincense:MIT
 */
/*checkbox radio component*/
.el-radio,
.el-checkbox {
  position: relative;
  font-size: 100%;
}
label.el-radio,
label.el-checkbox {
  display: block;
  cursor: pointer;
}
.el-radio > input[type="radio"],
.el-checkbox > input[type="checkbox"],
.el-checkbox > input[type="radio"] {
  display: none;
}
.el-radio > input[type="radio"][disabled],
.el-checkbox > input[type="checkbox"][disabled] {
  cursor: not-allowed;
}
.el-radio > input[type="radio"] + .el-radio-style,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style,
.el-checkbox > input[type="radio"] + .el-checkbox-style {
  position: relative;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  vertical-align: middle;
  cursor: pointer;
}
.el-radio > input[type="radio"] + .el-radio-style:hover:before,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:hover:before,
.el-checkbox > input[type="radio"] + .el-checkbox-style:hover:before {
  border-color: rgb(255,255,255,.6);
}
.el-radio > input[type="radio"] + .el-radio-style:before,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:before,
.el-checkbox > input[type="radio"] + .el-checkbox-style:before {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 1em;
  height: 1em;
  content: '';
  background: transparent;
  border: 1px solid #fff;
}
.el-radio > input[type="radio"] + .el-radio-style:after,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:after,
.el-checkbox > input[type="radio"] + .el-checkbox-style:after {
  position: absolute;
  display: none;
  content: '';
}
.el-radio > input[type="radio"][disabled] + .el-radio-style,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style,
.el-checkbox > input[type="radio"][disabled] + .el-checkbox-style {
  cursor: not-allowed;
  color: #D3DCE6;
}
.el-radio > input[type="radio"][disabled] + .el-radio-style:hover,
.el-radio > input[type="radio"][disabled] + .el-radio-style:before,
.el-radio > input[type="radio"][disabled] + .el-radio-style:after,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:hover,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:before,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:after,
.el-checkbox > input[type="radio"][disabled] + .el-checkbox-style:hover,
.el-checkbox > input[type="radio"][disabled] + .el-checkbox-style:before,
.el-checkbox > input[type="radio"][disabled] + .el-checkbox-style:after {
  cursor: not-allowed;
}
.el-radio > input[type="radio"][disabled] + .el-radio-style:hover:before,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:hover:before,
.el-checkbox > input[type="radio"][disabled] + .el-checkbox-style:hover:before {
  border: 1px solid #D3DCE6;
  animation-name: none;
}
.el-radio > input[type="radio"][disabled] + .el-radio-style:before,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:before,
.el-checkbox > input[type="radio"][disabled] + .el-checkbox-style:before {
  border-color: #D3DCE6;
}
.el-radio > input[type="radio"]:checked + .el-radio-style:before,
.el-checkbox > input[type="checkbox"]:checked + .el-checkbox-style:before,
.el-checkbox > input[type="radio"]:checked + .el-checkbox-style:before {
  animation-name: none;
}
.el-radio > input[type="radio"]:checked + .el-radio-style:after,
.el-checkbox > input[type="checkbox"]:checked + .el-checkbox-style:after,
.el-checkbox > input[type="radio"]:checked + .el-checkbox-style:after {
  display: block;
}
.el-radio > input[type="radio"] + .el-radio-style:before {
  border-radius: 50%;
}
.el-radio > input[type="radio"] + .el-radio-style:after {
  top: 0.4em;
  left: 0.4em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #20a0ff;
}
.el-radio > input[type="radio"]:checked + .el-radio-style:before {
  border: 1px solid #20a0ff;
}
.el-radio > input[type="radio"]:checked[disabled] + .el-radio-style:before {
  border: 1px solid #b0d7f5;
}
.el-radio > input[type="radio"]:checked[disabled] + .el-radio-style:after {
  background: #b0d7f5;
}
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:before,.el-checkbox > input[type="radio"] + .el-checkbox-style:before {
  border-radius: 3px;
}
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:after,.el-checkbox > input[type="radio"] + .el-checkbox-style:after {
  top: 0.1em;
  left: 5px;
  box-sizing: border-box;
  width: 0.4em;
  height: 0.75em;
  transform: rotate(45deg);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.el-checkbox > input[type="checkbox"]:checked + .el-checkbox-style:before,.el-checkbox > input[type="radio"]:checked + .el-checkbox-style:before {
    border: 1px solid #fff;
  background: transparent;
}
.el-checkbox > input[type="checkbox"]:checked[disabled] + .el-checkbox-style:before,.el-checkbox > input[type="radio"]:checked[disabled] + .el-checkbox-style:before {
  border: #b0d7f5;
  background: #b0d7f5;
}
/*blue theme*/
.el-radio.el-radio-blue > input[type="radio"] + label:hover:before,
.el-checkbox.el-checkbox-blue > input[type="checkbox"] + label:hover:before,
.el-radio.el-radio-blue > input[type="radio"]:checked + label:before,
.el-checkbox.el-checkbox-blue > input[type="checkbox"]:checked + label:before {
  border-color: #20a0ff;
}
.el-checkbox.el-checkbox-blue > input[type="checkbox"]:checked + label:before,
.el-radio.el-radio-blue > input[type="radio"] + label:after {
  background: #20a0ff;
}
.el-radio.el-radio-blue > input[type="radio"][disabled] + label:hover:before,
.el-checkbox.el-checkbox-blue > input[type="checkbox"][disabled] + label:hover:before {
  border-color: #D3DCE6;
}
.el-checkbox.el-checkbox-blue > input[type="checkbox"]:checked[disabled] + label:before,
.el-radio.el-radio-blue > input[type="radio"]:checked[disabled] + label:before {
  border-color: #b0d7f5;
}
.el-checkbox.el-checkbox-blue > input[type="checkbox"][disabled]:checked + label:before,
.el-radio.el-radio-blue > input[type="radio"]:checked[disabled] + label:after {
  background: #b0d7f5;
}
/*green theme*/
.el-radio.el-radio-green > input[type="radio"] + label:hover:before,
.el-checkbox.el-checkbox-green > input[type="checkbox"] + label:hover:before,
.el-radio.el-radio-green > input[type="radio"]:checked + label:before,
.el-checkbox.el-checkbox-green > input[type="checkbox"]:checked + label:before {
  border-color: #13ce66;
}
.el-checkbox.el-checkbox-green > input[type="checkbox"]:checked + label:before,
.el-radio.el-radio-green > input[type="radio"] + label:after {
  background: #13ce66;
}
.el-radio.el-radio-green > input[type="radio"][disabled] + label:hover:before,
.el-checkbox.el-checkbox-green > input[type="checkbox"][disabled] + label:hover:before {
  border-color: #D3DCE6;
}
.el-checkbox.el-checkbox-green > input[type="checkbox"]:checked[disabled] + label:before,
.el-radio.el-radio-green > input[type="radio"]:checked[disabled] + label:before {
  border-color: #a1efc4;
}
.el-checkbox.el-checkbox-green > input[type="checkbox"][disabled]:checked + label:before,
.el-radio.el-radio-green > input[type="radio"]:checked[disabled] + label:after {
  background: #a1efc4;
}
/*red theme*/
.el-radio.el-radio-red > input[type="radio"] + label:hover:before,
.el-checkbox.el-checkbox-red > input[type="checkbox"] + label:hover:before,
.el-radio.el-radio-red > input[type="radio"]:checked + label:before,
.el-checkbox.el-checkbox-red > input[type="checkbox"]:checked + label:before {
  border-color: #ff4949;
}
.el-checkbox.el-checkbox-red > input[type="checkbox"]:checked + label:before,
.el-radio.el-radio-red > input[type="radio"] + label:after {
  background: #ff4949;
}
.el-radio.el-radio-red > input[type="radio"][disabled] + label:hover:before,
.el-checkbox.el-checkbox-red > input[type="checkbox"][disabled] + label:hover:before {
  border-color: #D3DCE6;
}
.el-checkbox.el-checkbox-red > input[type="checkbox"]:checked[disabled] + label:before,
.el-radio.el-radio-red > input[type="radio"]:checked[disabled] + label:before {
  border-color: #f9b3b3;
}
.el-checkbox.el-checkbox-red > input[type="checkbox"][disabled]:checked + label:before,
.el-radio.el-radio-red > input[type="radio"]:checked[disabled] + label:after {
  background: #f9b3b3;
}
/*yellow theme*/
.el-radio.el-radio-yellow > input[type="radio"] + label:hover:before,
.el-checkbox.el-checkbox-yellow > input[type="checkbox"] + label:hover:before,
.el-radio.el-radio-yellow > input[type="radio"]:checked + label:before,
.el-checkbox.el-checkbox-yellow > input[type="checkbox"]:checked + label:before {
  border-color: #f7ba2a;
}
.el-checkbox.el-checkbox-yellow > input[type="checkbox"]:checked + label:before,
.el-radio.el-radio-yellow > input[type="radio"] + label:after {
  background: #f7ba2a;
}
.el-radio.el-radio-yellow > input[type="radio"][disabled] + label:hover:before,
.el-checkbox.el-checkbox-yellow > input[type="checkbox"][disabled] + label:hover:before {
  border-color: #D3DCE6;
}
.el-checkbox.el-checkbox-yellow > input[type="checkbox"]:checked[disabled] + label:before,
.el-radio.el-radio-yellow > input[type="radio"]:checked[disabled] + label:before {
  border-color: #fbeac1;
}
.el-checkbox.el-checkbox-yellow > input[type="checkbox"][disabled]:checked + label:before,
.el-radio.el-radio-yellow > input[type="radio"]:checked[disabled] + label:after {
  background: #fbeac1;
}
/*switch component*/
.el-switch,
.el-switch-style,
.el-switch-style:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.el-switch {
  display: inline-block;
  font-size: 100%;
  height: 1.6em;
  position: relative;
}
.el-switch .el-switch-style {
  height: 1.6em;
  left: 0;
  background: #C0CCDA;
  -webkit-border-radius: 0.8em;
  border-radius: 0.8em;
  display: inline-block;
  position: relative;
  top: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  width: 3em;
  cursor: pointer;
}
.el-switch .el-switch-style:before {
  display: block;
  content: '';
  height: 1.4em;
  position: absolute;
  width: 1.4em;
  background-color: #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  left: 0.1em;
  top: 0.1em;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.el-switch > input[type="checkbox"] {
  display: none;
}
.el-switch > input[type="checkbox"][disabled] + .el-switch-style {
  cursor: not-allowed;
  background-color: #D3DCE6;
}
.el-switch > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #20a0ff;
}
.el-switch > input[type="checkbox"]:checked + .el-switch-style:before {
  left: 50%;
}
.el-switch > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #b0d7f5;
}
.el-switch.el-switch-blue > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #20a0ff;
}
.el-switch.el-switch-blue > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #b0d7f5;
}
.el-switch.el-switch-green > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #13ce66;
}
.el-switch.el-switch-green > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #a1efc4;
}
.el-switch.el-switch-red > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #ff4949;
}
.el-switch.el-switch-red > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #f9b3b3;
}
.el-switch.el-switch-yellow > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #f7ba2a;
}
.el-switch.el-switch-yellow > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #fbeac1;
}
/*define size*/
.el-radio.el-radio-sm,
.el-checkbox.el-checkbox-sm,
.el-switch.el-switch-sm {
  /*font-size: 85%;*/
}
.el-radio.el-radio-lg,
.el-checkbox.el-checkbox-lg,
.el-switch.el-switch-lg {
  font-size: 125%;
}