@import url(https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700,800,900);
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900);
@font-face { font-family: 'AdobeFanHeitiStd-Bold'; src: url("../font/AdobeFanHeitiStd-Bold.otf") format("opentype"); }
.center-section { top: 50%; left: 50%; transform: translate(-50%, -50%); }

#slide { position: relative; min-width: 100vw; }

#slide img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: 0.8s; }

#slide img:first-child { position: static; }

#slide img.show { opacity: 1; visibility: visible; }

#slide .prev, #slide .next { display: block; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; transition: 0.4s; background-color: rgba(0, 0, 0, 0.12); padding: 14px 12px; }

#slide .prev:hover, #slide .next:hover { background-color: rgba(0, 0, 0, 0.24); }

#slide .prev:after, #slide .next:after { display: block; content: ""; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; }

#slide .prev { left: 0; }

#slide .prev:after { transform: rotate(-135deg); margin-left: 4px; }

#slide .next { right: 0; }

#slide .next:after { transform: rotate(45deg); margin-right: 4px; }

.banner-section { position: relative; width: 100vw; background-color: black; margin-top: 75px; }
@media screen and (max-width: 996px) { .banner-section { margin-top: 75px; } }
@media screen and (max-width: 475px) { .banner-section { margin-top: 50px; } }