@charset "utf-8";
*{user-select:none;}
html,body{margin:0;height:100%;  min-height:100%;}
a,a:focus,a:visited,a:hover{text-decoration: none;color:black;}
text{font-weight: bold;}
main{
  display:flex;
  justify-content:space-between;
  width:100%;
  height:100%;  
}
/*#iframe01{pointer-events:none;}*/
#sidebar_l{
  width:23.5%;
  height:100%;
  font-size:26px;
  display:block;
  background-color:rgba(7, 7, 7, 0.95);
  color:#fff;
  font-family:Arial,Noto_Sans_TC_r;
  position: relative;
}
svg{height:auto;position: relative;top:0;}
#sel_2,#sel_3,#sel_4,#sel_5{
  display:flex;align-items:center;  text-align: center;margin:15px auto;color:black;border:1px solid #BFBFBF;width:22vw;border-radius:10px;
}
#sel_2 p,#sel_3 p,#sel_4 p,#sel_5 p{margin-bottom: 0;font-weight: bold;}
.sel_lg{display:flex;justify-content: center;cursor:pointer;}
.sel_lg_m{display:flex;justify-content: center;}
/*#ad1,#ad2{display:inline-block;width:22vw;height:20vh;border:1px solid #BFBFBF;margin:10px;}*/
/*#disp_lg{display:flex;flex-direction:column; width:75%;height:100vh;margin:0;position:relative;margin-top:3px;}*/
#disp_lg{display:flex;width:76.5%;height:100%;position:relative;align-self: center;}
iframe{border-left:2px solid #fff;border-right:2px solid #fff;}
.disp_lg iframe{width:100%;height:100%;position:absolute;top:0;}
#logout_btn,#mlogout_btn{background-color:#229BEC;color:white;border:none;border-radius:5px;padding:1px 5px 1px 5px;cursor:pointer;}
#login_btn{background-color:#229BEC;color:white;border:none;border-radius:5px;padding:1px 5px 1px 5px;cursor:pointer;}
#display{width:100%;height:100%;margin:0;}
.disp_lg{width:100%;height:100%;position: absolute;display:none;}

/* slider - desktop/laptop廣告區 */
#slides{position:relative;width:100%;height:100%;z-index:1;}
.slide{width:100%;height:100%;position:absolute;z-index:2;display:flex;align-content:center;}
.slide img{
  display:flex;
  margin:auto; 
  width:100%;
  height:100%;
  object-fit:cover;
}
.slide_text{
  width:98%;margin:6px 1%;
  position:absolute;bottom:0;z-index:10;color:#ffffff;
  background-color:rgba(0,0,0,0.6);
  padding:1em;
}
.slide_text a,.slide_text a:visited,.slide_text a:link{color:#ffffff;}
.slide_title{font-size:2em;font-weight: bold;/*  text-shadow: 3px 3px #415F7A;*/}
.slide_content{font-size:1.3em;color:#ffffff;/* text-shadow: 2px 2px #415F7A;*/}

/* 廣告AD */
#ad1{width:400px;height:300px;position:absolute;bottom:0;right:0;z-index:3;background-color:#000;margin:0;border:1px solid #BFBFBF;}
#ad2{
  position:fixed;bottom:0;z-index:5;background-color:#000;    
}
#ad1 .ads{
  width:100%;height:100%;
}
#ad2 .ads{
  width:100vw;height:calc(75vw / 2);overflow:hidden;border-top:1px solid #fff;border-left:1px solid #fff;
  border-right:1px solid #fff;
}
#ad2_btn{display:flex;width:100%;padding:0;}
#ad2_btn>*{display:flex;flex:1;border:none;text-decoration: none;background-color:transparent;justify-content: center;color:#000;border:1px solid #fff;padding:0.3em;font-size:1.3em;}
#ad2_btn>*:first-child{border-right:none;}
.closead{
  position:absolute;top:2px;right:2px;border:none;
  background-color:transparent;padding:0;z-index:3;
}
.closead>i{font-size:2em;color:#fff;}
.ad{width:100%;height:100%;}
.ads a img,.ads div img,.ads a video,.ads div video{
  height:100%;
  width:100%;
  object-fit:contain;
  object-position:50% 50%;
}


/* sign-in */
#login{
  display:flex;
  width:100%;
  height:5%;
  font-size:18px;
  margin-top: 4px;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
.welcome_msg{
  /*margin-right:10px;*/
  display:flex;
  flex-wrap: wrap;
  font-size:2rem;
}
.error_msg{margin-top:20px;  color:#F52A36;}

.welcome_enter { 
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
	  width:100%;
    height:6%;
    /*background-color: black;*/
    background-color:rgb(19,29,13);
	  color:white !important;
	  align-items: center;    
    line-height:1.3em;
    font-size:18px;    
}
.welcome_enter img{display:flex;align-self:center;height:50px;}
.welcome_msg{font-size:24px;}
footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
	  width:23.5%;     
    height:50px;
    z-index: 3;
    position: fixed;
    bottom: 0;
    background-color: #131D0D;
}
footer p{display:flex;justify-content: center;align-items: center;}
/*footer p:nth-child(1){height:36px;margin:0 ;}
footer p:nth-child(2){height:24px;margin:0;font-size:0.8em;}*/
/*footer a:first-child{
	width:40%;
	height:70%;
	margin:auto;
	text-align: center;
	font-weight: bold;	
	color:white !important;
	display: flex;
	justify-content:center;
	align-items: center;	
  font-size: 0.8em;
}
footer a:last-child{
  width:60%;
  height:70%;
  margin:auto;
  text-align: center;
  font-weight: bold;  
  color:white !important;
  display: flex;
  justify-content:center;
  align-items: center;  
  font-size:0.78em;
  font-weight:normal;
}*/
footer>p{width:100%;}
/*footer>p>span:first-child{
  width:60%;
  text-align:center;
}
footer>p>span:last-child{
  width:40%;
  text-align: center;
}
footer>p>span:last-child>a{width:100%;height:100%;}
.footer_active,.footer_active:hover{
	background-color: #000000;
	color:white;
    font-size:20px;
}*/

#status{width:80%;text-align: right;}
#oauth,#fistek_login{
  display:flex;
  flex-direction: column;
  text-align: center;
  margin-top: 20px;
}
#g_login,#f_login{margin:auto;margin-top:10px;}

