@charset "utf-8";

/* CSS Document */
body{font-family:'Lato','微軟正黑體',sans-serif;font-size:16px;line-height:1.5;color:#333}
a{color:#000;text-decoration:none;display: block;}
a:hover{color:#777;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
*{ backface-visibility: hidden; -wetkit-backface-visibility: hidden;}
/*---------------------- 基礎設定 ----------------------*/
/*反白設定
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
*/
.alert_line{border-color: #d40023;}
.red{color: #d40023;}
/* 回頂端 */
#goTop{/* border:1px solid #CCC; */color: #fff;background: #04689a;text-align:center;position:fixed;bottom: 50px;right: 0;width:50px;height: 150px;line-height:50px;cursor:pointer;display:none;writing-mode: vertical-rl;letter-spacing: 3px;font-size: 1.1rem;font-weight: 700;transition: all .3s ease-out;}
#goTop:hover{background: #053852;color:#FFF;}

/*按鈕*/
.btnWrap { margin:2em 0; text-align:center; }
@media screen and (max-width: 640px) {
#goTop{right:0;bottom: 2rem;border-radius:0;border:0;}
}

/*RWD編輯器表格(X捲軸)*/
.table-container table td{min-width:100px;padding:5px;border:1px solid #ccc;white-space:inherit}
@media screen and (max-width: 768px) {
.table-container{width:100%;overflow-y:auto;_overflow:auto;margin:0 0 1em}
}

/*---------------------- 頁面開始 ----------------------*/

/*全頁佈局*/
.wrapper { padding:2rem 0; }
.ix-zone{/* margin-top:100px; */position: relative;margin-bottom: 0px;}
.ix-business{margin-bottom:150px}
/*header*/
header .navbar{padding: 2rem 4rem;background: none;align-items: center;}
header .navbar::before{content:"";position:absolute;width:100%;height:5px;top: 0;left: 0;background: linear-gradient(
90deg,#006699,#8fbcd3);}
h1{width: 100%;max-width: 200px;top: 0;left: 0;transition: all .3s linear;margin: 0;}
.navbar--page h1,.navbar--fixed h1{position: relative;max-width: 300px;padding: 0;}

.navbar--page h1 a,.navbar--fixed h1 a{display:block}
header .navbar.navbar--page,header .navbar.navbar--fixed{padding: 1rem 10rem;background: #fff;padding-top: 21px;}
.navbar.navbar--page .nav-item a.nav-link,.navbar.navbar--fixed .nav-item a.nav-link{color:#333;text-shadow:none}
.navbar.navbar--page .nav-item:after,.navbar.navbar--fixed .nav-item:after{background:#333}
.nav-item{font-size: 1.1rem;font-weight: 600;}
.nav-item{position:relative}
.navbar .nav-item a.nav-link{padding-right: 1.5rem;padding-left: 1.5rem;color: #fff;text-shadow: 2px 2px 2px #333;}
.nav-item:after{content:"";width: 2px;height:15px;background: #fff;position: absolute;right: 0;top: 50%;transform: translate(0, -50%);}
.nav-item:last-child:after{display:none}
.navbar--fixed{box-shadow:2px 2px 10px #999}
.logo-s{display: none;}
.navbar--page .logo-s{display: inline-block;}
.navbar.navbar--fixed .logo-s{display: inline-block;}
.navbar.navbar--fixed .logo-l{display: none;}
.navbar--page .logo-l{display: none;}
/*header-button*/
.navbar-toggler{position:relative;width: 55px;height: 55px;}
header .line{width: 40px;height: 3px;background-color: #333;display: block;position: absolute;top: 14px;border-radius: 10px;left: 50%;transform: translate(-50%, 0);transition: all .3s linear;}
header .collapsed .line02{top: 28px;width: 40px;transform: translate(-50%, 0);}
header .line02{width:0;transform: translate(-50%, 11px);}
header .collapsed .line03{top: 42px;transform: translate(-50%, 0) rotate(0deg);}
header .line01{transform: translate(-50%, 11px) rotate(-45deg);}
header .collapsed .line01{transform: translate(-50%, 0) rotate(0deg);}
header .line03{transform: translate(-50%, 11px) rotate(45deg);}
/*ix-banner*/
.ix-banner{position:relative;}
.ix-banner .slick-dots{bottom:1rem}
.ix-banner .slick-dots li{width: 40px;}
.ix-banner .slick-dots li button{width: 40px;background: #eeeeee61;border-radius: 50px;height: 10px;}
.ix-banner .slick-dots li.slick-active  button{background: #eee;}
.ix-banner .slick-dots li button:before{content: "";}
.ix-banner-item{position: relative;}
.ix-banner-title{position:absolute;z-index: 1;max-width: 900px;padding: 2rem 6rem;font-size: 1.75rem;color: #fff;left: 0;top: 40%;width: 100%;text-align: right;transition: all 1s linear;text-shadow: 2px 2px 13px #000000;}
.ix-banner-title h2{line-height:1.5;font-size: 1.2rem;font-weight: bold;letter-spacing: 3px;}
.ix-banner-title .text{transform: translateY(-4rem);transition: all 1s linear;opacity: 0;font-size: 4.2rem;}
.slick-active  .ix-banner-title .text{transform: translateY(0);opacity:1;font-family: 'Outfit', sans-serif;}
.ix-banner .slick-dotted.slick-slider{margin-bottom:0}

/*footer*/
footer{background: #194e83;color:#fff;padding:20px;text-align:center;font-weight: 600;}
footer ul{padding-left:0;list-style:none;margin:2rem 0}
footer ul li{display:inline-block;padding:0 20px}
footer a{color: rgba(255,255,255,.75);}
footer a:hover{color:rgba(255,255,255,1); text-decoration:none;}
.footer-infoBox .logo{width: 300px;margin: 0 auto;}
.footer-infoBox .info{margin:2rem auto}

/*sidebar*/
.sidebar .titleZone{padding: 1rem;color: #069;border-bottom: 2px solid;text-align: center;margin: 1rem 0 0 0;cursor: pointer;}
.sidebar .titleZone h2{margin-bottom:0;font-size: 1.5rem;letter-spacing: 3px;font-weight: 700;}
.sidebar{max-width: 300px;float: left;width: 100%;position: sticky;top: 150px;background: #fff;}
.sidebar ul{list-style:none;padding:0;}
.sidebar ul li{font-size: 1.2rem;font-weight: 600;position: relative;border-bottom: 1px solid #eee;opacity:.7}
.sidebar ul li:before{content:"";position:absolute;width: 5px;height: 20px;background: #069;left: 0;top: 50%;transform: translateY(-50%);}
.sidebar ul li.active{opacity:1;box-shadow:2px 2px 5px #eee}
.sidebar ul li a{display:block;padding:1rem}

/*index*/
.ix-title{/* text-align: center; */margin-bottom: 2rem;position:relative}
.ix-business .ix-title{padding-bottom:1rem}
.ix-business .ix-title:after{content:"";position:absolute;bottom: 0;left:0;width: 60px;height: 5px;background: #069;border-radius: 20px;}
.ix-title p{/* -webkit-text-stroke-width: 1px; *//* -webkit-text-stroke-color: rgb(0 0 0 / 19%); *//* color: transparent; */font-size: 40px;text-transform:uppercase;margin: 0;/* margin-bottom: -20px; */-webkit-text-stroke: 0.75px #006699;color: rgb(1 102 153 / 48%);opacity: .3;font-weight: 800;font-family: 'Outfit', sans-serif;}
.ix-title h3{color: #006699;font-weight: 600;}

/*ix-about*/
.ix-about .content{display: flex;/* box-shadow: 2px 2px 5px #eee; */align-items: center;}
.ix-about .content .textBox{width: 60%;padding: 2rem;/* background: #eee; */padding-left: 5rem;}
.ix-about .content .imgBox{width: 50%;position:relative}
.ix-about .content .imgBox:before{content:"";position:absolute;width:100%;height:100%;background: #045b872e;z-index:-1;transform: translate(-20px, 20px);}
.ix-about .content .imgBox img{box-shadow: -5px 5px 5px #89898926;}
.btn-sytle{margin-top:3rem;position: relative;}
.btn-sytle a{display: block;padding: .5rem 1rem;width: fit-content;color: #fff;border-radius: 50px;transition: all .3s linear;font-size: 1rem;font-weight: 700;letter-spacing: 3px;background-image: linear-gradient( 90deg,#006699,#4487a9,#006699);background-size: 150%;background-position: right;}
.btn-sytle a:hover{background-position:left}
.ix-about .btn-sytle:before{position:absolute;content:"";width: calc(100% - 200px);height: 1px;background: #04689a;top: 50%;right: 0;}
.ix-about .content .textBox h4{font-size: 1.5rem;position: relative;color: #333;font-weight: 600;padding-left: 2rem;}
.ix-about .content .textBox h4:before{content:"";position:absolute;width: calc(100% - 200px);height: 1px;background: #b73f40;right: 0;top: 50%;}
.ix-about ul{padding: 0;list-style: none;display: flex;font-size: 1.25rem;}
.ix-about .item{margin: 1rem 0;}
.ix-about-list{margin:2rem 0}
.ix-about-list li{width: 33%;font-weight: 700;padding: 1rem;margin: 1rem;position: relative;}
.ix-about .ix-about-list img{position:absolute;bottom: 0;right: 0;z-index: -1;max-width: 80px;}
.ix-about-step li{width: calc(25% - 2rem);padding: 1rem;font-weight: 600;/* box-shadow: 2px 2px 5px #eee; */margin: 1rem;text-align: center;}
.ix-about-step li{position: relative;display: flex;flex-direction: column-reverse;font-size: 1.25rem;letter-spacing: 2px;}
.ix-about-step .arrow{position: absolute;right: 0;top: 50%;transform: translate(1.5rem, -50%);animation-name: arrow;animation-iteration-count: infinite;animation-duration: 2s;animation-timing-function: ease-out;}
@keyframes arrow {
    0%{
        transform: translate(1.5rem, -50%);
    }
    50%{
        transform: translate(2rem, -50%);
    }
    100%{
        transform: translate(1.5rem, -50%);
    }
}
.step{position: relative;border-radius: 50%;width: 60px;height: 60px;border: 5px solid #b73f40;display: flex;justify-content: center;align-items: center;font-size: 1.1rem;line-height: 1;font-family: 'Varela Round', sans-serif;}
.step span{position: absolute;top: 0;left: 50%;transform: translate(-50%,-30%);background: #fff;padding: 0 3px;}
.step .num{margin-bottom: 0;line-height: 1;font-size: 2rem;}
.ix-about .item .title{display: flex;align-items: center;}
.ix-about ul img{max-width: 60px;margin: 1rem auto;}
.ix-about ul span{background: #069;color: #fff;border-radius: 20px;}

.ixBlock--about .ixBlock__bg{right: 0;border-radius: 4rem 0 0 8rem;transform: skewX(-20deg) translateX(20%);}
.ixBlock__bg{position: absolute;z-index: -1;top: 0;bottom: 0;width: 55%;transform: skewX(-20deg) translateX(-20%);overflow: hidden;border-radius: 0 0 4rem 0;}
.ixBlock__bg::after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background: #006699;background: linear-gradient(to bottom, #0066999e 0%,#99d0eb40 100%);}
.ixBlock__bg .bg{display: block;width: 100%;height: 100%;background-position: center;background-size: cover;transform: skewX(20deg) scale(130%);}

/*ix-營業項目*/
.ix-business-item{margin: 0 .5rem;position: relative;box-shadow: 2px 2px 5px #333;}
.ix-business-item .txt{position: absolute;bottom: 0;left: 0;width: 100%;text-align: center;font-size: 1.1rem;color: #fff;letter-spacing: 3px;font-weight: 500;background: #333333a3;padding: 1rem;}
.ix-business-item .txt p{margin-bottom:0}

/*ix-聯絡我們*/
.ix-contact{padding: 5rem 0;text-align: center;margin-bottom: 0;background: url(../images/index/ix-contact.jpg);letter-spacing: 3px;background-attachment: fixed;background-position: center;background-size: contain;}
.ix-contact h3{color:#fff;font-weight:bold}
.ix-contact .btn-sytle a{margin: 3rem auto 0;}

/*麵包屑*/
.breadcrumb{justify-content: end;background: #e3eef4;}
.breadcrumb li{margin-right:3px;}
/*頁碼*/
.pageNumber{text-align: center;margin: 1rem;margin-left: 300px;}
.pageNumber a{display: inline;padding: .5rem;color: #999;font-weight: 600;font-family: 'Outfit', sans-serif;}
.pageNumber a:hover{color:#333}
.pageNumber a.active{color:#069;border-bottom:3px solid}
/*----------------------- 內頁開始 -----------------------*/
/*banner*/
.page-banner{padding: 2rem;margin-top: 80px;min-height: 300px;position: relative;}
.page-banner .title{position:absolute;bottom: 0;left: 20%;color: #fff;text-shadow: 2px 2px 13px #000000;font-weight: 600;letter-spacing: 3px;}
.page-banner .title h2{font-weight:600;font-size: 3rem;letter-spacing: 5px;position: relative;padding-bottom: .5rem;}
.page-banner .title h2:before{content:"";position:absolute;width: 160px;height: 5px;border-radius: 20px;background: #fff;bottom: 0;left: 0;}
.page-banner .title p{font-size: 1.5rem;font-family: 'Outfit', sans-serif;}
/*about*/
.about-zone{margin: 2rem 0;}
.ab-title h3{font-size: 2.5rem;-webkit-text-stroke: 0.75px #006699;color: rgb(1 102 153 / 48%);opacity: .3;font-weight: 800;font-family: 'Outfit', sans-serif;margin-bottom: 1rem;}
.ab-title .slogan{font-size: 1.75rem;color: #194e83;letter-spacing: 3px;font-weight: 600;position: relative;padding-left: 10px;}
.ab-title .slogan:before{content:"";position: absolute;width: 5px;height: 25px;background: #194e83;left: 0;top: 8px;}
.about-zone .list-title{font-size: 1.25rem;font-weight: 600;}
.about-zone ul{display: flex;list-style: none;flex-wrap: wrap;padding: 0;margin: 2rem 0;}
.about-zone ul li{padding: 0 .5rem;width: calc(100%/4);text-align: center;}
.about-zone ul li img{max-width:90px}
.about-zone ul li p{text-align:center;margin:1rem 0;font-weight: 600;font-size: 1.25rem;letter-spacing: 1px;}
.ab-1 .container,.ab-2 .container{display: flex;align-items: center;}
.ab-1 .txt{width: 50%;padding-right: 2rem;position: relative;}
.ab-1 .imgBox{width: 50%;border-radius: 5px;overflow: hidden;box-shadow: 5px 5px 10px #33333396;}
.abList figcaption{text-align:center;/* margin-top:.5rem; */color: #fff;font-weight:600;/* border: 1px solid #194e83; */background: #194e83;}
.about-zone .abList li img{max-width:100%}
.about-zone .btn-sytle{margin-top: 2rem;position: relative;}
.about-zone .btn-sytle:before{width: calc(100% - 170px);height:1px;background: #194e83;content:"";position:absolute;top: 50%;left: 0;}
.about-zone .btn-sytle a{margin: 0 0 0 auto;}

.ab-2 .txt{width: 50%;padding-left: 2rem;background: #dbe9f05c;padding: 2rem;}
.ab-2 .imgBox{width: 50%;}
.ab-2 .txt .slogan{font-size: 1.75rem;font-weight: 600;color: #194e83;}
.ab-2 .txt p{font-size:1.25rem}
mark{background-color: #194e8329;font-weight: 600;}
/*service*/
.service-zone{margin: 3rem 0;}
.service-title span{font-size: 2.5rem;-webkit-text-stroke: 0.75px #006699;color: rgb(1 102 153 / 48%);opacity: .3;font-weight: 800;font-family: 'Outfit', sans-serif;}
.service-title h3{font-size: 1.75rem;color: #069;font-weight: 600;position: relative;padding-left: 10px;margin-top: .5rem;}
.service-title h3:before{content:"";position:absolute;width: 5px;height: 60px;background: #069;top: 6px;left: 0;}
.service-title p{font-size: 1.1rem;font-weight: 600;}
/*product*/
.product-zone{padding: 100px 0;background: url(../images/product/bg.png) no-repeat;background-size: contain;min-height: 900px;}
.productList{margin-left: 300px;display: flex;flex-wrap: wrap;}
.productItem{width: calc(100%/3 - 2rem);margin:1rem;overflow: hidden;}
.productItem img{border-radius:10px 10px 0 0;transition: all .5s ease-out;}
.productItem:hover img{transform:scale(1.1)}
.productItem h4{background: #e3eef4;margin: 0;padding: .5rem 1rem;font-size: 1.25rem;font-weight: 600;border-radius: 0 0 10px 10px;text-align: center;position: relative;}
.productItem h4:before{content:"";position:absolute;width: 0;height:5px;background: #069;left: 0;top: 0;transition: all .5s ease-out;}
.productItem:hover h4:before{width:100%}
.productItem .imgBox{position: relative;}
.productItem .imgBox i{position:absolute;right: 0;bottom: 0;font-size: 2rem;padding: 1rem;color: #eee;text-shadow: 2px 2px 5px #333;opacity: 0;transition: all .3s ease-out;}
.productItem:hover .imgBox i{opacity:1}
/*彈跳視窗*/
.modal-header h3{margin-bottom: 0;font-weight: 600;color: #069;letter-spacing: 3px;}
.modal-body h4{font-size: 1.25rem;font-weight: 600;margin: 1rem 0;border-left: 5px solid #069;padding-left: 1rem;}
.modal-body img{display: block;margin: 0 auto;}
/*聯絡我們*/
.contact-zone{margin: 100px 0;}
.contact-zone p{font-size: 1.25rem;font-weight: 600;text-align: center;}
.contant_info .main_color{font-size: 30px;letter-spacing: 3px;-webkit-text-stroke: 0.5px #006699;color: rgb(1 102 153 / 82%);opacity: .9;font-weight: 800;font-family: 'Outfit', sans-serif;text-align: center;margin-bottom: .5rem;}
.contant_info ul{padding: 0;list-style: none;}
.contant_info li{padding:.5rem 0;/* font-size: 1.1rem; */}
.contant_info li span,.contant_info li i{font-weight:600;color:#069;padding-bottom: .5rem;letter-spacing: 1px;}
.contant_info li a{margin-left:20px}
.form-group{margin-top: 1rem;}
.form-control:focus{box-shadow:none;border: 2px solid #006699;}
.form-group label{color:#006699;font-weight: 700;margin-bottom: .5rem;letter-spacing: 3px;text-align: center;}
.form-group span{font-size: .75rem;background: #b52840;color: #fff;padding: 1px 5px 1px 9px;border-radius: 20px;}
.contact-info{position:relative;background: #f5f5f5;z-index: -1;padding: 2rem;border-radius: 5px 0 0 5px;border-top: 5px solid #006699;}
.contact-from{box-shadow: 1px 1px 10px #3333337d;padding: 2rem;border-radius: 10px;background: #fff;}
.contact-zone .row{align-items: center;padding: 0 1rem;}
.map_box{border:5px solid #fbfbfb;border-radius:10px}

/*------------RWD開始------------*/
@media screen and (max-width:1366px) {
    /*header*/
    h1{max-width:150px}
    /*ix-banner*/
    .ix-banner-title{top: inherit;bottom: 10px;}
    .ix-banner-title .text{font-size:3.2rem}
    /*ix-about*/
    .ix-about .content .textBox{padding-left:3rem}
    .ix-about-list li{padding:.5rem}
}
@media screen and (max-width:1200px) {
    header .navbar.navbar--page, header .navbar.navbar--fixed{padding: 1rem 2rem;}
}
@media screen and (max-width:1024px) {
    /*header*/
    h1{max-width: 120px;}
    header .navbar{padding: 1rem 2rem;}
    .navbar--page h1, .navbar--fixed h1{max-width: 230px;}
    /*ix-banner*/
    .ix-banner-title{max-width: 600px;bottom: 0;}
    .ix-banner .slick-dots{bottom: 0;}
    .ix-banner-title .text{font-size: 2.5rem;}
    /*ix-about*/
    .ix-about .content .textBox{padding-left: 2rem;}
    .ix-about ul,.ix-about-step li{font-size: 1.1rem;}
    /*page*/
    .page-banner .title{left: 3rem;bottom: 50%;transform: translate(0, 70%);}
    /*about*/
    .about-zone ul li p{font-size:1.1rem}
    .about-zone ul li img{max-width:70px}
    
}
@media screen and (max-width:991px) {
    /*header*/
    header .navbar{background: #fff;}
    .logo-l{display: none;}
    .logo-s{display: block;}
    h1{max-width: 230px;}
    .nav-item{text-align:center}
    .navbar-toggler:focus{box-shadow: none;}
    .navbar .nav-item a.nav-link{color: #069;text-shadow: none;padding: 1rem;text-align: center;position: relative;display: inline-block;}
    .navbar .nav-item a.nav-link:before{content:"";position:absolute;width: 20px;height: 2px;background: #006699;left: 0;top: 50%;transform: translate(-100%, 0);}
    .navbar.navbar--page .nav-item:after, .navbar.navbar--fixed .nav-item:after{display: none;}
    .navbar.navbar--page .nav-item a.nav-link, .navbar.navbar--fixed .nav-item a.nav-link{color: #069;}
    /*ix-banner*/
    .ix-banner{margin-top: 89px;}
    .ix-banner-title{bottom: 10px;}
    /*index*/
    .ix-zone{margin: 50px 0;}
    /*ix-about*/
    .ix-about .content{flex-direction: column;}
    .ix-about .content .imgBox{width: 100%;}
    .ix-about .content .textBox{width: 100%;}
    /*ix-business*/
    .ix-business-item .txt{letter-spacing: 0;padding: .5rem;}
    .ix-contact{background-attachment:inherit;background-size: cover;margin-bottom: 0;}
    /*page*/
    .page-banner .title{left: 20%;}
    /*about*/
    .ab-1 .container{flex-direction: column-reverse;}
    .ab-1 .imgBox{width:100%}
    .ab-1 .txt{width:100%;padding: 0;margin-top: 3rem;}
    .ab-2 .container{flex-direction: column;}
    .ab-2 .imgBox{width: 100%;}
    .ab-2 .txt{width:100%;padding: 1rem;}
    /*products*/
    .sidebar{float: inherit;max-width: inherit;z-index: 10;top: 0;position: relative;}
    .productList{margin: 0;}
    .sidebar ul{
    display: none;
}
    .sidebar ul.active{height:100%}
    .sidebar .titleZone{margin:0}
    .pageNumber{margin: 1rem auto;}
    /*contant*/
    .contant_info{display: flex;justify-content: space-between;}


}
@media screen and (max-width:768px) {
    /*ix-banner*/
    .ix-banner-title{padding: 2rem 3rem;}
    /*page-banner*/
    .page-banner .title h2{font-size: 2.5rem;}
    .page-banner .title{left:3rem}
    .page-banner{min-height:230px}
    /*contant*/
    .contant_info{flex-direction: column;}
    


}
@media screen and (max-width:640px) {
    /*header*/
    header .navbar{padding: 1rem;}
    h1 .navbar-brand{padding:0;margin: 0;}
    /*ix-banner*/
    .ix-banner{margin-top:87px}
    .ix-banner-title{padding: 1rem 1rem 1.5rem 1rem;position: relative;bottom: 0;background: #069;}
    .ix-banner-title .text{font-size: 1.25rem;}
    .ix-banner-title .text p{margin-bottom:.5rem}
    .ix-banner-title h2{font-size: 1.1rem;}
    .ix-banner .slick-dots{bottom:0}
    /*ix-about*/
    .ix-title p{font-size:2rem}
    .ix-about .content .textBox{padding:0;margin-top:2rem}
    .ix-about ul{flex-wrap:wrap}
    .ix-about-list li{padding: 0;width: 100%;}
    .ix-about-step li{width: calc(50% - 1rem);margin: .5rem;}
    .ix-about .ix-about-list img{max-width:50px;margin: 0;}
    .ix-about-step .arrow{display:none}
    .ix-about .btn-sytle:before{width: calc(100% - 150px);}
    .btn-sytle{margin-top:0}
    /*ix-business*/
    .ix-business .ix-title{padding-bottom:.5rem}
    .ix-business .ix-title:after{width:45px}
    header .navbar.navbar--page, header .navbar.navbar--fixed{padding: 1rem;}
    /**/
    .page-banner .title h2{font-size: 2rem;}
    /*about*/
    .about-zone ul li{width: calc(100%/2);}
    .ab-title .slogan{font-size: calc(1.3rem + .6vw);}
    .ab-title h3{font-size: 2rem;}
    .about-zone .list-title{font-size: 1.1rem;}
    .ab-2 .txt .slogan{font-size: 1.5rem;}
    .ab-2 .txt p{font-size:1.1rem;}
    /*service*/
    .service-title span{font-size: 2rem;}
    .service-title h3{font-size: 1.5rem;}
    .service-title h3:before{height: 45px;}
    /*service*/
    .productList{justify-content: center;}
    .productItem {width: calc(100%/2 - 2rem);margin: 1rem;}
    /*contact*/
    .contact-from{padding:.5rem}
    .contact-from .btn-sytle{margin:1rem 0}
    .contact-zone p{font-size: 1.1rem;margin: 1rem 0;}
    .contact-info{padding: 1rem;}
    .contact-zone{margin: 50px 0;}
}
@media screen and (max-width:450px) {
    /*service*/
    .productList{justify-content: center;}
    .productItem {width:100%;margin: 1rem 0;}
}