@charset "utf-8";

h1{ font-size: 48px; font-weight: 700; color: #000000;}
h2{ font-size: 32px; font-weight: 700; color: #000000;}
h3{ font-size: 28px; font-weight: 700; color: #000000;}
h4{ font-size: 20px; font-weight: 600; color: #000000;}
h5{ font-size: 18px; font-weight: 600; color: #000000;}
.b1{ font-size: 18px; font-weight: 400; color: #000000;}
.b2{ font-size: 16px; font-weight: 400; color: #000000;}
.b3{ font-size: 14px; font-weight: 400; color: #000000;}
.b4{ font-size: 14px; font-weight: 500; color: #000000;}
.b5{ font-size: 14px; font-weight: 400; color: #505050;}
@media(max-width: 768px){
    h1{ font-size: 2rem;}
    h2{ font-size: 1.8rem;}
    h3{ font-size: 1.6rem;}
    h4{ font-size: 1.2rem;}
    h5{ font-size: 1.1rem;}
    .b1{ font-size: 1.1rem;}
    .b2{ font-size: 1rem;}
    .b3{ font-size: 0.9rem;}
    .b4{ font-size: 0.9rem;}
    .b5{ font-size: 0.9rem;}
}


.modle_mt64{ margin-top: 64px !important;}
@media(max-width: 768px){
    .modle_mt64{ margin-top: 4rem;}
}

.modle_btn_01{ display: flex; justify-content: center; align-items: center; padding: 0 50px; height: 50px; background: #324058; transition: all .2s; cursor: pointer;}
.modle_btn_01 h5{ color: #FFF;}
.modle_btn_01:hover{ background: #3D4F6F; box-shadow: 0 4px 4px 0 rgba(0 0 0/25%); transition: all .2s;}
@media(max-width: 768px){
    .modle_btn_01{ padding: 0 3rem; height: 3rem;}
}


.modle_btn_02{ display: flex; justify-content: center; align-items: center; margin: 20px auto 0 auto; width: 516px; height: 70px; background: #324058; transition: all .2s; cursor: pointer;}
.modle_btn_02 h3{ color: #FFF;}
.modle_btn_02:hover{ background: #3D4F6F; box-shadow: 0 4px 4px 0 rgba(0 0 0/25%); transition: all .2s;}
@media(max-width: 768px){
    .modle_btn_02{ margin: 1rem auto 0 auto; width: 100%; height: 4rem;}
}


.modle_more{ display: flex; justify-content: center; align-items: center; grid-gap: 10px; padding: 0 10px; height: 28px; border-radius: 4px; border: 1px solid #324058; transition: all .2s; cursor: pointer;}
.modle_more p{ transform: translate(0,1px); font-size: 14px; font-weight: 600; color: #324058;}
.modle_more img{ display: block; height: 11px;}
.modle_more:hover{ box-shadow: 0 2px 4px 0 rgba(0 0 0/15%) inset;}
@media(max-width: 768px){
    .modle_more{ grid-gap: 0.5rem; padding: 0 0.5rem; height: 1.8rem; border-radius: 0.4rem;}
    .modle_more p{ font-size: 0.8rem;}
    .modle_more img{ height: 0.8rem;}
}


.modle_scrollbar::-webkit-scrollbar{ width: 4px; background: rgba(0 0 0/10%);}
.modle_scrollbar::-webkit-scrollbar-thumb{ border-radius: 10px; background: #5BBDB5;}
@media(max-width: 1440px){
}
@media(min-width: 1024px){
}
@media(max-width: 768px){
}


.modle_max{ padding-right: 80px !important; padding-left: 80px !important;}
.modle_min{ margin: 0 auto; max-width: 1280px; width: 100%;}
@media(max-width: 1440px){
    .modle_max{ padding-right: 50px !important; padding-left: 50px !important;}
}
@media(max-width: 768px){
    .modle_max{ padding-right: 1.2rem !important; padding-left: 1.2rem !important;}
}


.modle_cb{ clear: both;}
@media(max-width: 768px){
}


.modle_page{ display: flex; justify-content: center; align-items: center; grid-gap: 20px; margin: 64px 0 0 0;}
.modle_page img{ display: block; cursor: pointer;}
.modle_page img.prev{ margin-right: 24px;}
.modle_page img.next{ margin-left: 24px;}
.modle_page p{ display: flex; justify-content: center; align-items: center; padding: 0 10px; min-width: 32px; height: 32px; background: #324058; font-size: 18px; font-weight: 600; color: #FFF; cursor: pointer;}
@media(max-width: 768px){
    .modle_page{ grid-gap: 1rem; margin: 3rem 0 0 0;}
    .modle_page img{ height: 1.5rem}
    .modle_page img.prev{ margin-right: 1rem;}
    .modle_page img.next{ margin-left: 1rem;}
    .modle_page p{ padding: 0 0.5rem; min-width: 2rem; height: 2rem; font-size: 1rem;}
}