@keyframes list { 0% { left: -100%; }
  100% { left: 0; } }

@keyframes toDown { 0% { bottom: 80px; }
  50% { bottom: 100px; }
  100% { bottom: 80px; } }

@font-face { font-family: 'Montserrat-Bold'; src: url(../fonts/Montserrat-Bold.otf); }

body { background-color: #2c4a71; }

.head_top { position: absolute; top: 0; padding: 1.3rem; display: flex; justify-content: space-between; }

.head_top .logo { width: 50%; }

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

.head_top .menu { background-color: #2c4a71; height: max-content; color: #fff; padding: 2px 10px; border-radius: 15px; }

.banner { position: relative; background-color: #2c4a71; }

.banner img { display: block; width: 100%; }

.banner .nt { position: absolute; bottom: 1rem; left: 1rem; font-size: 2rem; font-weight: bold; color: #2c4a71; }

.index { background-color: #0a4972; color: #fff; padding: 2rem 1rem; }

.index .head { line-height: 1; border-left: 3px solid #e4c17d; font-size: 1.1rem; font-weight: bold; padding-left: 5px; }

.index .list { margin-top: 1.5rem; }

.index .list .lis { display: block; width: 100%; background-color: #fff; border-radius: 15px; padding: 5px 10px; color: #333; text-align: center; margin-bottom: 1rem; }

.index .ct { margin-bottom: 2rem; }

.about { display: flex; }

.about .left_ct { display: flex; justify-content: center; padding: 1rem; width: 6rem; background-color: rgba(255, 255, 255, 0.1); padding-top: 5rem; }

.about .left_ct img { width: 20px; }

.about .cont { width: 24rem; padding: 1rem; color: #fff; }

.about .cont .head { margin-top: 2rem; margin-bottom: 2rem; position: relative; width: max-content; padding: 0.3rem 2rem; font-size: 1.5rem; font-weight: bold; }

.about .cont .head::before { content: ''; position: absolute; left: 0; top: 0; width: 1rem; height: 1rem; border-top: 3px solid #e4c17d; border-left: 3px solid #e4c17d; }

.about .cont .head::after { content: ''; position: absolute; right: 0; bottom: 0; width: 1rem; height: 1rem; border-bottom: 3px solid #e4c17d; border-right: 3px solid #e4c17d; }

.about .cont .desc { padding-bottom: 5rem; }

.about .cont .desc p { font-size: 1rem; text-indent: 2em; margin-top: 1rem; line-height: 1.8; }

.about .cont .desc .imgbox { margin-top: 2rem; }

.goBack { position: fixed; width: 40px; height: 40px; border-radius: 50%; right: 5vw; bottom: 15vw; background-color: #e4c17d; color: #fff; display: flex; justify-content: center; align-items: center; z-index: 99; }

.goBack i { font-size: 20px; }

.prod { padding: 2rem 0; }

.prod .bt1 { background-color: #fff; padding: 3px 1rem; border-radius: 15px; width: max-content; color: #2c4a71; font-size: 1.1rem; display: flex; align-items: center; }

.prod .bt1 i { font-size: 1.5rem; line-height: 1; margin-right: 3px; }

.prod .desc { color: #fff; font-size: 1rem; line-height: 1.8; margin-top: 1rem; }

.prod .ct { margin-bottom: 2rem; margin-top: 2rem; }

.prod .ct .head { line-height: 1; border-left: 3px solid #e4c17d; font-size: 1.3rem; font-weight: bold; padding-left: 5px; color: #fff; }

.prod .ct .list { margin-top: 1.5rem; }

.prod .ct .list .lis p { text-align: center; color: #fff; font-size: 1rem; margin-top: 5px; }

.footer { background-color: #0a4972; text-align: center; color: #fff; font-size: 0.8rem; padding: 1rem 0; text-transform: uppercase; }