/* website reset */

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }



body { margin: 0; max-width: 1920px; margin: 0 auto; background: #fff; font: normal 12px/1.5 Arial, "Microsoft Yahei", "\5B8B\4F53", sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color: rgba(0, 0, 0, 0); }



input[type="search"], input[type="number"] { -webkit-appearance: none; appearance: none; background: none; }



input[type="radio"], input[type="checkbox"] { background: none; -webkit-appearance: none; appearance: none; }



img, input, button, textarea, select { padding: 0; border: 0; outline: 0; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; }



p, h1, h2, h3, h4, h5, h6 { margin: 0; color: #333; font-size: 100%; }



ul, ol, li, dl, dd { margin: 0; padding: 0; }



:focus { outline: none; }



img { display: block; max-width: 100%; }



ul { list-style-type: none; }



/*em { font-style: normal; }*/



a { text-decoration: none; color: inherit; }

a:hover { color: inherit; }




::-webkit-input-placeholder { color: #858585; }



::-moz-input-placeholder { color: #858585; }



:-moz-input-placeholder { color: #858585; }



:-ms-input-placeholder { color: #858585; }



/* website offen */

.fl { float: left; }



.fr { float: right; }



.red { color: #d3271f; }



.blue { color: #29166f; }



.gray { color: #666; }



.hide { display: none; }



.block { color: #333; }



.light { color: #999; }



.center { text-align: center; }



.line1 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }



.line2 { display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; -webkit-line-clamp: 2; word-wrap: break-word; white-space: normal; overflow: hidden; }



.bgcolor { background-color: #f6f6f6 !important; }



.line-one { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }



.line-two { display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; -webkit-line-clamp: 2; word-wrap: break-word; white-space: normal; overflow: hidden; }



/* website media */

html { font-size: 12px; }

@media screen and (max-width: 731px) { html { font-size: 73.1px; } }

@media screen and (max-width: 720px) { html { font-size: 72px; } }

@media screen and (max-width: 640px) { html { font-size: 64px; } }

@media screen and (max-width: 480px) { html { font-size: 48px; } }

@media screen and (max-width: 414px) { html { font-size: 41.4px; } }

@media screen and (max-width: 411px) { html { font-size: 41.1px; } }

@media screen and (max-width: 412px) { html { font-size: 41.2px; } }

@media screen and (max-width: 360px) { html { font-size: 36px; } }

@media screen and (max-width: 375px) { html { font-size: 37.5px; } }

@media screen and (max-width: 320px) { html { font-size: 32px; } }


/* website font */




/* website animate */

.ani { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

.pulse { -webkit-animation-name: pulse; animation-name: pulse; }

.zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; }

.zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; }

.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }

.zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; }

.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }

.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }

.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }

.bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; }

.bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; }

.bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; }

.bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; }

.bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; }

@-webkit-keyframes pulse {

  0% { -webkit-transform: scale(1); transform: scale(1); }

  50% { -webkit-transform: scale(1.1); transform: scale(1.1); }

  100% { -webkit-transform: scale(1); transform: scale(1); }

}

@keyframes pulse {

  0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

  50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }

  100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

}

@-webkit-keyframes fadeInUp {

  0% { opacity: 0; -webkit-transform: translateY(160px); transform: translateY(160px); }

  100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }

}

@keyframes fadeInUp {

  0% { opacity: 0; -webkit-transform: translateY(160px); transform: translateY(160px); }

  100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

}

@-webkit-keyframes fadeInDown {

  0% { opacity: 0; -webkit-transform: translateY(-160px); transform: translateY(-160px); }

  100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }

}

@keyframes fadeInDown {

  0% { opacity: 0; -webkit-transform: translateY(-160px); -ms-transform: translateY(-160px); transform: translateY(-160px); }

  100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

}

@-webkit-keyframes fadeInLeft {

  0% { opacity: 0; -webkit-transform: translateX(-160px); transform: translateX(-160px); }

  100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }

}

