.tubest-title { font-size: 25px; font-weight: 400; color: rgba(19, 70, 153, 1); line-height: 40px; text-align: center; max-width: 555px; margin: 0 auto; position: relative; &::after { position: absolute; content: ''; bottom: -10px; width: 70%; height: 2px; background: #1F4883; left: 49%; transform: translateX(-50%); } } .download { width: 203px; height: 44px; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: #134699; color: #fff; margin: 0 auto; margin-top: 40px; margin-bottom: 5px; } .tips { font-size: 12px; font-weight: 400; color: rgba(181, 181, 182, 1); display: flex; flex-direction: column; span { text-align: center; } } .cards { margin-top: 50px; justify-content: space-between; display: flex; align-items: center; div { background: rgb(239,239,239); padding: 0 1%; width: 21.66%; height: 263px; padding-top: 3%; display: flex; flex-direction: column; align-items: center; padding-bottom: 2%; span:first-child { font-size: 20px; font-weight: 400; color: rgba(0, 0, 0, 1); } span:nth-child(2) { font-size: 16px; font-weight: 300; color: rgba(114, 113, 113, 1); margin: 1% 0; text-align: center; height: 80px; } img { height: 70px; } } } .tubest-head { display: flex; align-items: center; font-size: 24px; font-weight: 300; color: rgba(89, 87, 87, 1); justify-content: center; margin: 60px 0; img { width: 62px; margin: 0 10px; } } .tubest-show { overflow: hidden; height: 760px; } .tubest-show-auto{ height: auto !important; } .tubest-com { display: flex; align-items: center; padding: 10px 0; position: relative; &>div { flex: 1; border: 1px solid #C3C0C3; border-radius: 5px; &.tubest-c { padding: 10px 0; position: absolute; left: 33.33%; width: 33.33%; height: 100%; top: 0; z-index: 2; background: rgb(242,242,242); box-shadow: 0px 0px 3px #666; } &.t-border-none { border: none; } } .t-com-head { height: 272px; padding-top: 67px; display: flex; flex-direction: column; align-items: flex-end; padding-right: 30px; justify-content: space-between; padding-bottom: 20px; &>span:first-child { font-size: 24px; font-weight: 500; color: rgba(89, 87, 87, 1); } &>span:last-child { font-size: 20px; font-weight: 500; color: rgba(89, 87, 87, 1); } div { img { width: 64px; } &:first-child { font-size: 24px; font-weight: 500; color: rgba(19, 70, 153, 1); } &:last-child { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 1); width: 141px; height: 42px; text-align: center; line-height: 42px; background: #13459B; border-radius: 5px; } } } .t-com-head-c { align-items: center; padding-right: 0; } .t-com-main { display: flex; flex-direction: column; &>div { height: 60px; display: flex; align-items: center; justify-content: center; text-align: right; color: #595757; text-align: center; img { width: 30px; } &:nth-child(odd) { background: #F8F8F8; } } .t-com-main-title { font-size: 20px; font-weight: 500; color: rgba(89, 87, 87, 1); } } .t-com-c>div{ color: rgb(19, 70, 153); font-size: 20px; } .t-com-r>div{ color: rgb(142, 142, 142); font-size: 20px; } .t-com-main-r { &>div { justify-content: flex-end; padding-right: 30px; } } .t-com-foot { height: 122px; display: flex; align-items: center; justify-content: center; div { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 1); width: 141px; height: 42px; text-align: center; line-height: 42px; background: #13459B; border-radius: 5px; } } } .close-tubest { display: none; width: 60px; margin: 0 auto; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; margin-top: 10px; margin-bottom: 20px; img { width: 20px; margin-bottom: 7px; } span { font-size: 12px; font-weight: 500; color: rgba(114, 113, 113, 1); } } .show-tubest { width: 110px; margin: 0 auto; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 10px; margin-bottom: 20px; img { width: 20px; margin-top: 7px; } span { font-size: 12px; font-weight: 500; color: rgba(114, 113, 113, 1); } } .download { cursor: pointer; } .t-com-head { &>div:last-child { cursor: pointer; } } .t-com-foot { &>div { cursor: pointer; } } .cypnest-right{ display: flex; align-items: center; justify-content: space-around; background-size: contain; &>div{ display: flex; flex-direction: column; align-items: center; justify-content: space-around; height: 320px; flex: 1; img{ max-height: 320px; } &.cyp-title{ justify-content: center; span:first-child{ font-size:28px; font-weight:500; color:rgba(30,61,118,1); margin-bottom: 20px; } span:last-child{ max-width: 70%; } } } } .cypnest-right{ background:#fff; } .cypnest-right:nth-child(odd){ background:#F2F2F2; } .tubest-show-auto{ .t-com-head{ height: 115px; line-height: 115px; font-weight: 600; padding-top: 0 !important; div:first-child{ font-size: 28px; } } } @media screen and (max-width: 992px){ .tubest-com .t-com-c>div,.tubest-com .t-com-r>div{ font-size: 16px ; } } @media screen and (max-width: 576px){ .tubest-com .t-com-main > div{ font-size: 12px; } .moreText{ min-height: 100px !important; } .tubest-head{ font-size: 16px; margin: 20px 0; text-align: center; } .tubest-com .t-com-head div:first-child{ font-size: 14px !important; } .tubest-com .t-com-head{ padding-top: 0; height: 70px !important; padding-bottom: 10px; } .tubest-com .t-com-head div img{ width: 25px; } .tubest-com .t-com-head{ padding-top: 10px; } .tubest-show-auto .t-com-head{ line-height: 40px; height: 50px !important; } }