@charset "utf-8";
:root {
  --primary-color: #02007e;
  --body-color: #f3f5ff;
  --text-color: #444;
  --text-color-dark: #242738;
  --white-color: #ffffff;
  --light-color: #f8f9fa;
  --font-family: Lato;
  --max-width:1360px;
}
*{padding:0; list-style:none; margin:0; text-decoration:none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
body{ line-height: 1.5; letter-spacing:1px;  font-family:sans-serif;-webkit-font-smoothing: antialiased; font-size: 16px; color: var(--text-color);  background-color: var(--body-color); font-family:noto sans tc,helvetica neue,sans-serif}
#main{min-height:90vh}

.hom_toeask{padding:10px}
.homek{width:100%;box-shadow:0 0.2rem 0.4rem rgb(0 0 0 / .5%);margin:0 0 10px 0}
.homek th{}
.homek td{padding:10px 4px; text-align:left; font-size:14px}
.homek input{width:100%; padding:8px 3px; border:1px solid #949393}
.homek input.keyword_{border:1px solid #f00}
.homek select{ padding:8px 5px; border:1px solid #949393}
.homek textarea{width:100%; padding:8px 3px; border:1px solid #949393}
.doSearchgome{font-size:1.5rem; font-weight:700; letter-spacing:2px; text-align:center; width:80%; cursor:pointer; padding:8px 10px; border-radius:4px; color:#fff; background:#0A4BCF; border:1px solid #0A4BCF; position:relative; margin:auto; display:table}



.imghover{ransform: scale(1,1);transition: all 1s ease-out;}
.imghover:hover{transform: scale(1.2,1.2);}

img{max-width:100%; height:auto}
.section{max-width:var(--max-width); width:100%; margin:10px auto; padding:10px}
.listAd{display:flex; gap:15px; align-items:center; justify-content:center; padding:10px}
.listAd li{flex:1}
.NOWask{font-weight:700; font-size:14px; display:flex; gap:5px; align-items:center; flex-wrap:wrap; margin-top:4px}
.NOWask p s{padding:0 5px; color:#CF058F; background:#fff; display:inline-block; margin:0 4px; letter-spacing:0; border-radius:4px;box-shadow:0 0.2rem 0.4rem rgb(255 255 255 / 4%); border:1px solid #5d0c0c}
.flex2{display:flex; gap:20px; justify-content:space-between; padding:10px 0 !important}
.ff1,.f1{ flex:1;}
.ff3{flex:3}
.ff2{flex:2}
.ff4{flex:4}
.ff6{flex:6}
.f1 h2{position:relative; text-align: center; font-size:1.5rem; display:flex; justify-content:center; height:36px; width:100%; overflow:hidden;}
.f1 h2:after {content: ''; position: absolute;bottom: -3px; display: block;width: 5em;height: 0.7em; transform: skew(-30deg);background:#0439B3; opacity: .45;}

.bg-white {background-color: var(--white-color);box-shadow: 0 5px 15px rgba(0, 0, 0, .07) ;transition: .3s ease; border:1px solid #e2e2e2}

.listAd img,.adpay img{display:block; vertical-align:bottom; margin:auto}
.adpay{padding:10px; display:flex; flex-direction:column; gap:15px; }
.Box2R_1{padding:10px; width:100%}
#top32{background:#e1e1e154; position:relative; margin:10px 0; border:1px solid #ebe1e18a}  
#top32 div{overflow:hidden; height:380px; position:relative}
#top32::before { position: absolute; content: '';  height:25px;  width: 100%;  top: 0;  left: 0;  background: var(--primary-color);  opacity: .1;}
#top32 ul{position:absolute; width:100%; font-size:14px}
#top32 ul li{ display:flex; align-items:center; width:100%; height:25px; padding:0 5px; position:relative}
#top32 ul li:hover a::befor{position:absolute; top:0; left:0; right:0; bottom:0}
#top32 li .A1{color:#444; flex:0 0 80px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
#top32 li .A2{ color:#002878; padding:0px 5px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; flex:0 0 calc(100% - 230px)}
#top32 li .A3{color:#524d4d; padding-left:5px; flex:0 0 100px; letter-spacing:0}
#top32 li .A4{color:#005a97; flex:0 0 50px; letter-spacing:0}
#top32 ul li:hover{background:#F0F0F0}
#top32 ul li:hover a.A2::before{position:absolute; content:''; inset:0}

.bg-cover{width:100%; position:sticky; padding:5px; z-index:999;background: var(--primary-color); top:0}
.headerbg{max-width:var(--max-width); width:100%; display:flex; justify-content:space-between; align-items:center; color:var(--white-color); padding:4px; position:relative; margin:0 auto;}
.headerbg a{color:var(--white-color)}
.htopL .h1{font-size:1.25rem; font-weight:bold; color:var(--white-color);}
.htopR ul{display: flex; align-items:center; gap:10px; font-size:14px}
.askcly{display:flex; width:100%; padding:10px; flex-wrap:wrap}
.askcly dt{width:100%; padding:5px; display:flex; gap:8px; align-items:center; border-bottom:1px solid #9A9A9A; margin-bottom:15px}
.askcly dt h2{ padding-right:20px}
.askcly dt s{color:#CF058F; font-weight:700; padding:0 40px 0 10px}
.askcly dd s{color:var(--text-color); font-size:12px;padding:0 0 0 3px}
.askcly dd{padding:8px; width:calc(100% / 3)}
.askcly dd:hover{background:#e1e1e154}
.askcly dd h3{color:#003bb3a6;}
.askcly dd ul{display:flex; width:100%; flex-wrap:wrap; align-items:center}
.askcly dd ul li{padding:5px; width:calc(100% / 3)}
.askcly dd ul li a{overflow: hidden;white-space: nowrap;text-overflow: ellipsis; display:block; font-size:14px; color:#000;}
.askcly dd ul li a:hover{color:#f00}

#kw{padding:6px 6px; border: none; margin:0 3px; width:150px; background:#415ec5; border-radius:10px; color:#fff;box-shadow:inset 3px 1px 4px 0px rgb(255 255 255)}
.askkw{ font-family:"Arial","Noto Sans TC","sans-serif"; position:relative}
#kw::placeholder{color:#ffffff70}
#kw:focus,#kw:focus-visible{ background:#2849C3; border:none}
.setkw{ cursor:pointer; border:none; background:none; position:absolute; right:2px; top:1px; padding:8px 8px}
.setkw svg{fill:#fff; width:14px; height:14px}
.flexdetail section,.flexlist section{flex:3; padding:8px}
.flexlist h1,.flexlist h2{font-size:17px; border-bottom:2px solid var(--primary-color); padding:5px 0 3px 10px; display:flex; align-items:center}
.flexlist aside,.flexdetail aside{flex:1; padding:8px; overflow:hidden}

.ectoask{margin-bottom:25px; display:flex; gap:8px; font-size:14px; flex-direction:column}
.ectoask button{padding:5px 10px; color:#fff; background:#da3535; border:1px solid #800103; cursor:pointer; border-radius:4px; font-size:16px; letter-spacing:3px; margin:0 auto; display:table}
i.blink66::before{content:'\2709'; position:relative; top:0}
.ectoask p{color:#485286; font-weight:700; text-align:center}
i.blink66{       animation: blink66 1s infinite; font-style:normal  }
 @keyframes blink66 {
        0% { opacity: 1; }
        50% { opacity: 0; }
        100% { opacity: 1; }
    }


.imghover{ransform: scale(1,1);transition: all 1s ease-out;}
.imghover:hover{transform: scale(1.2,1.2);}

#infoask li{width:100%; display:flex;border-bottom:1px #E8E8E8 solid; align-items:center; height:30px}
#infoask li:hover{background-color:#F6FBFF}

.infoask_L{ flex:0 0 100px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#443b3b; text-align:center}
.infoask_C{ flex:0 0 calc(100% - 220px); padding:0 5px; overflow:hidden}
.infoask_C h3,.infoask_C a{font-size:15px;color:#019;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; display:block; font-weight:400; width:100%}
.infoask_R{font-size:13px;flex:0 0 50px;color:#019}
.infoask_R a{color:#019}
.infoask_E{flex:0 0 70px; font-size:13px; text-align:center; letter-spacing:0}
.infoali{background-color:#F6FBFF;}



/*最新報價現況*/
.aea{font-size:14px; padding:8px 5px;color:#222;}
.aea3{ color:#222; }
.aea3:hover{color:#003399}
.aea4{ color:#004bb1;}
.aea4 span{color:#222; margin-left:3px;}

.listcly{display:flex; gap:0 10px; width:100%; flex-wrap:wrap; align-items:center; padding:10px}
.iscly{border-bottom:1px solid #B40508}
.listcly a{font-size:14px; color:#000; display:block; padding:8px 8px}
.listcly a:hover{color:#f00}
.listcly s{color:#9f4343; font-size:12px;padding:0 0 0 3px}

.aid_1{display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px; padding:10px; border-bottom:1px solid #b1b1b1}
.aid_12{font-size:14px; letter-spacing:0}
.aid_12 h1{font-size:24px; letter-spacing:1px}
.aid_1R{flex:0 0 150px}



#pageNO{text-align:center; font-family:Arial; font-size:15px; line-height:25px; letter-spacing:1px; padding:10px 0; margin-top:10px}
#pageNO #Pall{margin:0px 10px;}
#pageNO #Pall span{margin:0px 3px}
#pageNO .Upage{border:1px solid #e5e5e5; padding:3px; background-color:#fafafa; font-size:13px; margin:0px 5px; color:#181717; display:inline-block}
#pageNO #Npage{border:1px solid #ffc655;  color:#aa557f; background-color:#fff3c9; padding:0px 3px; margin:0px 3px; display:inline-block; min-width:25px; height:25px}
#pageNO .Pno{margin:0px 3px; text-decoration:none; border:1px solid #e5e5e5; padding:0px 3px; color:#181717; background-color:#fafafa; font-size:15px; display:inline-block; min-width:25px; height:25px}

#footbg{text-align:center; padding:8px; color:#fff; background: var(--primary-color); font-size:13px}
@media (max-width: 760px){
	.flex2{flex-direction:column}
	.homefle{flex-direction:column-reverse}
	.htopR{ position:relative}
	.htopR ul{position:fixed; background:#303f9fb8; gap:25px; font-size:24px; top:55px; left:0; right:0; padding:20px; flex-direction:column; border-bottom:2px inset #0345B9}
.adpay,.listAd{flex-direction:row; flex-wrap:wrap;justify-content:center}
.adpay li,.listAd li{flex:0 0 calc(100% / 2 - 15px)}
.infoask_L{ display:none}
.infoask_C{ flex:0 0 calc(100% - 120px); padding:0 5px; overflow:hidden}	
	.Box2R_1,.section{padding:0}
	.Box2R_1 h2{padding:10px 0 0 10px}
.flexdetail aside,flexdetail section,.flexlist section,.flexlist aside{flex:0 0 100%}

.NOWask{font-size:13px}
.askcly{ flex-direction:column; padding:5px;}
.askcly dt{width:100%; padding:5px; gap:8px; flex-wrap:wrap}
.askcly dt h2{ padding-right:0; width:100%}
.askcly dt span{font-size:13px}
.askcly dt s{ padding:0}
.askcly dd{padding:8px; width:100%; border-bottom:1px inset #5d5d5d}
.askcly dd ul li{padding:5px; width:calc(100% / 3)}

.menu-btn{cursor: pointer; margin:0 10px}
.navbox ul{ display: flex !important}
.htopR ul{display:none}
.line-1,.line-2,.line-3 {border-top: 2px solid #fff;display: block;transition: margin 0.5s, transform 0.5s;width: 25px;}

.line-2 {margin: 5px 0;}

.navbox .line-1 {transform: rotate(45deg);margin: 0;}

.navbox .line-3 {transform: rotate(-45deg);margin: 0;}

.navbox .line-2 {margin: -2px 0;opacity: 0;}


#kw{padding:6px 6px; width:180px; background:#092caa;}
.setkw{right:2px; top:5px}
}