#customBtn {
  display:inline-block;
  background: white;
  color: #444;
  width: 190px;
  border-radius: 5px;
  border: thin solid #888;
  white-space: nowrap;
}
#customBtn:hover {
  cursor: pointer;
}
span.buttonText {
  display: inline-block;
  vertical-align: middle;
  padding-left: 42px;
  padding-right: 42px;
  font-size: 14px;
  font-weight: bold;
  /* Use the Roboto font that is loaded in the <head> */
  font-family: 'Roboto', sans-serif;
}
#f_login{
  display:flex;
  background-color:#4267B2;
  width:250px;
  height:50px;
  border: none; 
  align-items: center;
}
#f_login img{height:30px;width:30px;margin-left:8px;}
#f_login div{
  background-color: transparent;
  color:white;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
}
#f_login div p {width:100%;width:202px;margin-bottom: 0;}
#fistek_login{
  height:90vh;
  background: url('../images/login_bg1.png') no-repeat 0 bottom;
  background-size:contain; 
}

  #sel_2_xs,.sel_2_xs,.mark{
    height:10vh;display:flex;margin:10px auto;
    font-weight:600;border:3px solid #ffffff;

  }  
	#sel_2_xs p,.sel_2_xs p,.mark p{font-size: 26px;line-height:10vh;}
	#sel_2_xs img,.sel_2_xs img,.mark img{height:42px;align-self: center;}
/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* 2022-10-11 新增-公司形象廣告&廠商贊助廣告區 */

#apq,#ans{
  display:flex;width:100%;margin:auto;/*overflow:hidden;*/font-size:22px;
  align-items:center;align-content: stretch;
}
#apqm,#ansm{font-size:20px;}
#apq{min-height:130px;max-height:165px;}
#ans{height:100px;}

