@charset "utf-8";

/* CSS Document */
body{font-family:'Lato','微軟正黑體',sans-serif;font-size:16px;line-height:1.5;color:#333;background: #8a8ea6;}
a{color:#000;text-decoration:none}
a:hover{color:#777;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}

/*---------------------- 基礎設定 ----------------------*/
/*反白設定
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
*/
.aleart_line{border-color: #d40023;}
.red{color: #d40023;}
/* 回頂端 */
#goTop{border:1px solid #CCC;color:#aaa;background:#FFF;text-align:center;position:fixed;bottom:20px;right:20px;width:50px;height:50px;line-height:50px;cursor:pointer;display:none;font-family:Verdana,Geneva,sans-serif;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;-webkit-box-shadow:#EEE 0 0 5px;-moz-box-shadow:#EEE 0 0 5px;box-shadow:#EEE 0 0 5px}
#goTop:hover{background:#999;color:#FFF}

/*按鈕*/
.btnWrap { margin:2em 0; text-align:center; }
@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}
}

/*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}
}

/*---------------------- 頁面開始 ----------------------*/
/*page number*/
.page-number{
    margin-top: 50px;
}
.pagination{display: block;}
.pagination>li{display: inline-block;}
.pagination>li>a{border:none;color: #fff;transition: all .5s;padding: 5px 10px;}
.pagination>li>a:hover{color: #fff;}
.pagination>li.on a{background: #fff;color: #0e1c73;border-radius: inherit;}


p,figure{margin-bottom:0;}
/*標題*/
.main-title h2{font-family: 'Vidaloka', serif;color: #00079f;font-size: 2.6rem;display: inline-block;vertical-align: middle;}
.main-title h3{display:inline-block;font-size: 1rem;font-weight: 700;letter-spacing: 3px;position: relative;margin-left: 5px;}
.main-title h3 span{color:#fff;position:relative;margin-right: 6px;z-index: 2;}
.main-title h3 span:before{content:'';position:absolute;left: -5px;bottom: -2px;width: 25px;height: 25px;background: #000000;z-index: -1;border-radius: 100%;}

.main-title.index{padding: 15px 0 10px 0;border-top:1px solid #fff;border-bottom:1px solid #fff;}

/*主選單*/
header{position:fixed;top:0;left:0;width:100%;background: rgb(255 255 255 / 65%);z-index: 10;}
header.fixed img{max-width:200px}
.navbar{justify-content: center;}
.navbar-brand img{max-width:250px;transition: all .5s;}
.mem-login{list-style:none;padding-left:0;display:flex;position: absolute;right: 16vw;}
/*按鈕*/
.btn-style{background:#00079f;padding: 10px 20px;color: #fff;display: inline-block;cursor: pointer;}


/*首頁*/
.news-zone{padding: 3rem 0;}
.news-list{display: grid;grid-template-columns: repeat(2,1fr);grid-gap: 1rem;margin-bottom: 2rem;}
.news-item{display: flex;padding: 1rem;border: 3px solid #ccc;color: #fff;}
.news-item:hover{border: 3px solid #212068;box-shadow: 0px 10px 10px rgb(0 0 0 / 25%);color: #fff;}
.news__imgBox{max-width:40%;overflow: hidden;position:relative}
.news__imgBox span{position:absolute;z-index: 1;top: 50%;left: 50%;transform: translate(-50%, 0);color: #ffc800;opacity: 0;transition: all .5s;}
.news-item .news__imgBox img{transition: all .5s;}
.news-item:hover .news__imgBox img{transform:scale(1.1)}
.news__imgBox:before{content: '';position: absolute;left: 0;bottom: 0;width: 100%;height: 100%;background: rgb(0 0 0 / 30%);transition: all .5s;opacity: 0;z-index: 1;}
.news__imgBox+.news__textBox{max-width:60%;padding-left: 1rem;display: flex;flex-direction: column;justify-content: space-between;}
.news__textBox{width:100%;padding-left: 0;}
.news__title{font-size: 1.4rem;font-weight: bold;margin: .25rem 0;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.news__txt{font-size: 1rem;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.news__more{text-align:right;padding-right: 1rem;}
.news__more i{position:relative;top: 2px;right: 0;margin-left: .5rem;font-size: 1.1rem;transition: all .5s;}
.news__more span{position:relative}
.news__more span:before{content:"";width: 10px;height: 10px;border-radius: 50%;background: #54586a;position: absolute;left: -17px;top: 7px;opacity: 0;transition: all .5s;}
.news-item:hover .news__more i{right:-5px}
.news-item:hover .news__imgBox:before{opacity:1}
.news-item:hover .news__more span:before{opacity:1;left: 52px;width: 20px;height: 20px;top: 3px;background: #ffc800;}
.news-item:hover .news__imgBox span{opacity:1;transform: translate(-50%, -50%);}
.ixBtn a{display: inline-block;padding: .5rem 1rem;border-radius: 50px;color: #fff;letter-spacing: 3px;font-weight: bold;font-size: 1.1rem;/* border: 2px solid #00079f; */background: #00079f;transition: all .5s;}
.ixBtn{text-align:center}
.ixBtn a:hover{box-shadow: 0px 10px 10px rgb(0 0 0 / 25%);}
.page-zone .ixBtn{margin:2rem 0}
.news__top{display: flex;align-items: center;}
.news__top .tag{background: #9f0000;margin-left: 10px;padding: 5px 10px 4px;font-size: .9rem;line-height: 1;}

.case-zone{display: grid;grid-template-columns: repeat(3,1fr);grid-column-gap: 10px; /* 設定左右間距 */grid-row-gap: 10px; /* 設定上下間距 */margin: 30px 0;}
.case-zone a .location{position:relative;padding-left: 20px;}
.case-zone a .location:before{content: "\f3e7";font-family: bootstrap-icons !important;left: 0;position: absolute;display: inline-block;}
.case-zone a{padding:10px;color:#fff;}
.case-zone a h3{font-size:1.4rem;font-weight:bold;margin-top: 10px;}
.case-zone a figure{overflow:hidden;position: relative;}
.case-zone a figure img{transition:all .5s}
.case-zone a figure:before{content:'';position:absolute;left:0;bottom: 0;width:100%;height:100%;background: rgb(0 0 0 / 30%);transition: all .5s;opacity: 0;z-index: 1;}
.case-zone a .moreBtn{position:absolute;top: 65%;left: 50%;transform: translate(-50%,50%);z-index: 1;font-size: 1.2rem;color: #ffc800;transition: all .5s;opacity: 0;}

.case-zone a:hover .moreBtn{top:50%;opacity:1;}
.case-zone a:hover {background: #212068;box-shadow: 0px 10px 10px rgb(0 0 0 / 25%);}
.case-zone a:hover figure img{transform: scale(1.1);}
.case-zone a:hover figure:before{opacity:1;}
/*問與答*/
.qa-zone{min-height: 90vh;background-color:#172d56;display: flex;align-items: center;justify-content: center;padding: 150px 0;}
.case-info{position: initial;/* display:flex; */color: #fff;width: 250px;display: inline-block;/* position: sticky; */top: 150px;}
.case-info img{max-width:250px;}
.case-name h3{font-size:1.4rem;font-weight:bold;margin-top:15px}
.qa-list-outer{color:#fff;width: calc(100% - 300px);display: inline-block;vertical-align: top;float: right;margin-left: 50px;position: relative;}
.qa-title h3{font-size: 1.2rem;font-weight: bold;margin-bottom: 0;display: flex;align-items: center;width: calc(100% - 25px);}
.qa-zone:after{content:'';display:block;clear:both;}
.qa-list-outer:before{content:'';position:absolute;left: -25px;bottom:0;width:1px;height:100%;background: rgb(255 255 255 / 35%);}
.qa-box{background: rgb(255 255 255 / 25%);margin-bottom: 15px;transition: all .5s;}
.qa-title{padding:10px;display: flex;cursor: pointer;}
.qa-title:after{content: "\f282";font-family: bootstrap-icons !important;display: inline-block;width: 25px;}
.qa-answer{display:none;padding: 20px;}
.qa-box.active .qa-title,.qa-box:hover .qa-title{background:#00079f}
.title-icon,.answer-icon{color:#053657;font-size: 1.3rem;background-color: #ffb000;width:2.5rem;height:2.5rem;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:1000px;margin-right:1rem;font-weight:700;}
.answer-icon{background:#053657;color:#fff;float: left;}
.qa-box .qa-answer{padding: 10px;display: none;}
.qa-box .qa-answer p{display:inline-block;width: calc(100% - 3.5rem);}
.sidebar {justify-content: center;align-content: center;}
.sidebar button {display: none;}
#sidenav ul{display: flex;justify-content: center;padding: 0;}
#sidenav ul li{padding: 10px;margin:10px;list-style:none;background: #00079f;padding: 10px 20px;cursor: pointer;}
#sidenav ul a{color:white;}
.questioncategory{display:grid;}
.form-question{width:100%;padding:6px;}
#sidenav ul li.active,#sidenav ul li:hover{background:#ffb000}



/*提問表單*/
.form-close{color:#fff;font-size:1.4rem;position:absolute;top: 5%;right: 20%;cursor: pointer;}
.contact-form{position:fixed;width: 100%;height: 100%;top: 0;left: 0;bottom: 0;z-index: 11;display: none;}
.contact-form form{max-width:800px;margin:0 auto;background: #fff;padding: 50px;margin-top: 100px;}
.contact-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background: rgb(0 0 0 / 60%);z-index: 10;display: none;}
/*會員登入*/
.member-zone{min-height: 90vh;background:url(../images/member/login-bg.jpg)no-repeat center/cover;display: flex;align-items: center;justify-content: center;}
.mem-form{background: rgb(255 255 255 / 85%);max-width:800px;padding: 50px 100px;margin: 0 auto;}
/*頁尾*/
.ft-inner{display: flex;justify-content: center;}
footer{background: #000000;color:#fff;padding:20px;/* text-align:center; */}
footer ul{margin-bottom:10px;padding-left:0;list-style:none;margin-bottom: 0;}
footer ul li{display:inline-block;padding-right: 20px;}
footer a{color: rgb(255 255 255 / 50%);font-size: .8rem;}
footer a:hover{color:rgba(255,255,255,1); text-decoration:none;}
.copyright{font-size: .8rem;color: rgb(255 255 255 / 50%);}
.ft-right{margin-left: 70px;}
.fLogo{max-width:200px;}

@media screen and (max-width:768px) {
    /*問與答*/
    .qa-list{width:100%;float:inherit;margin-left:0;}
 

}
/*新聞中心*/
.page-zone .news-zone{padding-bottom:0}
.page-zone{padding-top:100px;background: #172d56;min-height: calc(100vh - 107px);color: rgb(255 255 255 / 80%);padding-bottom: 80px;}
.page-zone .news-item{background:rgb(255 255 255 / 25%);border: none;}
.page-zone .news-item:hover{background: rgb(174 182 196);color: #2d2f33;}
/*六圖文*/
.news-detail-zone{background:rgb(255 255 255 / 25%);margin: 3rem 0;padding: 1.5rem;box-shadow: 0px 10px 10px rgb(0 0 0 / 25%);}
.news-list-date{width: 75px;text-align: center;height: 75px;display: flex;flex-direction: column;margin-right: 1rem;color: #fff;justify-content: center;}
.news-list-date span{font-size:2rem;font-weight: bold;}
.page-title{display:flex;align-items: center;border-top: 1px solid;border-bottom: 1px solid;padding: .5rem;margin-bottom: 1rem;}
.page-title h2{margin-bottom:0;border-left: 2px solid;padding-left: 1rem;}
.page-content table { max-width:100%; }
.imgg { max-width:100%; display:block; margin:1em 0; }
.imgg2 { max-width:100%; display:block; }
.tx01 { clear: both; margin-bottom:2em;}
.tx01 img{max-width:100%;height: auto !important;}
.tx02 { clear: both; overflow:hidden; margin-bottom: 2em;}
.tx01 img {margin-bottom: .5em;margin-top: .5rem;}
.img-left,.img-left1 { float: left; padding-bottom: 1em; padding-right: 2em;max-width:50%;}
.img-right,.img-right1 { float: right; padding-bottom: 1em; padding-left: 2em;max-width:50%;}
.img_center{width: 33.3%; }
.img-left img, .img-right img { max-width:100%; }
.img-left1 img, .img-right1 img { max-width:100%; }
.img_center img {  float: left;  padding: 1em;  width: 100%;   text-align: center;}
.img-left:only-child,.img-right:only-child{float:none;padding: 0;margin: auto;max-width: inherit;text-align: center;}
@media (max-width: 768px) { 
.page-content iframe { height:400px; }
}

@media (max-width: 768px) { 
	.page-title{flex-direction: column;align-items: flex-start;}
	.news-list-date{flex-direction: row;width: inherit;height: inherit;align-items: flex-end;}
	.page-title h2{padding:0;border-left: none;padding-top: .5rem;}
	.news-list-date span{font-size: 1rem;margin-left: .25rem;font-weight: inherit;}
	.page-content iframe { height:320px; }
	.img-left, .img-right, .img-left1, .img-right1 { float:inherit; padding-right: 0; padding-left: 0;}
	.img-left, .img-right, .img_center,.img-left1, .img-right1 { display:block; width:100%; max-width:inherit; }
}

@media (max-width: 480px) { 
.img-left,.img-left1,.img-right,.img-right1 { float:inherit; padding: 0 0 1em 0;}
.page-content iframe { height:250px; }
}

/*----------------------RWD調整------------------*/
@media screen and (max-width:1680px) {


}

@media screen and (max-width:1480px) {
	

}
@media screen and (max-width:1280px) {
	/*內文*/
	.main-title h3 {font-size: 2rem;}
	.main-title h3 span:before {content: '';position: absolute;left: -8px;bottom: -4px;width: 48px;height: 48px;
    background: #000000;z-index: -1;border-radius: 100%;}
    /*頁尾*/
    .ft-inner {justify-content: left;}
    .ft-right {margin-left: 200px;}
    footer ul li {display:grid;padding-right:inherit;}
    .img-fluid .footerlogo{width:150px;}
	/*登入頁*/
	.block-height.member-zone {padding-top:150px;min-height: 90vh;background: url(../images/member/login-bg.jpg)no-repeat center/cover;display: flex;
    align-items: center;justify-content: center;}
    /*問題頁*/
}
@media screen and (max-width:991px) {
	/*內文*/
	.main-title h2{font-size:3rem;}
	.main-title h3 {font-size: 2rem;}
	.main-title h3 span:before {content: '';position: absolute;bottom:inherit;width:42px;height: 42px;
    background: #000000;z-index: -1;border-radius: 100%;}
    .case-zone {display: grid;grid-template-columns: repeat(1,1fr);}
   	/*產品照片*/
    .case-zone a figure img {width: 100%;}
    /*產品照片文字*/
    .case-zone a h3,.case-zone a .location {text-align: center; font-size: 1.8rem;}
	.case-zone a .location:before {position:inherit;}
	.case-zone a .location {font-size: 1.4rem;}
	/*頁尾*/
	/*footer {padding:30px;}*/
	.ft-inner {display:inherit;}
	.ft-left{text-align: center;justify-content: center;padding:10px;}
	
	.ft-left{text-align: center;justify-content: center;padding:10px;}
	.ft-right {margin-left: 0px;padding:5px;text-align:center;width: 100%;}
	footer ul li {display:grid;padding-right:inherit;} 
	/*登入頁*/
	.block-height.member-zone {padding-top:110px;min-height: 90vh;background: url(../images/member/login-bg.jpg)no-repeat center/cover;display: flex;
    align-items: center;justify-content: center;}
    /*問題頁*/  

	/*新聞專區*/
	.news-list{grid-template-columns: repeat(1,1fr);}
}
@media screen and (max-width:768px) {
	/*內文*/
	.main-title h2{font-size:2.5rem;}
	.main-title h3 {font-size: 1.8rem;}
	.main-title h3 span:before {content: '';position: absolute;left: -4px;bottom:inherit;width: 38px;height: 38px;
    background: #000000;z-index: -1;border-radius: 100%;}
    .case-zone {display:grid;grid-template-columns: repeat(1,1fr);}
   	/*產品照片*/
    .case-zone a figure img {width: 100%;}
    /*產品照片文字*/
    .case-zone a h3,.case-zone a .location {text-align: center; font-size: 1.6rem;}
	.case-zone a .location:before {position:inherit;}
	.case-zone a .location {font-size: 1.2rem;}
	/*頁尾*/
	footer {padding:30px;}
	.ft-inner {display:inherit;}
	.ft-left{text-align: center;justify-content: center;padding:10px;}
	
	.ft-left{text-align: center;justify-content: center;padding:10px;}
	.ft-right {margin-left: 0px;padding:5px;text-align:center;width: 100%;}
	footer ul li {display:grid;padding-right:inherit;} 
	/*登入頁*/
	.block-height.member-zone {padding-top: 100px;min-height: 90vh;background: url(../images/member/login-bg.jpg)no-repeat center/cover;display: flex;
    align-items: center;justify-content: center;}
    .mem-form {background: rgb(255 255 255 / 85%);max-width: 800px;padding: 30px 50px;margin: 0 auto;}
	/*問題頁*/
	.case-info{width: 100%;display: block;text-align: center;}
	.qa-list-outer { width:inherit;display:inherit;}
    .qa-list-outer:before{top: 0;left: 0px;height: 1px;width: 100%;margin-top: 10px;}
    .sidebar {width: 100%;float: inherit;top: 80px;text-align: center;}
	.sidebar button{display: block;width: 100%;padding: 10px;margin-top:30px;margin-bottom:30px;border: none;background: #00079f;
    color: #fff;}
    .sidebar ul li a {display: inline-block;color:white;}
    #sidenav ul {display: inherit;}
}
@media screen and (max-width:640px) {
	/*主選單*/
	.navbar>.container{justify-content:center;}
	.navbar-brand img{max-width:150px;margin:0 auto;}
     /*首頁-banner*/
     .slick-initialized .slick-slide {margin-top:100px;}
     /*內文*/
    .main-title h2{font-size:2rem;}
    .main-title h3 {font-size: 1.5rem;}
    .main-title h3 span:before{content: '';position: absolute;left: -3px;width: 30px;height: 30px;bottom: 0.3px;
    background: #000000;z-index: -1;border-radius: 100%;}
	/*產品照片*/
	.case-zone {display: grid;grid-template-columns: repeat(1,1fr);}
	/*產品照片文字*/
	.case-zone a h3,.case-zone a .location {text-align: center;}
	.case-zone a .location:before {position:inherit;}
	/*頁尾*/
	.ft-inner {display:inherit;}
	.ft-right {margin-bottom: 60px;}
	.ft-left{text-align: center;justify-content: center;padding:10px;} 
	.ft-right {margin-left: 0px;padding:5px;text-align:center;width: 100%;}
	footer ul li {display:grid;padding-right:inherit;}
	/*登入頁*/
	.block-height.member-zone {padding-top: 100px;min-height: 90vh;background: url(../images/member/login-bg.jpg)no-repeat center/cover;display: flex;
    align-items: center;justify-content: center;}
    .mem-form {background: rgb(255 255 255 / 85%);max-width: 800px;padding: 30px 50px;margin: 0 auto;}
	/*問題頁*/
	.case-info{width: 100%;display: block;text-align: center;}
	.qa-list-outer { width:inherit;display:inherit;}
    .qa-list-outer:before{top: 0;left: 0px;height: 1px;width: 100%;margin-top: 10px;}
	.mem-login{right: 3vw;list-style: none;padding-left:0;display:block;position:relative;margin:auto;}
	.sidebar {width: 100%;float: inherit;top: 80px;text-align: center;}
	.sidebar button{display: block;width: 100%;padding: 10px;margin-top:30px;margin-bottom:30px;border: none;background: #00079f;
    color: #fff;}
    #sidenav ul {display: inherit;}
    .sidebar ul li a {display: inline-block;color:white;}	
	/*選單頁*/
	.contact-form{overflow-y:auto;}
	.form-control {min-height:inherit;}
    .contact-form form {padding: 30px;margin-top: 80px;}
    .btnWrap {margin: 1em 0;}
	/*新聞專區*/
	.news-item{flex-direction: column;}
	.news__imgBox,.news__textBox{max-width: 100%;}
	.news__imgBox+.news__textBox{max-width:100%;padding-left: 0;padding-top: 1rem;}

}