@charset "UTF-8";

main{
    padding: 80px 0 120px;
}
.topViewContainer{
    padding: 0 50px;
    display: block;
}
.topViewContainer .topView{
    padding: 85px 0;
    text-align: center;
    width: 100%;
    height: 250px;
    border-radius: 16px;
}
.topViewContainer .topView.company{
    background: url("../images/img_top_company.png") no-repeat center / 100% auto;
}
.topViewContainer .topView.history{
    background: url("../images/img_top_history.png") no-repeat center / 100% auto;
}
.topViewContainer .topView.product{
    background: url("../images/img_top_product.png") no-repeat center / 100% auto;
}
.topViewContainer .topView.notice{
    background: url("../images/img_top_notice.png") no-repeat center / 100% auto;
}
.topViewContainer .topView div{
    font-weight: bold;
    color: #fff;
}
.topViewContainer .topView .sub{
    font-size: 18px;
}
.topViewContainer .topView .title{
    font-size: 28px;
    margin-top: 8px;
}
.companyContainer .txtWrap,
.historyContainer .txtWrap,
.productContainer .txtWrap{
    text-align: center;
    margin-top: 70px;
}
.companyContainer .txtWrap .txt1,
.historyContainer .txtWrap .txt1,
.productContainer .txtWrap .txt1{
    font-size: 28px;
    font-weight: bold;
    color: var(--primary);
}
.companyContainer .txtWrap .txt2,
.historyContainer .txtWrap .txt2,
.productContainer .txtWrap .txt2{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7;
    margin-top: 20px;
}
.companyContainer .boxContainer{
    background: #fafafa;
    text-align: center;
    padding: 70px 0;
    margin-top: 60px;
    display: flex;
    gap: 130px;
    align-items: center;
    justify-content: center;
}
.companyContainer .boxContainer .box .txt1{
    font-size: 20px;
    font-weight: bold;
    color: var(--primary);
}
.companyContainer .boxContainer .box img{
    width: 300px;
    height: 300px;
    margin: 30px auto 40px;
}
.companyContainer .boxContainer .box .txt2{
    font-size: 22px;
    font-weight: bold;
}
.companyContainer .boxContainer .box .txt3{
    font-size: 18px;
    line-height: 1.6;
    margin-top: 16px;
    font-weight: 500;
}
.companyContainer .vision{
    display: flex;
    justify-content: space-between;
    margin-top: 120px;
}
.companyContainer .vision .tit{
    font-size: 32px;
    font-weight: bold;
    color: var(--primary);
}
.companyContainer .vision .txt1{
    font-size: 20px;
    font-weight: bold;
    line-height: 1.7;
    margin-top: 24px;
}
.companyContainer .vision .txt2{
    font-weight: 500;
    line-height: 1.6;
    margin-top: 16px;
}
.companyContainer .strength{
    margin-top: 120px;
}
.companyContainer .strength .tit{
    font-size: 32px;
    font-weight: bold;
    color: var(--primary);
}
.companyContainer .strength .txt{
    font-size: 20px;
    font-weight: bold;
    margin-top: 24px;
}
.companyContainer .strength .boxWrap{
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}
.companyContainer .strength .boxWrap .box{
    width: 440px;
    height: 473px;
    text-align: center;
}
.companyContainer .strength .boxWrap .box div{
    color: #fff;
}
.companyContainer .strength .boxWrap .box .title{
    margin-top: 310px;
    font-size: 20px;
    font-weight: bold;
}
.companyContainer .strength .boxWrap .box .sub{
    font-weight: 500;
    line-height: 1.5;
    margin-top: 16px;
}
.companyContainer .strength .boxWrap .box1{
    background: url(../images/img_strength1.png) no-repeat center / 100% auto;
}
.companyContainer .strength .boxWrap .box2{
    background: url(../images/img_strength2.png) no-repeat center / 100% auto;
}
.companyContainer .strength .boxWrap .box3{
    background: url(../images/img_strength3.png) no-repeat center / 100% auto;
}
.historyContainer .historyBox{
    margin-top: 60px;
    padding: 100px 0;
    text-align: center;
    background: #fafafa;
}
.productContainer{
    text-align: center;
}
.productContainer .main-tab{
    padding: 10px;
    background: #fff;
    border: 1px solid #fafafa;
    box-shadow:0 8px 13px 0 rgb(0, 0, 0, 16%);
    border-radius: 40px;
    display: inline-block;
    margin: 40px auto;
}
.productContainer .main-tab li{
    width: 180px;
    height: 48px;
    background: #fff;
    border-radius: 30px;
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: #424242;
    font-weight: 500;
    cursor: pointer;
    display: inline-block;
}
.productContainer .main-tab li.active{
    background: var(--primary);
    color: #fff;
    font-weight: bold;
}
.productContainer .tab-content{
    display: none;
    padding: 80px 0;
}
.productContainer .tab-content.heal{
    background: linear-gradient(180deg, #F5FBFB 0%, #FFFFFF 100%);
}
.productContainer .tab-content.petion{
    background: linear-gradient(180deg, #F6F7FF 0%, #FFFFFF 100%);
}
.productContainer .mySwiper {
    width: 730px;
    height: 520px;
    position: relative;
    overflow: hidden;
}
.productContainer .swiper-wrapper {
    display: flex;
    height: 100%;
}
.productContainer .swiper-slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.productContainer .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.productContainer .tab-content .flex{
    justify-content: center;
}
.productContainer .tab-content .txtWrap{
    text-align: left;
    margin-top: -35px !important;
}
.productContainer .tab-content .txtWrap .logo img{
    width: 285px;
}
.productContainer .tab-content .txtWrap .txt{
    font-size: 18px;
    font-weight: 500;
    margin-top: 24px;
}
.productContainer .tab-content .txtWrap .txt b{
    font-size: 18px;
}
.productContainer .swiper-button-prev,
.productContainer .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 10;
}
.productContainer .swiper-button-prev {
    left: 10px;
    background: url(../images/img_swiper_prev.png) no-repeat center / 50px auto;
}
.productContainer .swiper-button-next {
    right: 10px;
    background: url(../images/img_swiper_next.png) no-repeat center / 50px auto;
}
.noticeContainer{
    margin-top: 80px !important;
    padding: 0 55px;
}
.noticeContainer .count{
    font-weight: 500;
    color: #616161;
}
.noticeContainer .count b{
    color: var(--primary);
}
.noticeContainer .noticeTable{
    margin-top: 32px;
    width: 100%;
}
.noticeContainer .noticeTable thead{
    border-top: 2px solid var(--primary);
    height: 56px;
    border-bottom: 1px solid #eeeeee;
}
.noticeContainer .noticeTable thead th{
    color: #616161;
    font-weight: 500;
}
.noticeContainer .noticeTable tbody tr{
    border-bottom: 1px solid #eeeeee;
    height: 56px;
}
.noticeContainer .noticeTable tbody tr td{
    text-align: center;
}
.noticeContainer .noticeTable tbody td.title{
    text-align: left;
}
.noticeContainer .noticeTable tbody tr.notice .badge{
    width: 60px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    border-radius: 20px;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-weight: bold;
    display: inline-block;
}
.noticeContainer .noticeTable tbody tr.notice td.title{
    font-weight: bold;
}
.noticeContainer .noticeTable tbody tr.content td{
    height: 500px;
    overflow-y: auto;
    text-align: left !important;
    padding: 40px;
    font-weight: 500;
    vertical-align: text-top;
}
.noticeContainer .listBtn{
    display: inline-block;
    padding: 14px 40px;
    background: var(--primary);
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    font-weight: bold;
}