html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

input:focus{border: 1px solid;border-color: #b4b4b4;}

#card{
  background: #fff;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e0e0;
}

.tab {
  padding: 6px 18px;
  border-radius: 20px;
  border: none;
  background: #eaeaea;
  cursor: pointer;
}

.tab.active {
  background: #cfd8ff;
  color: #000;
}




*{margin:0;padding:0;box-sizing:border-box;}

.g-12{gap:12px}
.g-14{gap:14px}

.gtc-2{grid-template-columns: auto auto;}

/*DISPLAY*/
.dp-none{display: none;}
.dp-flx{display: flex;justify-content: center;align-items: center;}
.dp-g{display: grid;}
.jc-sb{justify-content: space-between;}
.fd-c {flex-direction: column;}
.fd-r {flex-direction: row;}

/*POSITION*/
.p-a{position:absolute;}
.p-r{position:relative}
.p-f{position: fixed;}


.t-20{top:20px;}
.t-50{top:50%;}
.l-50{left:50%;}
.l--100{left:-100%;}
.r-0{right:0;}
.b-0{bottom:0}
.b-16{bottom: 16px;}
.r-20{right:20px;}
.r-52{right: 52px;}


/*FONT*/
#ft-zh{font-family: Ma Shan Zheng,cursive;}
#ft-eng{font-family: Acme;}
#f-zh{font-family: Microsoft YaHei;}
#f-ns{font-family: Noto Sans SC,sans-serif;}


/*FONT*/
.fs-12{font-size: 12px;}
.fs-13{font-size: 13px;}
.fs-14{font-size: 14px;}
.fs-15{font-size: 15px;}
.fs-16{font-size: 16px;}
.fs-17{font-size: 17px;}
.fs-18{font-size: 18px;}
.fs-19{font-size: 19px;}
.fs-20{font-size: 20px;}
.fs-25{font-size: 25px;}
.fs-30{font-size: 30px;}
.fs-40{font-size: 40px;}
.fs-45{font-size: 45px;}
.fs-50{font-size: 50px;}
.fs-55{font-size: 55px;}

.fw-b{font-weight: bold;}
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}

