@charset "utf-8";

/* CSS Document */
body{font-family:'微軟正黑體',sans-serif;font-size:16px;line-height:1.5;color:#333;background-color: #fff;padding-top: 72px}
a{color:#000;text-decoration:none;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
a:hover{color:#777;}
.transi{-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
.en{font-family: 'Roboto', sans-serif;}
/*---------------------- 基礎設定 ----------------------*/
/*反白設定
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
*/
.aleart_line{border-color: #d40023;}
.red{color: #d40023;}
.aleart_line{border-bottom: solid 1px #d40023!important;}
.form-group small{display:block;padding:0 1rem}
/* 回頂端 */
#goTop{border: 1px solid #eee;color: #233f5c;background:#FFF;text-align:center;position:fixed;bottom: 0;right: 0;width: 60px;height: 60px;line-height: 60px;cursor:pointer;display:none;z-index: 99;}
#goTop:hover{background: #1ca4de;color:#FFF;}

/*按鈕*/
.btnWrap{margin:2em 0;text-align:center}
.btn-style{position:relative;display:inline-block;padding: .5rem 2rem;border:none;color:#fff;text-align:center;background: #1e3c78;transition:1s;border-radius: 3rem;}
.btn-style .arrow{position:absolute;left:100%;top:50%;margin-left:-1rem;width:2rem;height:1px;background:#000;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
.btn-style .arrow:before{content:'';position:absolute;right:0;bottom:0;width:10px;height:1px;background:#000;-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);-ms-transform-origin:right center;-webkit-transform-origin:right center;-moz-transform-origin:right center;-o-transform-origin:right center;transform-origin:right center}
.btn-style:hover{color:#fff;background: #19a4dd;color:#fff;}
.btn-style:hover .arrow{width:3rem}
.btn-style.bg-orange{background:#f5af19;background:-webkit-linear-gradient(to left,#f12711,#f5af19);background:linear-gradient(to left,#f12711,#f5af19)}
.btn-style.bg-orange .arrow,.btn-style.bg-orange .arrow:before{background:#fed100}
.btn-style.bg-orange:hover{background:#f12711;background:-webkit-linear-gradient(to left,#f5af19,#f12711);background:linear-gradient(to left,#f5af19,#f12711)}
.btn-style2{display: inline-block;border-bottom:solid 1px transparent;letter-spacing: .5rem;padding-left: 0.5rem;padding: .25rem 0 .25rem .5rem;}
.btn-style2:hover{border-color: #000;}
@media screen and (max-width: 640px) {
    #goTop{width:100%;left:0;right:0;bottom:0;border-radius:0;border:0;/* border-top:1px solid #eee; */background: #85a0b0;color: #fff;}
}

/*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}
}
.scrollbar-style::-webkit-scrollbar-track,body::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background-color:#eee}
.scroll02::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px #eee;background-color:#eee}
.scroll02::-webkit-scrollbar{width:4px}
.scrollbar-style::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb,.scroll02::-webkit-scrollbar-thumb,.d_menu_h::-webkit-scrollbar-thumb{background-color:#2b2b2b}
body::-webkit-scrollbar{width:8px}
.d_menu_h{overflow-y:auto;max-height:200px}
.d_menu_h::-webkit-scrollbar,body::-webkit-scrollbar{width:4px;background-color:#eee}

.animation{position: relative;overflow: hidden;}
.animation:before{content:'';position: absolute;z-index: 99;bottom:0;width:100%;left:0;right:0;background-color: #85a0b0;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
.animation_delay_s:before{transition-delay:100ms;}
.animation_delay_m:before{transition-delay:200ms;}
.animation_delay_l:before{transition-delay:300ms;}
.animation.is_animated:before{bottom:100%;top:0;}
/*---------------------- 頁面開始 ----------------------*/

/*全頁佈局*/
.wrapper{padding:2rem 0;min-height: 80vh;}
.banner-p3+.wrapper{padding-top:1rem}
.container{max-width: 1440px}
.container_narrow{max-width: 1110px}
/*nav*/
.navTop{background-color:#1ca4de}
.center_cell{cursor:pointer;position:fixed;top:0;right:0;font-size:15px;z-index:9999;display:flex}
.center_cell>*{padding:1.5rem 1rem;border-left:solid 1px #dedfe0}
.center_cell .btn-mail{display:inline-block;width:70px;text-align:center}
#lan{position:relative;display:inline-block}
#lanDrop{list-style:none;width:100%;padding:.5rem;margin-bottom:0;position:absolute;right:0;top:100%;z-index:10;background-color:#fff;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,.3)}
#lanDrop a{padding:.25rem 1rem;display:block}
.navR{width:calc(100% - 200px)}
.navbar.fixed-top{background-color:#fff;padding:0}
.navbar.change{top:0}
.navbar-expand-xl .navbar-nav .nav-link{position:relative;display:block;padding:1.5rem 1rem;font-weight:600}
.navbar-expand-xl .navbar-nav .nav-link:after{content:'';position:absolute;z-index: 1;left:50%;bottom:0;width:30px;height:0;background:#19a4dd;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear;-ms-transform:translate(-50%,50%);-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%);}
.navbar-expand-xl .navbar-nav .nav-link:hover,.navbar-expand-xl .navbar-nav .nav-link.active{color:#19a4dd}
.navbar-expand-xl .navbar-nav .nav-link:hover:after,.navbar-expand-xl .navbar-nav .nav-link.active:after{height:4px;background: #19a4dd;}
.navbar-brand{display:inline-block;padding:10px 0;margin-right:0;width:400px}
.navbar-brand img{display:inline-block;vertical-align:middle;width:140px}
.navbar-brand .log-text{display:inline-block;vertical-align:middle;margin-left:6px;color:#19a4dd;line-height:1}
.navbar-brand .log-text p{margin-bottom:-3px;font-size:1.25rem;font-weight:600;line-height:1}
.navbar-brand .log-text span{font-size:1rem;line-height:1}
.page-header .navbar-toggler:focus{box-shadow:none}
.dropdown-menu{padding: 0;text-align: center;left: 50%;-ms-transform: translate(-50%,0);-webkit-transform: translate(-50%,0);transform: translate(-50%,0);font-size: 17px;}
.dropdown-item{padding: .75rem 1rem;}
.dropdown-item:focus, .dropdown-item:hover {color: #16181b;background-color: #d6e5f1}

/*banner*/
.banner{position:relative;z-index:0}
.banner:before{position:absolute;content:''}
.banner .item{position: relative;}
.banner .fill{height: 22vw;background-position: center;background-size: cover;}
.banner .slogan{position:absolute;top:51%;transform:translateY(-50%);color:#fff;left:20%;text-shadow: 0 0 1.75rem #111521, 0 0 .5rem #0a3b5c;}
.banner .slogan:after{background-color:#19a4dd;left:-32px;bottom:25px}
.banner .slogan small{letter-spacing: -.25rem;margin-left: .5rem;}
.banner .slogan h1{text-shadow: 0 0 1rem #000, 0 0 1.5rem #123f5d, 0 0 0.5rem #123f5d;font-weight:900;font-size: 2.5rem;margin-bottom:0;letter-spacing:2px;line-height:1.4;}
.banner .slogan p{margin-bottom:0;font-size: 12rem;line-height:1;margin-right: 1.25rem;font-weight:700;}
.banner .active .slogan:before{opacity:1;top:30px}
.banner .active .slogan:after{opacity:1;bottom:30px}

/*首頁*/
.index-main{max-width:1540px;padding:0;margin:1.25rem auto}
.indexPro{display:flex;width:100%}
.indexPro .item{position:relative;display:block;width:100%;margin:.25rem .75rem;display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end}
.indexPro .item .pic{/* opacity:1; *//* background-repeat:no-repeat; *//* background-position:center; *//* background-size:cover */}
.indexPro .item .pic figure{margin-bottom:0;}
.index-main .fitImg{position:relative;display:block;width:100%;padding:.5rem;background-image:url(../images/index/video_bg.jpg);background-position:50% 50%;background-size:auto 100%;background-repeat:no-repeat;text-align:center;-webkit-transition:all 10s ease-out;-moz-transition:all 10s ease-out;-o-transition:all 10s ease-out;-ms-transition:all 10s ease-out;transition:all 10s ease-out}
.index-main .fitImg:after{content:'';position:absolute;left:0;right:0;top:0;bottom:0;background:#000;opacity:.5;background:linear-gradient(135deg,rgba(26,164,221,1) 0%,rgba(0,0,0,0) 100%)}
.index-main .fitImg .thevideo{width:100%}
.index-main .fitImg .logo{display:inline-block;width:100px;max-width:100%}
.project-item-title{position:relative;position:absolute;left:0;right:0;bottom:0;z-index:1;width:100%;height: 4rem;padding: 0 .75rem;background:rgba(255,255,255,.3);background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0.9) 100%);-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;}
.project-item-title .project-name{font-size: 1.5rem;color:#fff;font-weight:600;display:inline-block;position:relative;/* border-bottom:1px solid #fff; */text-shadow:0 0 8px #000,0 0 2px #000;line-height: 1.2;letter-spacing: .25rem;}
.project-item-title .en{color:#fff;display:block;width:100%;text-shadow:0 0 3px #000;line-height:1;font-size: 1rem;letter-spacing:1px;}
.project-item-title .project-name+article{margin-top:15px;margin-bottom:50px;font-size:16px;color:rgba(255,255,255,0.8);width:100%}
.index-main .fitImg:hover{background-position:100% 100%}
.indexPro .item:hover .project-item-title{height:100%;background:linear-gradient(180deg, rgba(0 ,0 ,0 , .3) 0%,#19a4dd 100%)}

/*video play*/
.popup-youtube .play_icon{position: absolute;z-index: 1;left: 50%;top: 50%;display:inline-block;width: 6rem;height: 6rem;line-height: 5rem;padding: .5rem;text-align:center;transition:all .5s ease-in-out;font-size:10px;color: #fff;font-weight:400;-ms-transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
.popup-youtube .play_icon .tt{display:inline-block;-ms-transform: translate(4.5rem,0);-webkit-transform: translate(4.5rem,0);transform: translate(4.5rem,0);-webkit-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);-moz-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);-o-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);-ms-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);transition:all .3s cubic-bezier(0.165,0.84,0.44,1);}
.popup-youtube .play_icon .tt{-ms-transform:translate(0,0);-webkit-transform:translate(0,0);transform:translate(0,0)}
.popup-youtube .play_icon:before,.popup-youtube .play_icon:after{content:'';display:block;position:absolute;left:50%;top:50%;-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transform-origin:center}
.popup-youtube .play_icon:before{border-radius:100%;width:100%;height:100%;border: solid 1px #ffffff;border-right-color: rgba(255,255,255,0);}
.popup-youtube .play_icon:after{-ms-transform:translate(-30%,-50%);-webkit-transform:translate(-30%,-50%);transform:translate(-30%,-50%);width:0;height:0;border-style:solid;border-width:15px 0 15px 20px;border-color: transparent transparent transparent #fff;}
.popup-youtube .play_icon:before{transition:all .2s ease-in-out;box-shadow:0 0 15px rgba(0,0,0,.3)}
.popup-youtube .play_icon:after{-o-animation: grow2 1s ease-in-out 10ms infinite alternate;-webkit-animation: grow2 1s ease-in-out 10ms infinite alternate;-moz-animation: grow2 1s ease-in-out 10ms infinite alternate;animation: grow2 1s ease-in-out 10ms infinite alternate;transition:all .2s ease-in-out;}

@-o-keyframes grow2{
  0% { transform:translate(-30%,-50%) ;opacity:0}
  100% { transform:translate(250%,-50%) scale(.5);opacity:1}
}
@-webkit-keyframes grow2{
  0% { transform:translate(-30%,-50%) ;opacity:0}
  100% { transform:translate(250%,-50%) scale(.5);opacity:1}
}
@-moz-keyframes grow2{
  0% { transform:translate(-30%,-50%) ;opacity:0}
  100% { transform:translate(250%,-50%) scale(.5);opacity:1}
}
@keyframes grow2{
  0% { transform:translate(-30%,-50%) ;opacity:0}
  100% { transform:translate(250%,-50%) scale(.5);opacity:1}
}
/*footer*/
footer{background: #1e3c78;color:#fff;padding: .25rem 0 .5rem;text-align:center;position:relative;font-size: .9rem;}
footer ul{margin: 0;padding: 0;list-style:none;}
footer ul li{display:inline-block;padding: .25rem .5rem;}
footer li svg{margin-top:-3px;margin-right:3px}
footer ,footer a{color: #fff;color: rgba(255 ,255 ,255 , 1);}
footer a:hover{color:rgba(255,255,255,1);text-decoration:none}
.copyright{font-size: .9rem;/* padding: 0 1rem .25rem; */}
.copyright,.copyright a{color: rgba(255,255,255,.7);}

.pg-banner .mj-title{margin-bottom: .5rem;padding: 3rem 0 2rem;color: #fff;max-width: 500px;}
.pg-banner .mj-title .tt{text-shadow: 0 0 0.75rem rgba(0 ,0 ,0 , 0.5),0 0 .25rem rgba(0 ,0 ,0 , 0.3);}
.pg-banner .mj-title .en{opacity: .5;-webkit-text-stroke: .75px rgba(146 ,233 ,255 , 0.7);font-size: 6rem;text-shadow: 0 0 1rem #00aaf9;}


/* 標題 */
.mj-title{position:relative;padding:1rem 0}
.mj-title .tt{position:relative;z-index:1;display:block;font-size:2.5rem;font-weight:900;line-height:1;margin-bottom:.5rem}
.mj-title .tt .txt-en{font-weight:500}
.mj-title .en{opacity:.3;position:absolute;top:50%;left:-1rem;display:block;-webkit-text-stroke:.75px #000;color:transparent;text-shadow:none;font-size:4rem;line-height:1;-ms-transform:translate(0,-50%);-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
.mj-title+.sub_txt{display:block;font-size:1rem;margin-top:-1rem;font-weight:700}
.mj-title.about-title .en{left:50%;font-size:4rem;-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-text-stroke:.75px #19a4dd}
.mj-title.about-title{text-align:center}
.mj-title.about-title .tt{color:#19a4dd;text-shadow:0 .25rem .25rem #85a0b0}
.mj-title.about-title.text-left .en{left:0;-ms-transform:translate(0,-50%);-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
.title_block{position:relative;margin-bottom: 2rem;}
.title_block.group{display:-ms-flexbox;display:flex;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}
.title_block .mj-title1{font-size: 2rem;margin-bottom:0;padding-bottom:.5rem;/* border-bottom:solid 1px #000; */font-weight:700;}
.title_block .mj-title1 .ss{display: inline-block;margin-bottom: 2rem;font-size: 1.5rem;background: linear-gradient(to right, #ccc 0%,#f5f5f5 100%);/* border-radius: 3rem; */padding: .5rem .75rem;background: linear-gradient(to left, #2C4B85 0%,#3b92d2 100%);color: #fff;/* background: #1e3c78; */}
.title_block .mj-title1 .bb{display:block;color: #1e3c78;}
.tx-right time{text-align: right;display: block;padding-top:.5rem;/* border-top:solid 4px #19a4dd; *//* margin-top:-2px; */font-size: 20px;font-weight: 700;}
.title_block .badge{position:absolute;z-index:1;left:4rem;top:2rem;font-size:1.25rem}
.sub-tt{font-size:1.25rem;font-weight:700}
.sub-tt2{
    position: relative;
    margin-bottom: 1.5rem;
    padding: .25rem 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    background: #eee;
    background: linear-gradient(to right, #ccc 0%,#f5f5f5 100%);
    letter-spacing: .25rem;
}
.sub-t…t2:before{content:'';position:absolute;left:-3px;top:50%;width:6px;height:50%;background:#19a4dd;-ms-transform:translate(0,-50%);-webkit-transform:translate(0,-50%);transform:translate(0,-50%);}
/*麵包屑*/
.breadcrumb_area{background: rgba(0 ,181 ,255 , 0.5);font-size:.9rem;}
.breadcrumb_area .breadcrumb{margin-bottom: 0;padding: .75rem 0;background: transparent;color: #fff;}
.breadcrumb_area .breadcrumb .breadcrumb-item{}
.breadcrumb_area .breadcrumb .breadcrumb-item.active{color: #fff}
.breadcrumb-item+.breadcrumb-item::before{color:#fff}
.breadcrumb_area .breadcrumb a{color:#fff}


/*產品*/
.clearfix{clear:both;overflow:hidden;}
.banner-p3 .banner-slogan{width: 500px;}
.banner-p3 .color-slogn{width: calc(100% - 510px);width: 100%;text-align: center;letter-spacing: .25rem;}
.banner-p3 .color-slogn .en{display:inline-block;letter-spacing: 2px;font-weight: 400;line-height: 1;}
.banner-p3 .banner-slogan,.banner-p3 .color-slogn{text-shadow:1px 1px 3px #000}
.banner-p3 .banner-slogan{text-align:center;font-size:22px;letter-spacing:6px;min-height:inherit;padding-left:.75rem;font-weight: 700;}
.banner-p3 .color-slogn{padding-top:.25rem;padding-bottom:.25rem;font-size:1.5rem}
.pro-block.left{display:flex;align-items: flex-start;flex-wrap:wrap;/* margin-bottom: 1rem; */}
.pro-block.left .indexPro{width: 500px;width: calc(100% / 3);position: sticky;top: 100px;}
.pro-block.left .indexPro .item{width:100%;justify-content: center;margin: 0;padding: 1rem;}
.pro-block.left .indexPro .item .pic figure{padding: .25rem;box-shadow: 0 .25rem 1rem rgba(0,0,0,.5);}
.benefit_area{width: calc(100% - 510px);width: calc(100% / 3 * 2);padding: 1rem 2rem;}
.benefit_area .edit_box{font-weight:700;font-size: 24px;line-height: 1.8;}
.pro_picture{list-style-type:none;margin:0;padding:0;text-align:center;display:flex;flex-wrap:wrap}
.pro_picture li{display:inline-block;vertical-align:top;width: calc(100% / 3);padding: 1rem 2rem;}
.pro_picture figure{display:block;margin-bottom:1rem;padding:.25rem;box-shadow:0 .25rem .75rem rgba(0,0,0,.3)}
.pro_picture .tt{position:relative;padding-left:1.25rem;font-weight:700;text-align:left}
.pro_picture .tt:before{content:'▲';position:absolute;left:0;top:0;color:#EC7320}

/*最新消息*/
.block-list-info>.row{margin-left: 0;margin-right: 0;}
.block-list-info .wrap{display:flex}
.block-list-info .grid{width: 100%;position:relative;display:block;background:#efefef;padding: 1.5rem 1.5rem;margin: 1rem .5rem;}
.block-list-info .picbox{position:relative;width:40%;float:left;text-align:center}
.block-list-info .picbox figure{margin-bottom:0}
.block-list-info .picbox>img{max-height:170px;margin:0 auto;display:inline-block;vertical-align:middle}
.block-list-info .txt-info{margin:0;padding: 0 .5rem;height: 6rem;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;}
.block-list-info .txt-info p{width:100%;margin-bottom: 0;}
.block-list-info .picbox+.txt{width:58%;float:right}
.block-list-info .txt .txt-info li{list-style:none;font-size:14px;line-height:22px;color:#777;margin-left:5px}
.block-list-info .txt .txt-info li:before{content:"\f138";font-family:'FontAwesome';color:#d4000f;margin:0 5px 0 -18px}
.block-list-info .date{position:absolute;right:0;bottom:0;padding:.5rem 1rem;text-align:center;font-size:.9rem;/* border-top:solid 1px #000 */}
.block-list-info .ti{padding:.5rem;margin-bottom: .5rem;/* height: 2.5rem; */border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;}
.block-list-info .ti h3{display:block;font-size: 1.25rem;box-sizing:border-box;margin-bottom: 0;font-weight:700;font-weight:bold;height: 1.5rem;display:-webkit-box;-webkit-line-clamp: 1;-webkit-box-orient:vertical;overflow:hidden;}
.block-list-info .txt{padding: 0 .5rem 20px;box-sizing:border-box;}
/*頁碼*/
.pagination-area{text-align:center;margin-top: 2rem;padding: 1rem 0;}
#pagination{display:block;margin:0;padding:0}
#pagination li{display:inline-block}
.page-item.disabled .page-link,.page-item .page-link{border-color:transparent;color:#000}
.page-item.disabled .page-link{opacity:.3}
.page-item.active{border-bottom:solid 4px #19a4dd;border-radius:0}
.page-item.active .page-link{background:transparent;color:#19a4dd;border:none}
#page-content{display:inline-block;padding:1rem;width:100%;text-align:center;font-size:.9rem;border-top:solid 1px #233f5c}
/*圖文*/
.page-content{max-width: 1400px;margin:auto;padding: 0 2rem;}
.tx01 {}
.tx01 table { max-width:100%; }
.img-left{float: left;padding-bottom: 1rem;padding-right: 3rem;width: 550px;max-width: 45%;}
.img-left img{max-width: 100%;box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,.6);}
.tx-right{overflow:hidden}
.tx-right .edit_box{font-size: 20px;line-height: 1.8;text-align: justify;}
/* 區塊設計 */
.radius_area{overflow: hidden;border-radius: .5rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0 ,0 ,0 , 0.3);-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear;}
.radius_area .radius_seed{padding: 2rem;}


/*客戶代表*/
.client_area{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.client_area li{position:relative;float:left;display:flex;align-items:center;justify-content:center;width:calc(25% - 1rem);margin:.5rem;padding:1rem;background:#edf5f9;font-weight:700;font-size:18px;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
.client_area li:before{content:'';position:absolute;left:0;top:50%;width:.25rem;height:2rem;background:#19a4dd;-ms-transform:translate(0,-50%);-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
.client_area li:hover{box-shadow:0 .5rem 1rem 2px rgba(0,77,109,.3);background:#fff;border-radius:7rem;color:#19a4dd;-ms-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.1)}
.client_area li:hover:before{opacity:0}


/*----------------------------重拉----------------------------------------*/
.page-inner{/* padding: 0 .75rem; */}
.page-header{width: 100%;padding-left:10px;/* padding-right: 10px; */}

@media screen and (min-width:768px) {
.page-header{width: 100%;/* padding-left:10px; */}
}

@media screen and (min-width:1200px) {
  .page-inner{padding: 0 5vw;}
  .page-header{padding: 0 6vw;width: 100%;display: flex;flex-wrap: inherit;align-items: center;justify-content: space-between;}

}
@media screen and (min-width:1480px) {
  .page-inner{/* padding: 0 8vw; */}
  .page-header{padding: 0px 8vw 0px 95px;width: 100%;display: flex;flex-wrap: inherit;align-items: center;justify-content: space-between;}

}
@media screen and (min-width:1680px) {
  .page-inner{/* padding: 0 5vw; */}
  .page-header{padding: 0 5vw;width: 100%;display: flex;flex-wrap: inherit;align-items: center;justify-content: space-between;}
  .p1.intro-wrap,.p4.intro-wrap{padding-bottom:5rem}
}

/*inner-banner*/
.banner-pri-pos{position:relative}
.banner-wrap{display:flex;position:absolute;width:100%;height:100%;z-index:-1}
.pg-banner{background-size:cover;background-position:center;overflow:hidden;color:#fff}
/* .p1 .pg-colorbanner{background-color:#2C4B85;background: linear-gradient(to right, #2C4B85 0%,#3b92d2 100%);}
.p2 .pg-colorbanner{background-color:#2C4B85;background: linear-gradient(to right, #1c7fb8 0%,#2C4B85 100%);}
.p3 .pg-colorbanner{background-color:#2C4B85;background: linear-gradient(to right, #2C4B85 0%,#3b92d2 100%);}
.p4 .pg-colorbanner{background-color:#4472C4;background: linear-gradient(to right, #4472C4 0%,#55c0d4 100%);}
.p5 .pg-colorbanner{background-color:#D07F62;background: linear-gradient(to right, #2C4B85 0%,#3a6fcd 100%);} */
.p1 .pg-colorbanner,.p3 .pg-colorbanner,.p4 .pg-colorbanner,.p5 .pg-colorbanner{background: linear-gradient(to right, #2C4B85 0%,#3b92d2 100%);}
.p4 .pg-colorbanner{background: linear-gradient(to right, #222f46 0%,#176ba9 100%);}
.p2 .pg-colorbanner{background: linear-gradient(to left, #2C4B85 0%,#3b92d2 100%);}
.inner-slogan{color:#fff;display:flex;align-items:center}
.inner-slogan p{font-size:3.25rem;display:inline-block;margin-bottom:0;text-shadow:0 0 1rem #0a3b5c,0 0 5px #111521}
.inner-slogan h1{font-size:.5rem;display:inline-block;margin:0 7px;letter-spacing:2px;text-shadow:0 0 7px #0a3b5c,0 0 5px #111521}
.pg-banner,.banner-slogan{width:50%}
.pg-colorbanner,.banner-slogan-empty,.color-slogn{width:50%}
.banner-slogan{padding-left:.75rem;padding-right:.75rem}
.color-slogn{color:#fff;font-size:2rem;font-weight:700;letter-spacing:6px;padding:1rem .75rem;text-align: center;}
.p1 .color-slogn,.p4 .color-slogn{text-align:left}
/* .p1 .color-slogn{padding-right:12.75rem} */
.p2 .color-slogn{text-align:left}
.p2 .banner-wrap,.p2 .inner-slogan{flex-direction: row-reverse;}

/*公司簡介*/
.intro-left{width:50%;margin-top:2.5rem;padding-left:.75rem;padding-right:1.75rem}
.intro-pic{}
.intro-right{width:50%;position:relative;padding:2rem .75rem}
.about-text{width:100%;position:relative;padding-right: 11rem;font-weight:700;font-size:1.25rem;line-height: 1.8;text-align: justify;}
.contact-text{position:relative;margin-top:2rem;padding:0 1rem;font-weight:700;font-size:1.75rem;color:#555}
.contact-text p{margin-bottom:.75rem}
.video{width:25%;width: 210px;height: 374px;position:absolute;bottom:9%;left: 100%;margin-left: -9.5rem;}
.video iframe{width: 100%;height: 100%;}

/*客戶代表*/
.client ul{list-style: none;/* line-height: 2; */font-weight: bold;padding: 0;/* padding-right: 1rem; */-webkit-columns: 3;columns: 3;-webkit-column-gap: 2rem;column-gap: 2rem;font-size: 20px;}
.client ul li{margin-bottom: .5rem;}

/*聯繫我們*/
.text-color-or{color:#D07F62}
table.formdata th{width:20%;border: 1px solid #aaa;background-color: #eee;color:#000;text-align:left;font-weight:700;padding:0 12px;margin:0;}
.formdata{margin-bottom:1rem;font-weight:700;font-size: 17px;}
.formdata ul{list-style:none;margin:0}
.form-group{padding:.5rem 1rem}
table.formdata td{width:30%;margin:0;padding: 0;border: 1px solid #aaa;background-color: #eee;}
table.formdata input{padding:1px 3px;border:none;font-family:Arial;outline:none;background-color:transparent}
.formdata .form-control:focus{box-shadow:none}
.area_tt{border-bottom:solid 1px #19a4dd;background:#19a4dd;color:#fff;margin-bottom:0;padding:.25rem 1.75rem;font-size:1.25rem}
.pg_contact{background-image:url(../images/contact/contact_bg.jpg);background-attachment:fixed;background:linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,0) 100%),url(../images/contact/contact_bg.jpg);background-position:center bottom}
.pg_contact .radius_area{cursor:pointer;opacity:.5;margin-bottom:1rem;-ms-transform:scale(.9);-webkit-transform:scale(.9);transform:scale(.9);box-shadow:0 .25rem .5rem rgba(0,0,0,0.3);border:solid 1px transparent}
.pg_contact .radius_area:hover,.pg_contact .radius_area.on{opacity:1;box-shadow:0 .5rem 1rem 2px rgba(0,77,109,.3);border-color:#19a4dd;-ms-transform:scale(.95);-webkit-transform:scale(.95);transform:scale(.95)}
.pg_contact .radius_area.on{-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}
.pg_contact .contact_txt{position:relative;padding-left:1rem;font-size:1.25rem;color:#19a4dd;font-weight:700}
.pg_contact .contact_txt:before{content:'';position:absolute;left:0;top:50%;width:.25rem;height:1rem;background:#19a4dd;-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.pg_contact .thank_txt{display:inline-block;font-size:1.25rem;color:#ff8e00;font-weight:700;font-style:italic;border-bottom:double 4px}
.custom_group{display:inline-block;list-style:none;margin:0;padding:0}
.custom_group li{display:inline-block;margin-right:1rem;margin-bottom:.25rem}
/* .custom-pri-noinline li{display:block} */
.custom_group li:nth-child(7){display:block}
.custom_group li:nth-child(7) .form-control{width:calc(100% - 100px)}
.intro-right .custom_ul{margin-left:2rem;margin-top:.5rem}
.form-group .custom-radio{display:inline-block}
.form-group .tt{font-weight:700}
.form-group .badge{background:#c00;margin-left:.5rem;font-size:10px}
.form-group .form-control{width:50px;display:inline-block;border-bottom:1px solid #999;border-radius:0}
.form-group .form-control.w-100{border-bottom:none}
.form-data .form-group:nth-child(4) ul{margin-left:3rem}
.formdata br{display:none}
.btn-mb{margin-bottom:3rem}
.text-center.btn-mb button:focus{outline:none}
/*---------------------------rwd----------------------------------*/

@media screen and (max-width: 1660px){
    .navbar>.container{max-width: 100%;padding-right: 190px;}
    /*banner*/
    .banner .slogan{left:20%}
    .banner .slogan p{font-size:11rem}
    .banner .slogan h1{font-size: 2.2rem;}
  /*la-公司簡介*/
  .about-text {width: 100%;padding-right: 0;}
  .video {width: 100%;height: 30vw;position: relative;bottom: inherit;left: inherit;margin-left: 0;margin-bottom: 2rem;}
  .video iframe {/* width: 100%; */margin-top: 1rem;}
}
@media screen and (max-width: 1400px){
  /*banner*/
  .banner .fill{height: 28vw}
  .banner .slogan{left:15%}
  .banner .slogan p{font-size:10rem}
  .banner .slogan h1{font-size: 2rem;}

  /*聯繫我們*/
  .contact-text {font-size: 1.5rem;margin: 1rem auto 0;}
  .text{font-size: 1rem;}

}
@media screen and (max-width: 1199px){
    /*選單*/
    .navbar>.container{padding-right: 0;}
    .navbar.fixed-top{box-shadow:0 0 5px rgba(0,0,0,.5)}
    .center_cell{right:90px}
    .center_cell>*{min-width:70px;text-align:center;border-left:none;border-right:solid 1px #dedfe0}
    .navbar-toggler{padding: 1.7rem;float: right;}
    .navbar-toggler-icon{width: 2.5rem;height:1px;display:block;background-color:#2d3237;margin:0 auto;}
    .navbar-toggler-icon+.navbar-toggler-icon{margin-top:7px}
    .collapse{padding-right: 10px;padding-bottom: 2rem;max-height: calc(80vh - 60px);overflow: scroll;}
    .navbar-nav{padding-right:0}
    .navbar-expand-xl .navbar-nav .nav-link:after{left: 1rem;height: 1px;background: #333;-ms-transform: translate(0,0);-webkit-transform: translate(0,0);transform: translate(0,0);}
    .navbar-brand{width:auto}
    .nav-item:nth-of-type(odd){background-color:#e6f0f4}
    .navbar-expand-xl .navbar-nav .nav-link:after{left:2rem;-ms-transform:translate(0,50%);-webkit-transform:translate(0,50%);transform:translate(0,50%)}
    .dropdown-menu{text-align: left;-ms-transform: translate(0,0);-webkit-transform: translate(0,0);transform: translate(0,0);}

    /*產品*/
    .project-item{width:calc(50% - 10px);margin-bottom:10px}
    .project-item.on{width:calc(50% - 10px)}
    .project-item-title img{width:40px;margin-bottom:10px}
    .project-name{font-size:22px}
    .project-name+article{margin-bottom:20px}
    .Pro-item figure{width:100%}
    .Pro-item .ProBoxT{width:100%}
    /*首頁*/
    .indexPro .item{width: calc(50% - 1.5rem)}
    .indexPro .item:nth-child(3), .indexPro .item:nth-child(4){margin-top:.5rem}
    /*banner*/
    .banner .fill {height: 30vw;}
    .banner .slogan{left:15%}
    .banner .slogan p{font-size:10rem}
    .banner .slogan h1{font-size: 2rem;}
    
    /*inner-banner*/
    .banner-wrap{flex-wrap:wrap}
    .pg-banner,.banner-slogan{width:100%}
    .pg-colorbanner,.banner-slogan-empty,.color-slogn{width:100%}
    .banner-slogan{width:100%;min-height:70px;padding-left:1.25rem;background-size:cover;background-position:center}
    .p1 .banner-slogan{background-image:url(../images/banner/p1.jpg?20201023)}
    .p2 .banner-slogan{background-image:url(../images/banner/p2.jpg?20201023)}
    .p4 .banner-slogan{background-image:url(../images/banner/p4.jpg?20201023)}
    .p5 .banner-slogan{background-image:url(../images/banner/p5.jpg?20201023)}
/*     .p4 .color-slogn{background-color:#4472C4;background: linear-gradient(to right, #4472C4 0%,#55c0d4 100%);}
    .p5 .color-slogn{background-color:#D07F62;background: linear-gradient(to right, #2C4B85 0%,#3a6fcd 100%);} */
    .color-slogn{padding:1rem}
    .pg-banner{display:none}
    .inner-slogan{flex-wrap:wrap}
    .banner-pri-pos .page-inner{padding:0}
    .p2 .color-slogn{text-align:center}
    /*產品*/
    .banner-p3 .inner-slogan{display:block;text-align: center;}
    .banner-p3 .banner-slogan{width:100%}
    .banner-p3 .color-slogn{width: 100%;text-align: center;}
    
    /*la-公司簡介*/
    .intro-wrap{flex-wrap:wrap;}
    .intro-left{width: 100%;margin: 1.5rem auto 0;text-align: center;}
    .intro-pic {max-width: 700px;margin:0 auto}
    .intro-right{width: 100%;margin: 0 auto;max-width: 700px;}
    .about-text{width: 100%;margin: 1rem auto;padding:  0;}
    .video {width: 100%;height: 50vw;margin-top: 1rem;}

    /*聯繫我們*/
    .form-wrap {margin: 0 auto;}
    .formdata{margin-bottom:1rem}
}
@media screen and (max-width: 991px){
    
    /*首頁*/
    .indexPro {display: flex; flex-wrap: wrap;width: 100%;}
    .project-item{width:100%;background-color: transparent;}
    /*banner*/
    .banner .fill{height: 35vw;}
    .banner .slogan{left:15%}
    .banner .slogan p{font-size:8.5rem}
    .banner .slogan h1{font-size: 1.7rem;}
    /*video play*/
    .popup-youtube .play_icon:before{transition:all .2s ease-in-out;box-shadow:0 0 15px rgba(0,0,0,.3)}
    .popup-youtube .play_icon:after{-o-animation: grow2 1s ease-in-out 10ms infinite alternate;-webkit-animation: grow2 1s ease-in-out 10ms infinite alternate;-moz-animation: grow2 1s ease-in-out 10ms infinite alternate;animation: grow2 1s ease-in-out 10ms infinite alternate;transition:all .2s ease-in-out;}
    .popup-youtube .play_icon .tt{-ms-transform:translate(0,0);-webkit-transform:translate(0,0);transform:translate(0,0)}

    /*產品*/
    .pro-detail-name p{width: 100%;padding: 0 0 0 25px;font-size: 26px;}
    .pro-detail-name p:before, .pro-detail-name p:after{height: 70%;}
    .pro-detail-name p:before{left: 0px;bottom: 10px;}
    .pro-detail-name p:after{top: 10px;left: 10px;}
    .left-pro{width:100%;margin-top:0;margin-bottom:20px}
    .pic-big{border-bottom: 1px solid #19a4dd;border-top: 1px solid #19a4dd;padding: 15px 0;margin-bottom: 15px;}
    .right-box{width:100%;padding-left:0}
    .pro-block.left .indexPro{position:static}
    
    /*公司簡介*/
    .about_first,.about_block{max-width: 700px;margin-left: auto;margin-right: auto;}
    .about_block .pic_box{max-width:500px;margin-left:auto;margin-right:auto;}
    .about_block .sub_figcaption,.about_block:nth-child(odd) .sub_figcaption{text-align:center}
    
    /*客戶代表*/
    .client ul{-webkit-columns: 2;columns: 2;}
    .intro-right ul {font-weight: bold;}

    /*聯繫我們*/
    .formdata th,.formdata td{display:block}
    table.formdata tr{display:flex}
    table.formdata tr:nth-child(n+1){flex-wrap:wrap}
    table.formdata th:nth-child(n+1){width:20%;display:flex;align-items:center;justify-content:center}
    table.formdata td:nth-child(n+1){width:80%}
    table.formdata th:nth-child(n+4){width:20%;display:flex;align-items:center;justify-content:center}
    table.formdata td:nth-child(n+4){width:80%}
    .contact-text{font-size:1.25rem}
    /* .custom-pri-noinline li{display:inline-block} */
    table.formdata tr:nth-child(5)>td{text-align:left}
    .custom_ul:nth-child(1){width:auto}
    /*圖文*/
    .page-content{
    padding: 0 1rem;
}
    .page-content iframe { height:320px; }
    .img-left{ float:inherit; padding-right: 0; padding-left: 0;display:block; width:100%; max-width:inherit; }
}

@media screen and (max-width: 768px){
    /*banner*/
    .banner .slogan{transform: translate(-25%,-50%);left: 20%;}
    .banner .fill{height: 40vw;}
    .banner .slogan h1{font-size: 1.1rem;}
    .banner .slogan p{font-size: 5.5rem;}
    .banner .slogan small{letter-spacing:0;margin-left 0.25rem;}
    /*首頁*/  
    .project-box ul{margin-bottom:0}
    .Pro-item{width:50%;margin:0 0 1.5rem}
    .project-item.on{width:100%}
    .fullBg{opacity:1}
    .project-item .open-info{opacity:1}
    .project-item .open-info:before{background:-webkit-linear-gradient(0deg,#000,red100%);background:linear-gradient(0deg,#000,red100%)}
    /*footer*/
    footer ul li{display:block;padding: 5px 0;}
    

    /*inner-banner*/
    .color-slogn{font-size: 1.75rem;}

    /*la-公司簡介*/
    .intro-right{width: 90%}

    /*聯繫我們*/
    .formdata{font-size: 1rem;}
    .custom_group li:nth-child(7) .form-control {width: calc(100% - 100px);}
    .text{width: 95%;margin: 0 auto;}
    /*產品*/
  .benefit_area{width:100%;padding: 1rem .75rem;}
  .pro_picture li{width:calc(100% / 2);padding: 0.75rem;}
  .benefit_area .edit_box{font-size:20px}

  /*頁碼*/
  .page-item:first-child .page-link,.page-item:last-child .page-link{padding-left:0;padding-right:0}
  .page-link{font-size:.9rem;padding-left: .5rem;padding-right: .5rem;}

}
@media screen and (max-width: 640px){
    /*nav*/
    .navbar-brand .log-text {display: none;}
    /*banner*/
    .banner .slogan{width: 100%;}
    .banner .fill{height: 46vw;}
    /*選單*/
    .navbar-brand .log-text{display:none}
    .center_cell{line-height: 1;top: 4px;}
    #lan span{display:none}
    #lanDrop{width: 90px;}
    #lanDrop a{padding:.75rem 1rem;text-align:center}
    /*footer*/
    footer{padding-bottom: 70px;}

    /*產品*/
    .pro-detail-name{margin-bottom:10px}
    .pro-detail-name p{padding: 0 0 0 24px;font-size: 24px;}
    .pro-detail-name p:before{bottom: 8px;}
    .pro-detail-name p:after{top: 8px;}
    .pro-bottom-title{font-size: 18px;}
    .file{width:100%;display: table;text-align: center;}

    /*最新消息*/
    .block-list-info .grid{margin-top:0;padding: .75rem;}
    .block-list-info .picbox{/* width: 35% */}
    .block-list-info .picbox+.txt{/* width: 65%; */padding: 0 0 20px;}
    .block-list-info .ti h3{height: 3rem;-webkit-line-clamp: 2;}
    .block-list-info .txt-info{height: 3rem;-webkit-line-clamp: 2;}
    /* 標題 */
    .mj-title .tt{font-size:2rem}
    .pg-banner .mj-title .en{font-size:13vw}
    .title_block .mj-title1{font-size: 1.75rem;}
    .title_block .mj-title1 .ss{font-size:1.25rem}
    
    /*公司簡介*/
    .mj-title.about-title{text-align:left}
    .mj-title.about-title .en{left:0;-ms-transform:translate(0,-50%);-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
    .about_first .infor_box{text-align:left}
    .about_block .sub_figcaption,.about_block:nth-child(odd) .sub_figcaption{text-align:left}
    /*la-公司簡介*/
    .video{height:100vw}
    
    

    /*聯繫我們*/
    .formdata {margin: 1rem auto;}
    table.formdata th{text-align: center;}
    .custom_group li,
    .form-group .custom-radio{display:block;margin: 0 0 1rem;}
    .intro-left {width: 100%;margin: 0 auto;padding:0;text-align: center;}
    .contact-text {font-size: 1rem;}
    .contact-text p{margin: 0;}
    .formdata br{display: block}
    .formdata .tt{padding: 0.75rem 0;}
}

@media screen and (max-width: 575px){
    body{padding-top:57px}
    /*選單*/
    .navbar-toggler{padding: 1rem;}
    .navbar-brand .log-text {display: none;}
    .navbar-brand img{width:100px}
    .center_cell>*{min-width:50px;padding: 1rem .5rem;}
    .center_cell{right:65px}
    /*首頁*/
    .index-main{margin-top:0;margin-bottom:0}
    .index-main .fitImg .thevideo{max-height:35vw}
    .indexPro{padding-top:1rem}
    .indexPro .item,.indexPro .item:nth-child(3),.indexPro .item:nth-child(4){width:100%;margin:0 1rem 1rem}    
    .ix-title .mj{font-size:8vw}
    .ix-title .ss{font-size:6vw}
    /*聯絡我們 */
    .form-group .tt+.custom_group{float:inherit;display: block;}
    #staff_num,#use_num,#reason7_txt{margin-left:1rem}
    .contact_area .infor_block .company{font-size:1.75rem}
    .contact_area .infor_block .company:after{height:.5rem}
    /* 區塊設計 */
    .radius_area .radius_seed{padding:1rem}
    .pg_contact .radius_area{margin-bottom:0}
    /*客戶代表*/
    .client ul{-webkit-columns: 1;columns: 1;-webkit-column-gap: 1rem;column-gap: 1rem;}

    /*inner-banner*/
    .color-slogn{font-size: 1.5rem;padding: 1rem;}

    /*la-公司簡介*/
    .about-text {font-size: 1rem;padding: 0;font-weight: 500;}

    /*聯繫我們*/
    .formdata{font-size: 1rem;}
    .custom_group li:nth-child(7) #reason7_txt{width: calc(100% - 110px);}

    /*客戶代表*/
    .form-group{padding:.5rem}
    .client{flex-wrap:wrap;padding:0 3% 3%;margin-top:1rem}
    .intro-right{width:100%;padding-top:1rem;padding-bottom:1rem}
    /*產品*/
  .pro-block.left .indexPro .item{margin:0;padding: 0 .5rem;}
  .pro-block.left .indexPro{width:100%;padding-top: 0;}

}
@media screen and (min-width: 992px){
    /*聯絡我們 */
    .contact_area{display:flex;flex-wrap:wrap}
    .contact_area .infor_block{padding:1rem}
    .contact_area .infor_block .box{position:sticky;top:100px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 0 2rem 2px #fff}
    .contact_area .infor_block .company{font-size:2.5rem}
    .contact_area .infor_block i{width:40px;height:40px;line-height:40px}
    .contact_area .infor_block .company{margin-bottom:1.5rem}
    .contact_area .infor_block .company:after{background:#d0e9f7;box-shadow:0 0 1rem rgba(0,0,0,.5)}
    /*公司簡介*/
    .about_block{display:flex;flex-wrap:nowrap;align-items:center}
    .about_block >*{padding:0 3rem}
    .about_block .mj_box{width:50%;font-size:1.25rem}
    .about_block .mj_box:before{top:50%;right:0;width:.5rem;height:2rem}
    .about_block .pic_box{width:50%}
    .about_first .infor_box{font-size:1.25rem}
    .about_block .sub_figcaption{font-size:3rem}
    body.index{position:relative;min-height:100vh;padding-bottom:70px}
    body.index footer{position:absolute;left:0;right:0;bottom:0}
  
}