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

/*DISPLAY*/
.dp-none{display: none;}
.dp-flx{display: flex;justify-content: center;align-items: center;text-align: center;}
.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-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-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-ccc{color: #ccc;}
.c-6e6e73{color: #6e6e73;}
.c-323232{color: #323232;}
.c-fff{color: #fff;}
.c-ee4b2b{color: #ee4b2b;}
.c-faab78{color: #faab78}
.c-424245{color: #424245;}
.c-ada7a7{color: #ada7a7;}


/*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-0{margin: 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--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;}
.mb--2{margin-bottom: -2px;}
.mb--4{margin-bottom: -4px;}
.mb--5{margin-bottom: -5px;}
.mb-5{margin-bottom: 5px;}
.mb-10{margin-bottom: 10px;}
.mb-12{margin-bottom: 12px;}
.ml--3{margin-left: -3px;}
.ml-125{margin-left: 125px;}


/*PADDING*/
.p-0{padding: 0px;}
.p-5{padding: 5px;}
.p-10{padding: 10px;}
.p-30{padding: 30px;}
.p-0-15{padding: 0 15px;}
.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-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-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-ccc{border-color: #ccc;}

.br-5{border-radius:5px;}
.br-10{border-radius: 10px;}
.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-ffa07a{background: #ffa07a;}
.bg-faab78{background: #faab78;}
.bg-ffdca9{background:#ffdca9;}
.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;}