/*COLOR*/
.c-b{color: #252525;}
.c-w{color: white;}
.c-8ec5fc{color: #8ec5fc;}
.c-333{color: #333;}
.c-888{color: #888;}
.c-ccc{color: #ccc;}
.c-6e6e73{color: #6e6e73;}
.c-323232{color: #323232;}
.c-fff{color: #fff;}
.c-ee4b2b{color: #ee4b2b;}
.c-ff6b6b{color: #ff6b6b}
.c-faab78{color: #faab78}
.c-424245{color: #424245;}
.c-ada7a7{color: #ada7a7;}
.c-b4b4b4{color: #b4b4b4}
.c-e0e0e0{color:#e0e0e0;}


/*TEXT*/
.ta-lf{text-align: left;}
.ta-right{text-align: right;}
.td-none{text-decoration: none;}
.ta-ctr{text-align: center;}

.lh-30{line-height: 30px;}
.lh-110{line-height:110px;}


/*MARGIN*/
.m-a{margin: auto;}
.m-0{margin: 0px}
.m-10-0{margin: 10px 0px;}
.m-0-5{margin: 0 5px;}
.m-20-0{margin: 20px 0;}

.mt-0{margin-top: 0px;}
.mt-3{margin-top: 3px;}
.mt-5{margin-top: 5px;}
.mt-10{margin-top: 10px}
.mt-14{margin-top: 14px;}
.mt-20{margin-top: 20px;}
.mt-40{margin-top: 40px;}
.mt-125{margin-top: 125px;}
.mt-160{margin-top: 160px;}
.mt-210{margin-top: 210px;}

.mt--5{margin-top: -5px;}

.mb-5{margin-bottom: 5px;}
.mb-6{margin-bottom: 6px;}
.mb-10{margin-bottom: 10px;}
.mb-12{margin-bottom: 12px;}

.mb--2{margin-bottom: -2px;}
.mb--4{margin-bottom: -4px;}
.mb--5{margin-bottom: -5px;}

.ml--3{margin-left: -3px;}
.ml-125{margin-left: 125px;}


/*PADDING*/
.p-0{padding: 0px;}
.p-5{padding: 5px;}
.p-10{padding: 10px;}
.p-15{padding:15px}
.p-16{padding: 16px;}
.p-30{padding: 30px;}
.p-50{padding:50px}
.p-0-15{padding: 0 15px;}
.p-0-16-80{padding: 0 16px 80px;}
.pb-10{padding-bottom: 10px;}
.pb-15{padding-bottom: 15px;}


/*WIDTH*/
.w-20{width:20px;}
.w-25{width:25px;}
.w-40{width: 40px;}
.w-50px{width: 50px;}
.w-50{width: 50%;}
.w-60{width: 60px;}
.w-80{width: 80px;}
.w-85{width: 85%;}
.w-98x{width: 98px;}
.w-98p{width: 98%;}
.w-100px{width: 100px;}
.w-100{width: 100%;}
.w-110{width: 110px;}
.w-125{width: 125px;}
.w-200{width: 200px;}
.w-250{width: 250px;}
.w-300px{width: 300px;}
.w-300{width: 300%;}
.w-380{width: 380px;}
.w-385{width: 385px;}
.w-405{width: 405px;}
.w-450{width: 450px;}
.w-480{width: 480px;}
.w-500{width: 500px;}
.w-540{width: 540px;}

.mw-400{max-width: 400px;}
.mw-500{max-width: 500px;}
.mw-700{max-width: 700px;}


/*HEIGHT*/
.h-20{height:20px;}
.h-25{height:25px;}
.h-40{height: 40px;}
.h-45{height: 45px}
.h-47{height: 47px;}
.h-80{height: 80px;}
.h-100{height: 100%;}
.h-110{height: 110px;}



/*BORDER*/
.b-none{border:none;}
.b-1{border:1px solid;}
.b-2{border:2px solid;}
.b-3{border:3px solid;}
.bb-1{border-bottom: 1px solid;}

.bc-b{border-color: #252525;}
.bc-ffa07a{border-color: #ffa07a;}
.bc-cfcfcf{border-color: #cfcfcf;}
.bc-b4b4b4{border-color: #b4b4b4;}
.bc-ccc{border-color: #ccc;}

.br-5{border-radius:5px;}
.br-8{border-radius: 8px;}
.br-10{border-radius: 10px;}
.br-15{border-radius:15px;}
.br-25{border-radius: 25px;}
.br-50{border-radius: 50%;}
.br-50px{border-radius: 50px;}

.bs{box-shadow: 0px 10px 25px rgb(0 0 0 / 46%);}

/*BACKGROUND*/
.bg-none{background:none;}
.bg-e0e0e0{background: #e0e0e0}
.bg-1e40ff{background:#1e40ff;}
.bg-ffa07a{background: #ffa07a;}
.bg-faab78{background: #faab78;}
.bg-ffdca9{background:#ffdca9;}
.bg-d3d3d3{background:#d3d3d3;}
.bg-b{background: #252525;}
.bg-w{background: #fff}
.bg-fff{background:#fff}
.bg{background: linear-gradient(135deg, #FFFBAC 0%, #FFD495 50%, #FAAB78 100%)}

/*EFFECT*/
.tf-ts{transform:translate(-50%, -50%);}

.transition{transition: all 0.3s ease;}

.pointer{cursor: pointer;}

.z-i-1{z-index: 1;}
.z-i-5{z-index: 5;}

.o-1{opacity:1;}
.outline-none{outline:none}
.overflow-h{overflow: hidden;}

.va{vertical-align:middle;}



/*EMOJI*/
#emoji{width: 25px;height: 25px;vertical-align: middle;margin-bottom: 5px; margin-left: 1px; margin-right: 1px;}


/*ID-EFFECT*/
#hover-zoom a:hover{background: linear-gradient(135deg, #D7E9B9 0%, #FFFBAC 50%, #FFD495 100%);border: 0px;border-radius: 50%;transform: scale(1.1);transition: all 0.5s ease 0s; color: #252525}


#hover-link a:hover{color: #528dd7; text-decoration: underline; text-underline-position: under;}

#c-hover:hover{color: #ffd495;}
#l-hover:hover{text-decoration: underline;color: #252525;}

form input:focus{border-color: #faab78}



::-webkit-scrollbar{width: 10px;}
::-webkit-scrollbar-track{background: #f1f1f1}
::-webkit-scrollbar-thumb{background: #C1C1C1; border-radius: 10px;}