.bkt { height: auto; overflow: hidden; margin-top: 100px; } .bkt span { display: block; float: left; margin-right: 20px; color: #555; } .bkt span:nth-child(1) { font-size: 2.05rem; font-family: Arial, Helvetica, sans-serif; line-height: 80px; color: #002553; } .bkt span:nth-child(2) { font-size: 1.6rem; line-height: 75px; } .bkbox { width: calc(100% - 330px); height: auto; overflow: hidden; margin: 0 auto; } .secban { height: auto; overflow: hidden; position: relative; } .secban img { width: 100%; height: auto; display: block; visibility: hidden; } .secbant { position: absolute; z-index: 10; color: #002856; visibility: hidden; } .secbant span { display: block; line-height: 160%; } .secbant span:nth-child(1) { font-size: 2.3rem; font-weight: bold; } .secbant span:nth-child(2) { font-size: 1rem; font-family: Arial, Helvetica, sans-serif; } .bant1 { left: 165px; top: 120px; text-align: left; } .bant2 { right: 165px; top: 120px; text-align: right; } .bant3 { width: 100%; left: 0; top: 150px; text-align: center; } .bant4 { left: 165px; bottom: 150px; text-align: left; } .bant5 { right: 165px; bottom: 150px; text-align: right; } .txtshadow { text-shadow: 0 1px 1px #000; } .secbar { width: 100%; height: 45px; line-height: 45px; border-bottom: 1px solid #999; margin-top: 50px; } .secbar a { display: inline-block; vertical-align: top; margin-right: 30px; font-size: 1rem; position: relative; } .secbar a.on { font-weight: bold; color: #002856; } .secbar a.on::after { content: ''; width: 100%; height: 3px; background: #002856; position: absolute; left: 0; bottom: -1px; } @media screen and (max-width: 1680px) { .bkt { margin-top: 60px; } .bkbox { width: calc(100% - 270px); } .secbant span:nth-child(1) { font-size: 2rem; } .secbant span:nth-child(2) { font-size: 0.875rem; } .bant1 { left: 135px; top: 100px; } .bant2 { right: 135px; top: 100px; } .bant3 { top: 130px; } .bant4 { left: 135px; bottom: 120px; } .bant5 { right: 135px; bottom: 120px; } .secbar { margin-top: 40px; } } @media screen and (max-width: 1440px) { .bkbox { width: calc(100% - 240px); } .secbant span:nth-child(1) { font-size: 1.8rem; } .secbant span:nth-child(2) { font-size: 0.75rem; } .bant1 { left: 120px; top: 80px; } .bant2 { right: 120px; top: 80px; } .bant3 { top: 120px; } .bant4 { left: 120px; bottom: 100px; } .bant5 { right: 120px; bottom: 100px; } .secbar { margin-top: 30px; } } @media screen and (max-width: 1280px) { .bkbox { width: calc(100% - 160px); } .secbant span:nth-child(1) { font-size: 1.8rem; } .secbant span:nth-child(2) { font-size: 0.75rem; } .bant1 { left: 80px; top: 60px; } .bant2 { right: 80px; top: 60px; } .bant3 { top: 100px; } .bant4 { left: 80px; bottom: 80px; } .bant5 { right: 80px; bottom: 80px; } .secbar { margin-top: 20px; } } @media screen and (max-width: 1024px) { .bkbox { width: calc(100% - 60px); } .bant1 { left: 40px; top: 50px; } .bant2 { right: 40px; top: 50px; } .bant3 { top: 80px; } .bant4 { left: 40px; bottom: 60px; } .bant5 { right: 40px; bottom: 60px; } }