@charset "utf-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video,input,textarea,*:before,*:after,ul.clean,ul.clean li{margin:0;padding:0;box-sizing:border-box;list-style:none;}


body{font-size:100%;font-family:'Noto Sans TC', sans-serif;}
.cWrap{display:flex;width:100%;max-width:1170px;padding:0 30px;justify-content:space-between;margin:0 auto;}
.mobile-itms{display:none !important;}
.mCell .mobile-itms{display:block !important;}

header{display:flex;width:100%;height:80px;position:fixed;left:0px;top:0px;z-index:10;background:#f5f6fa;border-bottom:#c5c6ca 1px solid;position:relative;align-items:center;justify-content:space-between;padding:0 100px 0 30px;}
header .cWrap{}
header img{display:block;width:50px;height:auto;}
header aside{display:flex;gap:50px;}
header aside .user,header aside .head-lang{display:flex;gap:5px;align-items:center;}
header aside .user svg{display:block;width:24px;height:40px;margin-right:10px;}
header a{color:#45464a;text-decoration:none;line-height:40px;}
header a:hover{color:#c00;}
header aside .head-lang a{display:block;padding:0 10px;line-height:30px;}
header aside .head-lang a.active{background:#45464a;color:#fff;border-radius:5px;padding-bottom:2px;}
header a.head-post{display:block;height:40px;line-height:35px;border-radius:6px;background:#c00;color:#fff;padding:0 30px 5px;box-shadow:inset 0px -4px 0px rgba(0,0,0,0.2);transition:all .1s ease-out;}
header a.head-post:hover{box-shadow:inset 0px -40px 0px rgba(0,0,0,0.2);line-height:38px;}
header nav{display:flex;position:fixed;left:-9999px;top:-9999px;margin-top:-80px;width:100%;height:100%;background:#35363a;z-index:10;opacity:0;visibility:hidden;flex-direction:column;justify-content:center;align-items:center;}
header.open nav{opacity:1;visibility:visible;left:0px;top:0px;margin-top:0px;transition:opacity .25s ease-out, margin-top .3s ease-out;}
header nav ul{display:flex;flex-direction:column;align-items:center;width:60%;}
header nav ul li{font-size:3em;font-weight:300;}
header nav ul li a{color:#75767a;}
header nav ul li a:hover{color:#c5c6ca;}

#mNav{position:absolute;width:50px;height:50px;right:20px;top:15px;display:block;z-index:11;}
#mNav>figure{position:absolute;width:100%;height:60%;border-top:#45464a 2px solid;border-bottom:#45464a 2px solid;top:20%;-ms-transform:scale(80%,80%);-webkit-transform:scale(80%,80%);transform:scale(80%,80%);transition:opacity .2s linear;transition-delay:.2s;}
#mNav>figure:before{content:'';display:block;position:absolute;width:100%;height:2px;background:#45464a;left:0px;top:50%;margin-top:-1px;}
#mNav>span{position:absolute;width:100%;height:100%;-ms-transform:scale(80%,80%);-webkit-transform:scale(80%,80%);transform:scale(80%,80%);opacity:0;transition:opacity .2s linear;transition-delay:0s;}
#mNav>span:before{content:'';display:block;width:100%;height:2px;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:#fff;position:absolute;left:0px;top:24px;}
#mNav>span:after{content:'';display:block;width:100%;height:2px;-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);background:#fff;position:absolute;left:0px;top:24px;}
.open #mNav>figure{opacity:0;transition-delay:0s;}
.open #mNav>span{opacity:1;transition-delay:.2s;}

.searchLocation{display:flex;background:#45464a;padding:15px 20px 15px 30px;justify-content:space-between;align-items:center}
#searchFrm{display:flex;}
#searchFrm input{display:block;width:300px;height:42px;padding:0 20px;border:none;outline:none;border-radius:6px 0 0 6px;font-size:1em;}
#searchFrm input[type="submit"]{display:block;width:auto;border-radius:0px 6px 6px 0;background:#c00;color:#fff;padding:0 30px 5px;box-shadow:inset 0px -4px 0px rgba(0,0,0,0.2);transition:all .1s ease-out;font-weight:bold;}
.searchLocation div{display:flex;gap:10px;line-height:34px;}
.searchLocation div a{display:block;text-decoration:none;height:36px;background:#25262a;color:#fff;padding:0 30px;border-radius:6px;}
.searchLocation div a:hover{background:#c00;}

.mainFrame{margin:40px 0 0;}
.mainFrame .cWrap{display:flex;gap:30px;min-height:80%;}
.mainFrame .cWrap article{display:block;flex:1;position:relative;background:#f5f6fa;padding:40px 30px;}
.mainFrame .cWrap article:before{content:'';display:block;width:200%;height:100%;right:50%;top:0px;background:inherit;position:absolute;z-index:-1;}
.mainFrame .cWrap aside{display:flex;flex-direction:column;width:340px;padding:0 30px 40px;gap:40px;}
.mainFrame .cWrap aside.narrow{width:300px;}

.sidebarCont{display:block;text-align: center;}
.sidebarCont strong{display:block;font-size:120%;margin-bottom:.6em;}
aside .planCell{text-align:center;background:#f7d9d9;padding:20px 4px 4px;font-size:1.2em;font-weight:300;}
aside .planCell strong{display:block;font-size:120%;font-weight:400;}
aside .planCell a{display:block;margin-top:1em;font-size:90%;font-weight:500;line-height:2.4em;background:#fff;color:#c00;text-decoration:none;}
.sideInfo{padding:0px;border:#d5d6da 1px solid;}
.sideInfo h3{display:block;padding:10px;background:#f5f6fa;text-align:center;border-bottom:#d5d6da 1px solid;margin-bottom:1em;}
.sideInfo.standout h3{color:#c00;}
.sideInfo p{padding:0 20px;margin-bottom:1.5em;}
.sideInfo ul{padding:0 20px 0 2.5em;}

/*---Login and register form---*/
.logReg{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:420px;margin:40px auto 50px;}
article h2{font-size:2.4em;color:#45464a;font-weight:300;}
.logReg label,.logReg>div{width:100%}
.logReg div{display:flex;justify-content:space-between;gap:10px;}
.logReg a{white-space:nowrap;color:#c00;text-decoration:none;}
.logReg label input{width:100%;height:45px;border-radius:6px;border:#f0f1fa 4px solid;outline:none;padding:0 10px;}
.logReg label.radioCheck{display:flex;gap:6px;align-items:center;line-height:25px;}
.logReg label.radioCheck input{display:block;width:20px;height:20px;}
.logReg label.btnCell{display:flex;gap:30px;}
.logReg label.btnCell input{display:block;line-height:45px;border-radius:6px;font-size:1.2em;font-weight:400;background:#c00;color:#fff;border:none;height:45px;cursor:pointer}
.logReg label.btnCell input[type="reset"]{background:#a5a6aa;}

/*-------------Plan list page--------------*/
.mainFrame .cWrap article.planList{display:flex;flex-wrap:wrap;column-gap:3.5%;row-gap:5%;align-content:flex-start;}
article.planList h2{display:block;width:100%;text-align:center;}
.planList .planItm{display:flex;width:31%;background:#fff;min-height:200px;flex-direction:column;text-align:center;justify-content:space-between;box-shadow:1px 2px 4px rgba(0,0,0,0.1);gap:20px;color:#45464a;}
.planList .planItm.special{box-shadow:1px 2px 4px rgba(93,165,231,0.2);}
.planList .planItm h3{display:block;width:100%;padding:0 30px;line-height:2.2em;font-size:1.4em;font-weight:300;border-bottom:#e5e6ea 1px solid;}
.planList .planItm.special h3{color:#5da5e7}
.planList .planItm p{display:block;width:100%;padding:0 30px;font-size:1.4em;line-height:1.6em;font-weight:300;}
.planList .planItm p strong{font-size:130%;font-weight:600;}
.planList .planItm a{display:block;width:100%;line-height:2.2em;color:#45464a;text-decoration:none;background:#f5f6fa;font-size:1.2em;border:#fff 4px solid;}
.planList .planItm.free h3,.planList .planItm.free p strong,.planList .planItm.free span{color:#e75d5d}
.planList .planItm.special a{background:#5da5e7;color:#fff;}
.planList .planItm.free a{background:#e75d5d;color:#fff;}
.planList .planItm a:hover{color:#fff;background:#75767a !important;transition:all .15s linear;}
.planList small{display:block;width:100%;}

/*-------------Create post form-------------*/
.complexFrm{display:flex;flex-direction:column;gap:30px;justify-content:flex-start;font-size:1em;font-weight:300;color:#45464a;margin:1em 0;border-top:#d5d6da 1px solid;padding-top:50px;align-items:flex-start;}
.complexFrm>div{width:100%;display:flex;gap:30px;}
.complexFrm .required:before{content:'\002A';color:#c00;font-size:1.2em;}
.complexFrm h3{background:#c00;color:#fff;position:relative;padding:10px 30px 10px 0;}
.complexFrm h3:before{content:'';display:block;width:400%;height:100%;background:inherit;position:absolute;right:100%;top:0px;}
.complexFrm label{width:100%;display:flex;flex-wrap:wrap;gap:4px;font-size:1.2em;}
.complexFrm label.radioCheck{display:block;padding:0 0 0 30px;position:relative;}
.complexFrm label input,.complexFrm label select,.complexFrm label a.popUpBtn{display:block;width:100%;background:#fff;height:45px;border-radius:6px;border:#e5edf5 4px solid;outline:none;padding:0 10px;font-size:1em;font-weight:300;line-height:37px;text-decoration:none;color:#45464a;}
.complexFrm label textarea{display:block;width:100%;background:#fff;height:250px;border-radius:6px;border:#e5edf5 4px solid;outline:none;padding:10px;resize:none;font-size:1em;font-weight:300;}
.complexFrm label.radioCheck input{position:absolute;width:22px;height:22px;flex:1 1 30px;left:0px;top:4px;}
.complexFrm .btnCell input{display:block;width:100%;background:#c00;height:45px;border-radius:6px;border:none;font-size:1em;font-weight:500;line-height:45px;text-decoration:none;color:#45464a;color:#fff;}
.complexFrm label p a{color:#45464a;font-weight:400;}
.complexFrm label p a:hover{color:#c00;text-decoration:none;}

/*---------Post list-----------*/
.postList .postItm{display:flex;flex-direction:column;position:relative;border:#d5d6da 1px solid;border-radius:6px;padding:0;margin-top:30px;font-weight:300;min-height:200px;background:#f8f9fa;}
.postList .postItm.highlight{background:#f6f6ea;}
.postList .postItm.new:before{content:'NEW';display:block;background:#bcc980;color:#fff;font-size:0.6em;padding:7px 10px 6px;font-weight:800;line-height:0.6em;position:absolute;left:15px;top:-1em;}
.postList .postItm h3{display:flex;padding:10px 60px 10px 15px;position:relative;font-weight:500;font-size:1.4em;align-items:center;gap:10px;}
.postList .postItm.pin h3:before{content:'置頂';display:block;background:#65666a;color:#fff;font-weight:500;font-size:0.5em;padding:5px 12px;line-height:1em;border-radius:6px;margin-top:4px;}
.postList .postItm h3 a{display:block;font-size:0.5em;font-weight:600;color:#fff;background:#c00;position:absolute;top:50%;right:15px;padding:5px 12px;line-height:1em;text-decoration:none;border-radius:6px;transform:translateY(-50%);}
.postList .postItm small{display:flex;gap:20px;padding:0px 15px;font-weight:600;color:#95969a;margin-bottom:1em;}
.postList .postItm small span{display:flex;gap:5px;align-items:center;}
.postList .postItm small span img{display:block;width:16px;}
.postList .postItm p{padding:10px 15px;font-size:1.2em;line-height:1.4em;}

#category{display:flex;flex-direction:column;width:100%;gap:6px;}
#category li{width:100%;position:relative;background:#f0f1fa;border-radius:6px;}
#category li>a{display:block;padding:0 20px;line-height:52px;text-decoration:none;font-size:1.4em;font-weight:300;color:#45464a;position:relative;overflow:hidden;}
#category li>a:after{content:'';display:block;width:6px;height:80%;background:#c00;position:absolute;right:-6px;top:10%;transition:right .15s ease-out;}
#category li:hover>a:after{right:0px;}
#category li div{position:absolute;right:98%;top:0px;width:400px;min-height:200px;display:flex;flex-wrap:wrap;gap:4%;justify-content:flex-end;align-content:flex-start;background:#fff;padding:20px;border-radius:6px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.3);z-index:10;opacity:0;visibility:hidden;}
#category li:hover div{opacity:1;visibility:visible;}
#category li div:before{content:'';position:absolute;width:0px;height:0px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid #fff;top:22px;left:100%;}
#category li div a{display:block;width:22%;color:#45464a;text-decoration:none;font-weight:400;font-size:1.1em;line-height:1.6em;}
#category li div a:hover{color:#c00;}

footer{display:block;border-top:#c6c7ca 1px solid;line-height:50px;padding:0 30px;font-weight:300;font-size:.8em;}

/*-----------------------------------Responsive styles------------------------------------*/
@media screen and (min-width:1400px) {    
.cWrap{max-width:1240px;padding:0px;}
}

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

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

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {opacity: 1;}

html,body{height:100%;font-size:90%;}
.cWrap{padding:0 30px;}

}

@media (max-width: 901px) {

}

@media (max-width: 480px) {

}