@keyframes fadeInLeft {

  0% { opacity: 0; -webkit-transform: translateX(-160px); -ms-transform: translateX(-160px); transform: translateX(-160px); }

  100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }

}

@-webkit-keyframes fadeInRight {

  0% { opacity: 0; -webkit-transform: translateX(160px); transform: translateX(160px); }

  100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }

}

@keyframes fadeInRight {

  0% { opacity: 0; -webkit-transform: translateX(160px); -ms-transform: translateX(160px); transform: translateX(160px); }

  100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }

}

@-webkit-keyframes zoomIn {

  0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); }

  50% { opacity: 1; }

}

@keyframes zoomIn {

  0% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); }

  50% { opacity: 1; }

}

@-webkit-keyframes zoomInDown {

  0% { opacity: 0; -webkit-transform: scale(0.1) translateY(-2000px); transform: scale(0.1) translateY(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }

  60% { opacity: 1; -webkit-transform: scale(0.475) translateY(60px); transform: scale(0.475) translateY(60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }

}

@keyframes zoomInDown {

  0% { opacity: 0; -webkit-transform: scale(0.1) translateY(-2000px); -ms-transform: scale(0.1) translateY(-2000px); transform: scale(0.1) translateY(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }

  60% { opacity: 1; -webkit-transform: scale(0.475) translateY(60px); -ms-transform: scale(0.475) translateY(60px); transform: scale(0.475) translateY(60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }

}

@-webkit-keyframes zoomInUp {

  0% { opacity: 0; -webkit-transform: scale(0.1) translateY(2000px); transform: scale(0.1) translateY(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }

  60% { opacity: 1; -webkit-transform: scale(0.475) translateY(-60px); transform: scale(0.475) translateY(-60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }

}

@keyframes zoomInUp {

  0% { opacity: 0; -webkit-transform: scale(0.1) translateY(2000px); -ms-transform: scale(0.1) translateY(2000px); transform: scale(0.1) translateY(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }

  60% { opacity: 1; -webkit-transform: scale(0.475) translateY(-60px); -ms-transform: scale(0.475) translateY(-60px); transform: scale(0.475) translateY(-60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }

}

@-webkit-keyframes bounceIn {

  0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); }

  50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); }

  70% { -webkit-transform: scale(0.9); transform: scale(0.9); }

  100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }

}

@keyframes bounceIn {

  0% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); }

  50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); }

  70% { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }

  100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

}

@-webkit-keyframes bounceInDown {

  0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); }

  60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); }

  80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); }

  100% { -webkit-transform: translateY(0); transform: translateY(0); }

}

@keyframes bounceInDown {

  0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); }

  60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); }

  80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); }

  100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

}

@-webkit-keyframes bounceInLeft {

  0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); }

  60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); }

  80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); }

  100% { -webkit-transform: translateX(0); transform: translateX(0); }

}

@keyframes bounceInLeft {

  0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); }

  60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); }

  80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); }

  100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }

}

@-webkit-keyframes bounceInRight {

  0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); }

  60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); }

  80% { -webkit-transform: translateX(10px); transform: translateX(10px); }

  100% { -webkit-transform: translateX(0); transform: translateX(0); }

}

@keyframes bounceInRight {

  0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); }

  60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); }

  80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); }

  100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }

}

@-webkit-keyframes bounceInUp {

  0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); }

  60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); }

  80% { -webkit-transform: translateY(10px); transform: translateY(10px); }

  100% { -webkit-transform: translateY(0); transform: translateY(0); }

}

@keyframes bounceInUp {

  0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); }

  60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); }

  80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); }

  100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

}

@-webkit-keyframes rollRight {

  0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }

  100% { -webkit-transform: translateX(0); transform: translateX(0); }

}

@keyframes rollRight {

  0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }

  100% { -webkit-transform: translateX(0); transform: translateX(0); }

}