@import url('../font/flaticon/flaticon.css');
@import url('../font/fontawesome/fontawesome.min.css');
@import url('../font/font-awesome-4.4.0/css/font-awesome.css');
@import url('../font/Lato/Lato.css');
@import url('../font/Saira/Saira.css');

@font-face {
    font-family: nunito-sans;
    src: url('../font/NunitoSans/NunitoSans_10pt-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: nunito-sans;
    src: url('../font/NunitoSans/NunitoSans_10pt-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'ionicons';
    src: url('../font/icomoon/ionicons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'icomoon';
    src: url('../font/icomoon/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal
}
 
.ff-Saira{font-family:'Saira';}
.ff-Lato{font-family:'Lato';}
.ff-NunitoSans{font-family:'nunitosans';}

html{font-size:10px; line-height:1;}
.nrLayout{ margin:0 auto; font-size:16px;}
.nrLayout2{ margin:0 auto; font-size:16px;}

.color-type-mr{color:var(--color-type-mr);}
.color-type-A{color:var(--site-colorA);}
.color-type-B{color:var(--site-colorB);}
.color-type-light{color:var(--color-type-light);} 

@media (min-width: 1401px) {
    html{font-size:10px;}
    .nrLayout{ width:80%; max-width:1400px;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
}
@media (min-width: 1025px) and (max-width:1400px) {
    html{font-size:9px;}
    .nrLayout{ width:90%;}
}
@media (min-width: 768px) and (max-width:1024px)  {
    html{font-size:9px;}
    .nrLayout{ width:100%; padding:0 10px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
}
@media (max-width: 767px)  {
}
html, body, form{width: 100%;height: 100%; font-family: nunito-sans,avenir,Helvetica,Arial,SimHei,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}



.style-title-01{font-family:'Saira';padding:0;color:var(--color-type-mr); padding-bottom:30px;}
.style-title-01 .t-01{font-size:20px; line-height:1.8; font-weight:bold;}
.style-title-01 .t-02{font-size:48px; line-height:1.5; font-weight:bold; text-transform:capitalize; position:relative;}
.style-title-01 .hx{width: 120px;height: 2px;background: var(--site-colorA);}
.style-title-01 .icon{width: 16px;height: 16px;margin: 10px 20px;}
.style-title-01 .icon i{display: block;width: 16px;height: 16px;background: var(--site-colorA);-webkit-transform: rotate(45deg);transform: rotate(45deg);transform-origin: center center;}


@media (max-width: 767px)  {
.style-title-01{padding-bottom:20px;}
.style-title-01 .t-01{font-size:16px;}
.style-title-01 .t-02{font-size:32px;}
.style-title-01 .hx{width: 60px;}
.style-title-01 .icon{width: 12px;height: 12px;margin: 5px 10px;}
}

.style-title-02{font-family:'Saira';padding:0;color:var(--white);}
.style-title-02 .t-01{font-size:20px; line-height:1.8; font-weight:bold;}
.style-title-02 .t-02{font-size:48px; line-height:1.5; font-weight:bold; text-transform:capitalize;}
.style-title-02 .hx{width: 120px;height: 2px;background: var(--white);}
.style-title-02 .icon{width: 16px;height: 16px;margin: 10px 20px;}
.style-title-02 .icon i{display: block;width: 16px;height: 16px;background: var(--white);-webkit-transform: rotate(45deg);transform: rotate(45deg);transform-origin: center center;}

.model-head{position: fixed;top: 0;left: 0;width: 100%;z-index: 20;box-shadow:6px 2px 20px 0 rgba(0, 0, 0, .33); background: rgba(0, 0, 0, 0.3);}
.model-head:before{content: "";position: absolute;z-index: 1;bottom: 0;height: 0;left: 0;right: 0;background: var(--site-colorB);-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.fixed-head:before{height: 100%;}
 .line-logo-nav{width: 100%;background: rgba(0,0,0,0.1);position: relative;z-index: 2;}
.line-logo-nav .nrLayout{display: flex;flex-direction: row;align-items: center;height: 90px;}
.line-logo-nav .logoImg{height: 50px;}
.line-nav{display: flex;}
.line-nav .item-nav{margin-left: 1px; position:relative;}
.line-nav .item-nav .nav-first{font-size: 17px;height: 90px;position: relative;text-transform: uppercase;padding: 0 40px;overflow: hidden;cursor: pointer;}
.line-nav .item-nav .nav-first .word{height: 90px;position: relative;overflow: hidden;z-index: 2;}
.line-nav .item-nav .nav-first .div-icon{position: relative;z-index: 2;}
.line-nav .item-nav .nav-first .sp{line-height: 90px;position: relative;color: #ffffff}
.line-nav .item-nav .nav-first .svgIcon{width: 20px;height: 20px;margin-left: 5px;}
.line-nav .item-nav .nav-first .svgPath{fill: #ffffff;}
.line-nav .item-nav .nav-first:before{content: "";background: var(--site-colorB);z-index: 1;position: absolute;border-radius: 5px;top: 15px;bottom: 15px;left: 0;width: 100%;transform: scale(0)}
.line-nav .item-nav .nav-first:after{content: "";left: 0px;right: 0px;transform: scale(0);bottom: 0;position: absolute;height: 4px;background: #fff;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.fixed-head .line-nav .item-nav .nav-first:before{background: var(--site-colorA);}
.line-nav .item-nav:hover .nav-first .sp1{margin-top: -90px;}
.line-nav .item-nav:hover .nav-first .sp,
.line-nav .item-nav.active .nav-first .sp{color: #fff;}
.line-nav .item-nav:hover .nav-first:before{transform: scale(0.75)}
.fixed-head .line-nav .item-nav.active .nav-first:before{transform: scale(0.75)}
.line-nav .item-nav:hover .nav-first .svgPath,
.line-nav .item-nav.active .nav-first .svgPath{fill: #ffffff;}
.line-nav .item-nav:hover .nav-first:after{transform: scale(0.75);}
/*.fixed-head .line-nav .item-nav.active .nav-first:after{transform:scale(1);}*/.line-nav .sp,
.line-nav .nav-first:before,
.line-nav .svgPath{-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.btn-top-getintouch{height: 40px;line-height: 40px;text-transform: capitalize;border-radius: 25px;padding: 0 20px;border: 2px var(--site-colorA) solid;background: var(--site-colorA);color: var(--white);cursor: pointer;}
.btn-top-getintouch{-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.btn-top-getintouch:hover{border-color: var(--site-colorB);color: var(--site-colorB);background-color: var(--white)}

.sub-nav-ul{background:#fff; width:220px; position: absolute;left:calc(50% - 110px);top: 90px; z-index: 10;-webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);-webkit-transform-origin: 50% 0;-webkit-transition: 350ms;-moz-transition: 350ms;-o-transition: 350ms;transition: 350ms; border-radius:0 0 10px 10px; overflow:hidden; box-shadow: 4px 7px 4px 0 rgba(64, 65, 130, .23);

}
 .sub-nav-ul li{border-bottom:1px #ddd dotted;}
 .sub-nav-ul li:last-child{border-bottom:0px;}
 .sub-nav-ul li a{padding:15px 0px; display:block; white-space:nowrap; text-align:center; display:block;  position:relative; background:#fff; -moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.sub-nav-ul li a .en{display:block; position:relative; z-index:2; line-height:20px; font-size:16px; text-transform:capitalize;}
.sub-nav-ul li a:hover{color:var(--white); background:var(--blue);}
  
.item-nav:hover .sub-nav-ul{-webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);}
.nav__trigger{display:none;}
.zw-mb-menu{display:none;}

@media (max-width: 767px)  {
.zw-mb-menu{display:block; width:40px;}
.model-head{position:fixed; background:var(--site-colorB)}

.model-head.fixed-head{position:fixed;}
.mbzw{height:70px}

.line-nav{position:fixed; display:none; width:100vw; height:calc(100vh - 70px); top:70px; left:0;}
.div-logo{padding:0 10px;}
.line-logo-nav .nrLayout{height:70px;}
.btn-top-getintouch{margin-right:10px; height:32px; line-height:32px;}
.nav-menu{display:block; color:#fff; padding:0 10px;}

.line-nav{display:block; background:rgba(0,0,0,0.8); padding-left:40%; z-index:200;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }
.line-nav:before{background:var(--dark); width:60%; position:absolute; top:0; right:0; bottom:0; content:"";}
.line-nav .item-nav .nav-first{padding:0;height:50px; font-size:15px;}
.line-nav .item-nav .nav-first .word{width:100%; height:50px; padding:0 20px;}
.line-nav .item-nav .nav-first .sp{line-height:50px;}
.line-nav .item-nav .nav-first .div-icon{display:none;}
.line-nav .item-nav:hover .nav-first .sp1{margin-top: 0px;}

.line-nav{-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.line-nav{left:100%;}
.nav--active.line-nav{left:0%;}


.nav__trigger{display: block; width: 40px;height: 25px; position:absolute; top:23px; right:0; z-index:250;}
.nav--active .nav__trigger{opacity: 0.5;}
.nav__icon{display: inline-block;position: relative;width: 28px;height: 3px; margin-left:3px; background-color: #FFFFFF;-webkit-transition-property: background-color, -webkit-transform;transition-property: background-color, -webkit-transform;transition-property: background-color, transform;transition-property: background-color, transform, -webkit-transform;-webkit-transition-duration: 300ms;transition-duration: 300ms;}
.nav__icon:before,
.nav__icon:after{content: '';display: block;width: 28px;height: 3px;  position: absolute;background: #FFFFFF;-webkit-transition-property: margin, -webkit-transform;transition-property: margin, -webkit-transform;transition-property: margin, transform;transition-property: margin, transform, -webkit-transform;-webkit-transition-duration: 300ms;transition-duration: 300ms;}
.nav__icon:before{margin-top: -10px;}
.nav__icon:after{margin-top: 10px;}

.nav--active .nav__link{opacity: 1;}
.nav--active .nav__icon{background: rgba(0, 0, 0, 0);}
.nav--active .nav__icon:before{margin-top: 0;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.nav--active .nav__icon:after{margin-top: 0;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.sub-nav-ul{display:none;}

}



.slider-banner .slider-btn{top: calc(50% - 75px) !important}
.slider-banner .itemmain .itemmain-contains{position: absolute;left: 240px;right: 240px;height: calc(100% - 120px);top: 120px;display: flex;flex-direction: row;align-items: center;}
.slider-banner .itemmain .itemmain-zw{flex-grow: 1;}
.slider-banner .itemmain .itemmain-img{width: 30%;}
.slider-banner .itemmain .itemmain-img img{display: block;max-width: 100%;}
.slider-banner .itemmain .itemmain-word{width: 50%;max-width: 640px;overflow: hidden;}
.slider-banner .itemmain .itemmain-word .word-1{color: var(--white);font-family: 'Saira';line-height: 30px;font-weight: 400;font-size: 20px;opacity: 0;transform: translateX(100px);}
.slider-banner .itemmain .itemmain-word .word-2{font-family: Saira;color: var(--white);width: 100%;line-height: 55px;font-weight: 700;font-size: 50px;margin-top: 40px;opacity: 0;transform: translateX(-200px);}
.slider-banner .itemmain .itemmain-word .word-btn{background-color: var(--site-colorA);cursor: pointer;margin-top: 40px;opacity: 0;font-family: Lato;color: var(--white);width: 220px;height: 56px;text-align: center;line-height: 56px;font-weight: 500;font-size: 20px;border-radius: 60px;transform: translateY(40px);}

.slider-banner .active .itemmain .itemmain-word .word-2{transform: translate(0px, 0px)}
.slider-banner .active .itemmain .itemmain-word .word-1{-webkit-animation: slider-left-1 .5s ease-in-out 0s forwards;animation: slider-left-1 .5s ease-in-out 0s forwards;}
@keyframes slider-left-1{0%{transform: translateX(100px);opacity: 0;}
100%{transform: translateX(0px);opacity: 1;}}
@-webkit-keyframes slider-left-1{0%{transform: translateX(100px);opacity: 0;}
100%{transform: translateX(0px);opacity: 1;}}
@-moz-keyframes slider-left-1{0%{transform: translateX(100px);opacity: 0;}
100%{transform: translateX(0px);opacity: 1;}}
@-o-keyframes slider-left-1{0%{transform: translateX(100px);opacity: 0;}
100%{transform: translateX(0px);opacity: 1;}}
.slider-banner .active .itemmain .itemmain-word .word-2{-webkit-animation: slider-left-2 .5s ease-in-out 0.2s forwards;animation: slider-left-2 .5s ease-in-out 0.2s forwards;}
@keyframes slider-left-2{0%{transform: translateX(-200px);opacity: 0;}
100%{transform: translateX(0px);opacity: 1;}}
@-webkit-keyframes slider-left-2{0%{transform: translateX(-200px);opacity: 0;}
100%{transform: translateX(0px);opacity: 1;}}
@-moz-keyframes slider-left-2{0%{transform: translateX(-200px);opacity: 0;}
100%{transform: translateX(0px);opacity: 1;}}
@-o-keyframes slider-left-2{0%{transform: translateX(-200px);opacity: 0;}
100%{transform: translateX(0px);opacity: 1;}}
.slider-banner .active .itemmain .itemmain-word .word-btn{-webkit-animation: slider-top .5s ease-in-out 0.4s forwards;animation: slider-top .5s ease-in-out 0.4s forwards;}
@keyframes slider-top{0%{transform: translateY(40px);opacity: 0;}
100%{transform: translateY(0px);opacity: 1;}}
@-webkit-keyframes slider-top{0%{transform: translateY(40px);opacity: 0;}
100%{transform: translateY(0px);opacity: 1;}}
@-moz-keyframes slider-top{0%{transform: translateY(40px);opacity: 0;}
100%{transform: translateY(0px);opacity: 1;}}
@-o-keyframes slider-top{0%{transform: translateY(40px);opacity: 0;}
100%{transform: translateY(0px);opacity: 1;}}
.slider-banner .active .itemmain .itemmain-img{-webkit-animation: alltuchtopdown 1.5s ease-in-out 0s infinite alternate;animation: alltuchtopdown 1.5s ease-in-out 0s infinite alternate;-webkit-animation-duration: 2.5s;animation-duration: 2.5s;}


@media (max-width: 767px)  {
.slider-banner .slider-btn{top: calc(50% -25px) !important}
.slider-banner .itemmain .itemmain-contains{left: 10px;right: 10px;height:100%;top: 0px;} 
.slider-banner .itemmain .itemmain-word{width: 55%; margin-left:70px;}
.slider-banner .itemmain .itemmain-word .word-1{line-height: 30px;font-size: 24px;}
.slider-banner .itemmain .itemmain-word .word-2{line-height: 36px;font-size: 30px;margin-top: 20px; font-weight:normal;}
.slider-banner .itemmain .itemmain-word .word-btn{margin-top: 20px;}
.slider-banner .slider-btn{width:40px !important; height:40px !important;}


}

/*右側快捷按鈕*/
.RightModelBtn{position: fixed;bottom: 160px;right: 5px;z-index: 50;text-align: center;}
.RightModelBtn .item{margin: 10px 0;overflow: hidden;width: 48px;height: 48px;}
.RightModelBtn .item-main{font-size: 12px;cursor: pointer;line-height: 14px;position: relative;border-radius: 50%;background: var(--teal)}
.RightModelBtn .item .svgIcon{width: 48px;height: 48px;padding: 12px; display:block;}
.RightModelBtn .item .word{color: #fff;width: 48px;height: 48px;line-height: 14px;background: var(--site-colorB);position: absolute;top: 0;left: 0;border-radius: 50%;-webkit-transform-origin: -50% 50%;transform-origin: -50% 50%;-webkit-transform: rotate3d(0, 0, 1, 90deg);transform: rotate3d(0, 0, 1, 90deg);-webkit-transition: -webkit-transform .3s ease-in;transition: transform .3s ease-in;}
.RightModelBtn .item:hover{border-radius: 3px;}
.RightModelBtn .item:hover .item-main{border-radius: 3px;}
.RightModelBtn .item:hover .word{-webkit-transform: rotate3d(0, 0, 1, 0deg);border-radius: 3px;transform: rotate3d(0, 0, 1, 0deg);-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}

.RightModelBtn .item:nth-child(1) .item-main{background: var(--teal)}
.RightModelBtn .item:nth-child(1) .word{background: var(--green)}

.RightModelBtn .item:nth-child(2) .item-main{background:#007bff}
.RightModelBtn .item:nth-child(2) .word{background:#6a77f1}

.RightModelBtn .item:nth-child(3) .item-main{background:#d53c8e }
.RightModelBtn .item:nth-child(3) .word{background:#cf2e2e}

.RightModelBtn .item:nth-child(4) .item-main{background:#ff6900 }
.RightModelBtn .item:nth-child(4) .word{background:#fcb900}

@media (max-width: 767px)  {
.RightModelBtn .item,
.RightModelBtn .item .svgIcon,
.RightModelBtn .item .word{width:40px; height:40px;}

}