﻿:root { --color-rgba: 0, 65, 134; --color-sub-rgba: 171, 193, 11; --color-hex: #D00212; --color-sub-hex: #FF7C40 }

.bg-hover { background: #12498f; color: #fff; }
.bg-hover:hover { border-color: #12498f; background: none; color: #12498f }

.container { width: 92%; max-width: 1920px; margin: 0 auto; padding: 0; }
.w1520 { width: 92%; max-width: 1920px; margin: 0 auto; }

@media (min-width: 1300px) {
    .container { width: 92%; max-width: 1920px; margin: 0 auto; padding: 0; }
    .w1520 { width: 92%; max-width: 1920px; margin: 0 auto; }
}



img { max-width: 100%; }
ul, li { padding: 0; margin: 0; list-style: none; }
.fl { float: left; }
.fr { float: right; }
a { color: #333; text-decoration: none; }
    a:hover, a:active, a:focus { text-decoration: none; color: var(--color-hex); }
.db { display: block; }
.i-ell { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; }
.i-ell-2 { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.i-ell-3 { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.i-ell-4 { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }

.vertical_img { display: block; width: 100%; position: relative; overflow: hidden; background: #fff; cursor: pointer; }
    .vertical_img img.bgimg { width: 100%; }
    .vertical_img img.up-pic { transform: translateZ(0px); transition: transform 0.8s ease 0s; position: absolute; left: 0; top: 50%; width: 100%; z-index: 2; transform: translateY(-50%); }

.lazyloadimg { position: relative; overflow: hidden; cursor: pointer; margin: 0; padding: 0; }
    .lazyloadimg img.bgimg { width: 100%; }
    .lazyloadimg img.img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; z-index: 2; transition: all .8s; }
    .lazyloadimg.transform { }


@media (min-width: 767px) {
    .vertical_img:hover img.up-pic, .lazyloadimg:hover img.img { transform: scale(1.05, 1.05) translateY(-48%); transition: all .8s; }
}


.swiper-btn { display: flex; height: 40px; align-items: center; }

@media screen and (max-width: 640px) {
    .swiper-btn { height: 32px; }
}

.swiper-btn .swiper-button-next,
.swiper-btn .swiper-button-prev { width: 40px; height: 40px; background-color: var(--color-hex); background-repeat: no-repeat; background-position: center center; background-size: 35%; position: static; transition: all 0.36s; margin-top: 0; margin-left: 18px; outline: none; }

@media screen and (max-width: 640px) {

    .swiper-btn .swiper-button-next,
    .swiper-btn .swiper-button-prev { width: 32px; height: 32px; }
}

.swiper-btn .swiper-button-next:hover,
.swiper-btn .swiper-button-prev:hover { background-color: var(--color-sub-hex); }

.swiper-btn .swiper-button-prev::after { font-family: iconfont; content: "\e671"; color: #fff; font-size: 1rem; }
.swiper-btn .swiper-button-next::after { font-family: iconfont; content: "\e66f"; color: #fff; font-size: 1rem; }





.i-more { padding: 3.75rem 0 3.75rem; text-align: center; }
    .i-more a { height: 1.2rem; line-height: 1.2rem; padding-left: 1.2rem; padding-right: 1.2rem; display: inline-block; border-radius: 0.15rem; text-transform: uppercase; color: #fff; background: var(--color-hex); text-align: center; color: #FFFFFF; transition: all .36s ease; border: 1px solid var(--color-hex); }
        .i-more a:hover { border: 1px solid #666; background: none; background-color: #222; color: #fff; }
.i-more2 { text-align: center; margin-bottom: 3.75rem; }
    .i-more2 a { line-height: 1.1rem; height: 1.1rem; padding-left: 1.25rem; padding-right: 1.6rem; position: relative; border-radius: 0.675rem; background: var(--color-hex); color: white; text-transform: capitalize; display: inline-block; text-align: center; font-size: 1.25rem; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s; }
        .i-more2 a i { width: 2rem; height: 2rem; line-height: 2rem; border-radius: 100%; color: var(--color-hex); font-size: 1rem; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 10px; background: white; text-align: center; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s; }
        .i-more2 a:hover i { -webkit-animation: td .5s linear; -o-animation: td .5s linear; -ms-animation: td .5s linear; -moz-animation: td .5s linear; animation: td .5s linear; }
        .i-more2 a.dataText { overflow: hidden; }

.home-more { background: #FF7C40; padding: 8px 8px; color: #fff; max-width: 200px; font-family: "Montserrat-B"; transition: all .3s ease; border-style: solid; border-width: 1px; border-color: #FF7C40; border-radius: 4px; }
.home-more:hover { background: #D00212; color: #FFFFFF; }

.home-more2 { background: #FF7C40; padding: 14px 14px; color: #fff; display: block; max-width: 200px; height: 100%; text-align: center; font-family: "Montserrat-B"; transition: all .3s ease; border-radius: 4px; }
.home-more2:hover { background: #D00212; color: #FFFFFF; }

@media (max-width: 768px) {
.home-more2 { display: none; }
}

.i-pagination { bottom: 0px; z-index: 1; text-align: center; margin: 5px 0; }
    .i-pagination .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 5px !important; background-color: #3b373a; opacity: 1; position: relative; }
    .i-pagination .swiper-pagination-bullet-active { background-color: var(--color-hex); width: 30px; border-radius: 12px; }

/*h2.i-title { font-size: 0.9rem; line-height: 1.1rem; font-weight: 600; text-align: center; padding-bottom: 1.25rem; padding-top: 1rem; position: relative; }
    h2.i-title::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 5px; width: 1rem; background: var(--color-hex); border-radius: 4px; }*/
.i-title { width: 100%; padding-bottom: 0.75rem; background: url(../img/line.png) no-repeat bottom; margin: 1.25rem 0; }
    .i-title h2 { font-size: 0.9rem; line-height: 0.9rem; text-align: center; font-weight: bold; }
    .i-title p { font-size: 1.25rem; line-height: 1.5rem; text-align: center; margin-top: 10px; }

.tit01 { text-align: center; color: #333333; font-weight: bold; margin: 0 0 3.125rem 0; }
    .tit01 a { color: #333333; }
    .tit01 p { font-weight: normal; display: block; color: #333333; }



.i-tit { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; align-items:center; }

.i-tit h1, .i-tit h2 { font-size: 36px; line-height: 1.5; position: relative; }
.i-tit i { font-style: normal; }
.i-tit h2::after { display: block; content: " "; width: 60px; height: 2px; background-color: rgba(188, 11, 21, 1); margin-top: 15px; }	
.i-tit p { line-height: 2; }

@media screen and (max-width: 768px) {
.i-tit h1, .i-tit h2 { font-size: 22px; color: #333333; line-height: 1.5; }
}

.tit-24 { line-height: 1.8; font-size: 24px; }
.tit-25 { line-height: 1.8; font-size: 25px; }
.tit-26 { line-height: 1.8; font-size: 26px; }
.tit-27 { line-height: 1.8; font-size: 27px; }
.tit-28 { line-height: 1.8; font-size: 28px; }
.tit-29 { line-height: 1.8; font-size: 29px; }
.tit-30 { line-height: 1.8; font-size: 30px; }
.tit-31 { line-height: 1.8; font-size: 31px; }
.tit-32 { line-height: 1.8; font-size: 32px; }
.tit-33 { line-height: 1.8; font-size: 33px; }
.tit-34 { line-height: 1.8; font-size: 34px; }
.tit-35 { line-height: 1.8; font-size: 35px; }
.tit-36 { line-height: 1.8; font-size: 36px; }

@media (max-width: 1681px) {
.tit-24 { font-size: 22px; }
.tit-25 { font-size: 23px; }
.tit-26 { font-size: 24px; }
.tit-27 { font-size: 25px; }
.tit-28 { font-size: 26px; }
.tit-29 { font-size: 27px; }
.tit-30 { font-size: 27px; }
.tit-31 { font-size: 28px; }
.tit-32 { font-size: 29px; }
.tit-33 { font-size: 30px; }
.tit-34 { font-size: 31px; }
.tit-35 { font-size: 32px; }
.tit-36 { font-size: 33px; }
}

@media (max-width: 1481px) {
.tit-24 { font-size: 20px; }
.tit-25 { font-size: 21px; }
.tit-26 { font-size: 22px; }
.tit-27 { font-size: 23px; }
.tit-28 { font-size: 24px; }
.tit-29 { font-size: 25px; }
.tit-30 { font-size: 26px; }
.tit-31 { font-size: 25px; }
.tit-32 { font-size: 26px; }
.tit-33 { font-size: 27px; }
.tit-34 { font-size: 28px; }
.tit-35 { font-size: 29px; }
.tit-36 { font-size: 30px; }
}

@media (max-width: 1281px) {
.tit-24 { font-size: 19px; }
.tit-25 { font-size: 20px; }
.tit-26 { font-size: 21px; }
.tit-27 { font-size: 22px; }
.tit-28 { font-size: 23px; }
.tit-29 { font-size: 24px; }
.tit-30 { font-size: 25px; }
.tit-31 { font-size: 26px; }
.tit-32 { font-size: 27px; }
.tit-33 { font-size: 24px; }
.tit-34 { font-size: 25px; }
.tit-35 { font-size: 26px; }
.tit-36 { font-size: 27px; }
}

@media (max-width: 1024px) {
.tit-24 { font-size: 16px; }
.tit-25 { font-size: 17px; }
.tit-26 { font-size: 18px; }
.tit-27 { font-size: 19px; }
.tit-28 { font-size: 20px; }
.tit-29 { font-size: 21px; }
.tit-30 { font-size: 22px; }
.tit-31 { font-size: 23px; }
.tit-32 { font-size: 24px; }
.tit-33 { font-size: 21px; }
.tit-34 { font-size: 22px; }
.tit-35 { font-size: 23px; }
.tit-36 { font-size: 24px; }
}

@media (max-width: 768px) {
.tit-33 { font-size: 20px; }
.tit-34 { font-size: 21px; }
.tit-35 { font-size: 22px; }
.tit-36 { font-size: 23px; }
}
