@charset "utf-8";
@media screen and (min-width: 991px) and (max-width: 1025px) {
section.parallax{padding:25% 0}
section.parallax h1{font-size:40px}
.modal.in .modal-dialog,.modal .modal-dialog{width:82%!important}
}
@media screen and (max-width:1023px) {
.navbar-brand img.logo.logo-display{display: none;}
}
@media screen and (max-width:992px) {
.navbar-toggle i{font-size:22px}
nav.navbar.bootsnav .navbar-toggle{margin-top:18px}
nav.navbar.bootsnav ul.nav > li > a:hover:after,nav.navbar.bootsnav ul.nav > li.active > a:after{left:15px;bottom:40%;transform:rotate(90.0deg);border-width:8px}
nav.navbar.bootsnav ul.nav > li > a{padding:15px 15px 15px 25px}
nav.navbar.bootsnav ul.nav > li > a:last-child{border-bottom:none}
section.parallax .intro{width:100%}
.about img.with100{margin-bottom:30px}
.about .btn{width:100%;margin-left:0}
section.parallax{padding:22% 0}
.imgbox{height:165px}
.member .smalltext{text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden}
nav.navbar.bootsnav ul.nav > li > a span{ -webkit-transform: scale(0.9);transform: scale(0.9);left: -5%;position: relative;}
}
@media screen and (min-width: 768px) and (max-width: 979px) {
section.parallax.parallax-1{background-position:center}
section.parallax h1{font-size:36px}
section.parallax .intro{top:45%}
.btm-svg,.top-svg{display:none}
section.parallax.parallax-1{height:90vh}
.about .btn{width:70%;margin-left:15%}
.popup-detail .col-sm-6{width:100%}
.popup-detail{padding: 0 10% 150px;}
button.close{right: 12%;}
nav.navbar.bootsnav ul.nav > li > a span{font-family: 'Lora', serif, Helvetica, Arial,'微軟正黑體'}
}
@media screen and (max-width: 767px) {
section.parallax{padding:33% 0 25%}
section.parallax h1{font-size:36px}
.imgbox{height:200px}
.section,#service{padding:50px 0}
.contact-info{text-align:center;margin-bottom:30px}
section.parallax.parallax-1{height:90vh;max-height:700px;background-position:center}
.btm-svg,.top-svg{display:none}
.about .btn{width:70%;margin-left:15%}
.popup-detail .col-sm-6{width:100%}
.popup-title .title h2{font-size:38px}
.popup-title p{font-size:13px;padding:2px 10px}
.popup-detail{padding: 0 10% 150px;}
button.close{right: 0%;}
nav.navbar.bootsnav ul.nav > li > a span{font-family: 'Lora', serif, Helvetica, Arial,'微軟正黑體'}
}
@media screen and (max-width: 560px) {
#canvas{display:none}
section.parallax h1{font-size:26px;text-shadow:0 -2px 3px rgba(0,0,0,0.65)}
section.parallax-2 h1{font-size:22px}
.parallax-1 h4,.parallax-2 .container h4{font-size:16px}
#team .col-xs-6{width:100%}
.imgbox{width:50%;display:inline-block;height:155px;vertical-align:top;float:left}
.member{margin-bottom:20px;display:inline-table;background:#ececec;width:100%}
.member-intro{width:50%;display:inline-block;line-height:1;overflow:hidden;height:155px;overflow:hidden;vertical-align:top}
#team .col-xs-6:nth-child(even) .member .member-intro{float:left}
#team .col-xs-6:nth-child(even) .member .imgbox{float:right}
section.parallax.parallax-2{background-attachment:inherit;height:40vh;background-image:url(../img/image2-2.jpg);padding:36% 0 0}
.parallax-2 .mask-index{opacity:.1;background-color:#000}
section.parallax .intro{top:60%}
.scroll-down{padding-top:50px}
.scroll-down::before{height:50px}
section.parallax{padding:25% 0}
.parallax-2 .container h4{margin-top:5px}
.txt-mask{position:absolute;width:100%;bottom:0;left:0;height:60px;overflow:hidden;display:block}
.member:hover .member-intro{background:#ececec}
.member:hover .name,.member:hover .smalltext{color:#1a1a1a}
.member:hover .imgbox img{width:100%}
.member:hover .imgbox .icon{display:30%}
.txt-mask{width:100%}
#service .col-xs-6{width:100%}
#service{padding:50px 0 15px}
.title h2{font-size:22px}
.title h2 span{font-size:14px;line-height:1.2}
.about p{font-size:13px}
.smalltext{font:14px/1.3 微軟正黑體,Microsoft JhengHei,Arial,sans-serif; line-height:1.3em; height:auto}
.service-item{margin-bottom:15px}
.title{margin-bottom:30px}
section.parallax.parallax-1{background-attachment:inherit;height:80vh}
header{height:60px}
.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{padding:15px 15px 13px}
section.parallax-1 .intro{top:49%}
.parallax-1 h4{top:52%;text-shadow:1px -1px 9px rgba(0,0,0,0.8)}
.parallax-1 .mask-index{opacity:1;background-color:rgba(0,0,0,0.1)}
.slide--up{-webkit-transform:translateY(0%);-ms-transform:translateY(0%);transform:translateY(0%)}
.section,#service,#contact{padding:40px 0}
#about,#team{padding:40px 10px}
nav.navbar.bootsnav.navbar-fixed .logo-scrolled{height:28px}
nav.navbar.bootsnav .navbar-toggle{margin-top:13px}
.popup-title .title h2{font-size:32px}
.title h2 span{margin-right:4px}
.popup-title p{font-size:12px;padding:1px 10px}
.hero{height:200px}
.hero .pics li{width:300px;height:200px}
.hero .pics li img{height:100%}
.popup-detail{margin-top:15px}
.lazy-line svg{ width:60px;    margin-top: -60px;margin-left: -30px;}
.member .smalltext {-webkit-line-clamp: 4;}
}
@media screen and (max-width: 420px) {
.member-intro, .imgbox{ height: 145px}
}
@media screen and (max-width: 400px) {
.member-intro,.imgbox{height:135px}
.parallax-1 h4,.parallax-2 .container h4{font-size:15px;display:inline-block;width:100%;text-align:center}
.name{padding-top:30px;font-weight:700}
.member .smalltext{display:none}
.member{width:100%}
.popup-detail p{margin-bottom:15px}
.popup-detail p.profile_detailTtl{margin:0 0 7px}
.modal.in .modal-dialog,.modal .modal-dialog{width:100%!important;margin:0}
.popup-detail{padding:0 8% 150px}
.popup-title{padding-left:7%}
.popup-page .popup-title img{width:115%}
}
@media screen and (max-width: 350px) {
section.parallax h1{font-size:20px}
.member-intro,.imgbox{height:110px}
.name{padding-top:20px;font-weight:700}
.txt-mask{display:none}
.popup-title .title h2{font-size:26px}
.popup-title p{line-height:1.8;padding:0 6px;margin-bottom:5px}
}