#apq button,#ans button{background-color:transparent;border:none;}
#apq button i,#ans button i{font-size:1.8em;color:rgba(125,125,125,0.3);}
#apq button.active i,#ans button.active i{color:#fff;}
.apqlst,.anslst{position: relative;box-sizing:border-box;}
.apq,.ans{width:100%;height:100%;position:relative;
  display:flex;flex-direction: column;
}
.ans{align-items:center;cursor:pointer;}
.apq>p{
  display:flex;justify-content: space-between;margin:10px 0 0;
  padding:5px;background-color:#B5B6B8;color:#000;
  flex-wrap:wrap;
}
#apq .apq>p{font-size:0.88em;}
.apq_T{display:inline-block !important;vertical-align:text-bottom;}
.apq_T>span:nth-child(1){font-size:0.8em;}
.apq>p>span,.apq>div>p>span{display:flex;}
.apq>div>p{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;}
.apq>div>p>span:nth-child(1){display:flex;flex-wrap:wrap;}
.apq>div>p>span:nth-child(2){display:flex;flex-wrap: wrap;justify-content: flex-end }
/*.apq_T{display:inline-block;min-width:4em;}*/
/*.apq>div>p:nth-child(2){display:flex;justify-content:flex-end;}*/
.apqr,.apqg,.apqe{padding:5px;}
.apqr{background-color:#DA294B;}
.apqg{background-color:#52B34F;}
.apqe{background-color:#42556A;}

.news{
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2;
   -webkit-box-orient: vertical; 
   padding-top: 0.5em;
}

#folder_qrcode {display:none;position: absolute;left: 0;right: 0;margin: auto;bottom:50px;width: 200px;height: 40px;background: #2c6b9f;color: white;text-align: center;line-height: 40px;font-size: 0.6em; border-radius: 6px 6px 0 0;cursor: pointer;}


/* 大類選單 */
.items{
  width:100%;margin:0;
  /*max-height:calc(100vh - 455px);min-height:calc(100vh - 485px);*/
  display:flex;align-items: stretch;
}
.item{
  display:flex;  
  width:50%;
  font-size: 22px;
  align-items: center;
  justify-content: center;
  padding:2px;
  position: relative;
}

.item:nth-child(odd):last-child{
  flex:1;
  justify-content: center;
}
.item>a{
  display:flex;justify-content: center;
  align-items: center;
  padding:6px;
  color:rgb(255,204,0) !important;
  background-color:rgb(19,29,13);
  width:6em;
  border:1px solid rgba(7, 7, 7, 0.95);
  position: relative;  
}
.item>a{
  flex:1;
  justify-content: center;
  width:100%;
}
.item span{min-width: 4em;}
.subitem{
  display:none;
  width:600px;
  position: absolute;
  top:-2px;
  /*left:calc(100% + 8px); */
  left:calc(100% + 3px);
  z-index:2;
  background-color:rgb(42, 63,29);
  border:1px solid #A7A7A7;
}
.subitem td{
  padding:0.5em 0.2em;
  
}
.subitem td a, {display:flex;color:rgb(252,242,204)}
.subitem td a:hover{/*color:#B9A35C;*/color:rgb(255,204,0)}
.item:hover > a .subitem,
.menu:hover+.item:hover .subitem{display:table;}

/*桌機media*/
.submenu {
  display: none;
  position: absolute;
  background-color:rgb(42,63,29);
  border:1px solid #A7A7A7;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 10px;
  z-index: 2;
  min-width: 150px;
  transition: all 0.3s ease;
  top:-2px;
  left:calc(100% + 3px);
}
.submenu .item_his {color: #FFCC00 !important;}
.menuA, .menuB {position: relative;padding: 5px 10px;white-space: nowrap;color:rgb(252,242,204);}
.menuA:hover, .menuB:hover {color: rgb(255, 204, 0);/*background-color: #f0f0f0;*/}
.level3 div { padding: 5px 10px; white-space: nowrap; cursor: pointer; color:rgb(252,242,204);}
.level3 div a { color:rgb(252,242,204);}
.level3 a:hover {color: rgb(255, 204, 0);/*background-color: #eaeaea;*/}
.level3 {top: 0;left: 100%;}
.item_m2.item_his {
    color: #FFCC00 !important;
    display: flex;
    justify-content: center !important;
    align-items: center;     
}
#mediaModal .modal-title {color:rgb(255, 204, 0); font-size:22px;}
#mediaModal .modal-body{display:flex;justify-content:flex-start;width:100%;flex-direction: column;text-align: left;font-size:22px;} 

/*手機media*/
.items_m2.media {/*background-color:#3C5A2A;*/margin-left: 5px;border: 1px solid #40652B;}
.tabs { display: flex; cursor: pointer; width:100%; }
.tab {flex: 1; text-align: center; background-color:#2A3F1D; border: 1px solid #40652B; transition: background-color 0.3s;
      padding: 5px 10px;white-space: nowrap;color:#FCF2CC; font-size: 1.5em; }
.tab:hover {background-color: rgba(42, 63, 29, 1);}
.tab.active{color: #FFCC00 !important; background-color: rgba(42, 63, 29, 0.77); border-bottom: none; }
.tab.active:before{content:'✔ ';}
.tab-content { display: none; width:100%; }
.media .tab-content .item_m2  { display: flex; flex-direction: column; }
.timestamp {font-size:0.7em;order: 0;width: auto; color:#ADADAD; }
/*
.item_m2.item_his {color: #FFCC00 !important;justify-content:center !important;align-items:center;}
*/
.item_m2.item_his {
    color: #FFCC00 !important;
    display: flex;
    justify-content: center !important;
    align-items: center;     
}


.items_m,.productm.active + .items_m2, .media .tab-content.active{width:100%;display:flex;justify-content:space-around;flex-wrap: wrap;}
.items_m2{display:none;}
a.item_m{
  width:50%;/*color:#fff;*//*background-color:rgba(135,206,235,0.77);*/
  color:rgb(255,204,0) !important;
  background-color:rgba(19,30,12,0.77);
  display:flex;justify-content: center;
  font-size:1.5em;
  padding:10px;
  border:1px solid #000;
}
/*a.item_m.active{background-color:#90BCB2;}*/
a.item_m2{
  width:50%;
  color:rgb(255,242,204) !important;
  background-color:rgba(42,63,29,0.77);
  display:flex;justify-content: center;
  font-size:1.5em;
  padding:10px;
  border:1px solid #000;
}
.tab-content a.item_m2 {justify-content: flex-start; }
.item2{/*position: absolute;bottom:3px;*/margin-top:1em;}
/*.productm.active{background-color:rgba(98,158,145,0.9);}*/
.productm>i:before{
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; content: "\00a0\f358";
  font-style: normal;
}
.productm.active>i:before{
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; content: "\00a0\f35b";
  font-style: normal;
}
#compintro{
  background-color:rgba(125,125,125,0.3);
  color:#fff;
  font-size:24px;
  display: flex;
  flex-direction: column;
}
.compintro{
  width:100%;
  background-color:rgba(125,125,125,0.3);
}
.compintro>div:not(:last-child) .compdesc{
  /*border-right:1px solid rgba(125,125,125,0.3);*/
}
.compimg{
  position: relative;
  display: block;  
  width:100%;
  margin:0 auto; 
}
.compimg img{  
  width:100%;  
  object-fit:cover;
  object-position: 50% 50%;
  opacity:0.8;
}
.comptitle{
  position: absolute;
  top:20%;
  left:0;
  width:100%;
  height:50%;
  color:#fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:2;
  flex-wrap:wrap;
  font-size: 1.2em;
  /*font-weight:900;*/
}
.comptitle>p{width:100%;display:flex;justify-content:space-between;}
.comptitle>p>span{display:flex;min-width:1.2em;align-items: center;}
.comptitle>p>span:nth-child(2){display: flex;flex: 1;justify-content: center;}
.comptitle>p>span>.fa-arrow-left:before{
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; content: "\00a0\f060";
  font-style: normal;  
  /*color:rgba(125,125,125,0.9);*/
}
.comptitle>p>span>.fa-arrow-right:before{  
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; content: "\f061\00a0";
  font-style: normal;  
  /*color:rgba(125,125,125,0.9);*/
}
/*.comptitle>span{width:100%;text-align: center;margin:0;}*/
.compdesc{
  text-align: center;
  display: block;
/*  min-height:10vh;
  max-height:60vh;*/
  width:100%;
  padding:5px 8px 1em 8px;
  margin:0 auto; 
  overflow:auto;
}
/* Track */

::-webkit-scrollbar-track {

    background-color: #DBE9E8;
    border-radius:10px;
    margin:10px auto;
    border: 3px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;      
}
 
/* Handle */
::-webkit-scrollbar-thumb {

  background:rgba(143,211,211,0.8); 
  /*border:6px solid transparent;*/
  border-radius:10px;
  border: 3px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;  
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background:rgba(143,211,211,0.9); 
  border: 3px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;   
}
@media(max-width:1300px){
  .welcome_enter img{height:40px;}
  .welcome_msg{font-size:0.92em;line-height:0.92em;}
}
@media(max-width:1200px){
  .welcome_enter img{height:34px;}
  .welcome_msg{font-size:0.9em;line-height:0.9em;}
}
@media(max-width:1100px){
  .welcome_enter img{height:28px;}
  
}
@media(max-width: 1100px) and (min-width:450px){
  /*#apq{height:150px;}*/
  #apq p{margin-bottom:0;}
  #ans{height:90px;}
  .items{
    justify-content:space-between;
    width:85%;
    margin:auto;
    /*height:calc(100vh - 385px);*/
  }
  .item{
    /*width:4.5em;*/
    margin-bottom:2px;
    padding:2px;
  }
  .item:nth-child(odd):last-child{

  }

  #lang{position: relative;bottom:0;}
}

@media(max-width:767px){
  html,body{margin:0;}
	.flex-container{display:flex;flex-direction: column;}

	.ad_sm{width:98vw;height:25vh;border:1px solid black;margin:10px auto;}

  #sel_2_xs,.sel_2_xs,.mark{border:none;}  
  .welcome_msg{ font-size:2rem; }  
  .modal-body{display:flex;justify-content:space-around;width:100%;flex-direction: column;text-align: center;}
  #mediaModal .modal-body{display:flex;justify-content:flex-start;width:100%;flex-direction: column;text-align: left;font-size:22px;} 
  input[type=text],input[type=password]{
    width:90%;
    font-size: 22px;
    margin-bottom: 5px;
    margin:2px auto;
  }
  
/*  footer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
	  width:100%;
     height: 8%; 
    height: 50px;
    z-index: 3;
    position: fixed;
    bottom: 0;
    background-color: black;
  }
*/
}
/*@media(min-width:768px) and (max-height:820px){  
  #apq{min-height:120px;max-height:120px;}
  #ans{height:60px;}
  #apq,#ans,.items,.item,.item2{font-size:1.6vw;}
  .items{   
    width:96%;
    margin:auto;
    height:calc(100vh - 350px);
  } 
  .item{padding:2px;}
}
@media(min-width:768px) and (max-height:630px){  
  #apq,#ans,.items,.item,.item2{font-size:1.3vw;}
}
@media(min-width:768px) and (max-height:500px){ 
  #apq{min-height:80px;max-height:80px;}
  #ans{height:50px;}
}
@media(min-width:768px) and (max-height:450px){ 
  .item2{display:none;}
}*/
@media(max-width:420px){
  .welcome_enter{height:65px;}
  .welcome_msg{ font-size:1.5rem; }   
  #apqm,#ansm{font-size:23px;}
  .ansm{background-color:rgba(76,91,130,0.6);padding:0.5em;line-height:1.5em;min-height:4em;}
  .ansm>.news{padding-top:0;}
  .apq>p {margin:0;}
}
@media(max-width:420px),(orientation:portrait){ 
  .welcome_enter img{height:52px;}
}


@media (max-height: 890px) {
    /*#apq{min-height:130px;max-height:130px;}*/
}