/* ===============================================================
    * about
=============================================================== */
.about {position: relative;}
.about:after {content: ''; position: absolute; right: 0; bottom: 0; width: 50%; height: 450px; background: #f6f6f6; z-index: -1;}
.about img {width: 100%; height: 100%; object-fit: cover;}
.about-top {display: flex; justify-content: space-between; align-items: flex-start;}
.about-top .txtbox {width: 50%;}
.about-top .txtbox h2 {font-size: 30px; display: inline-block; position: relative; text-transform: capitalize; margin-bottom: 70px;}
.about-top .txtbox h2:after {content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--color-1);}
.about-top .txtbox .txt1 {font-size: 30px; line-height: 48px;}
.about-top .txtbox .txt2 {font-size: 16px; line-height: 32px; color: #777; margin: 40px 0 30px;}
.about-top .txtbox .txt3 {font-size: 12px; line-height: 28px; color: #bbb;}
.about-top .btns {margin-top: 70px; display: flex; justify-content: flex-start; align-items: center;}
.about-top .btns a {width: 170px; height: 52px; line-height: 52px; text-align: center; font-size: 14px; letter-spacing: 0.04em; background: var(--color-1); color: #fff; margin-right: 20px; border-color: var(--color-1); transition: .4s;}
.about-top .btns a:hover {background: var(--color-2); border-color: var(--color-2);}
.about-top .imgbox {width: 50%;}
.about-top .imgbox .img {width: 100%; margin-bottom: 20px;}
.about .img-wrap {padding: 100px 150px 0;}

.about-btm {display: flex; justify-content: space-between; align-items: flex-start; padding-top: 120px;}
.about-btm .box1 {position: relative; width: 50%; padding: 0 100px 0 60px;}
.about-btm .box1:after {content: ''; position: absolute; left: 0; right: 160px; bottom: -60px; height: 570px; background: #f6f6f6; z-index: -1;}
.about-btm .box1 .img {width: 100%; height: 700px;}
.about-btm .box2 {width: 50%; padding-left: 100px;}
.about-btm .box2 .txtbox {padding-left: 40px;}
.about-btm .box2 .txt1 {font-size: 24px; line-height: 40px;}
.about-btm .box2 .txt2 {font-size: 16px; line-height: 36px; margin: 40px 0 160px; color: #777;}
.about-btm .box2 .imgbox {width: 100%;}
@media (max-width: 992px){
    .about {padding-bottom: 90px;}
    .about:after {width: 100%; left: 0; height: 190px; bottom: 60px;}
    .about-top {display: block;}
    .about-top .txtbox {width: 100%;}
    .about-top .txtbox h2 {font-size: 25px; margin-bottom: 30px;}
    .about-top .txtbox .txt1 {font-size: 22px; line-height: 32px;}
    .about-top .txtbox .txt2 {font-size: 14px; line-height: 24px; margin: 30px 0 20px;}
    .about-top .txtbox .txt3 {font-size: 12px; line-height: 22px;}
    .about-top .btns {margin-top: 40px; margin-bottom: 40px;}
    .about-top .btns a {width: 125px; height: 35px; line-height: 35px; font-size: 12px; margin-right: 10px;}
    .about-top .imgbox {width: 100%;}
    .about-top .imgbox .img {margin-bottom: 10px;}
    .about .img-wrap {padding: 50px 0 0;}

    .about-btm {display: block; padding-top: 60px;}
    .about-btm .box1 {width: 100%; padding: 0 0 0 15px;}
    .about-btm .box1:after {left: 0; right: 30px; bottom: -30px; height: auto; top: 120px;}
    .about-btm .box1 .img {height: 390px;}
    .about-btm .box2 {width: 100%; padding-left: 0;}
    .about-btm .box2 .txtbox {padding-left: 0; padding-top: 60px;}
    .about-btm .box2 .txt1 {font-size: 18px; line-height: 27px;}
    .about-btm .box2 .txt2 {font-size: 12px; line-height: 22px; margin: 25px 0;}
    .about-btm .box2 .imgbox {width: calc(100% - 15px);}
}

/* ===============================================================
    * location
=============================================================== */
.location .tit {display: flex; justify-content: space-between; align-items: flex-end;}
.location .tit h2 {font-size: 42px;}
.location .tit p {font-size: 18px;}
.location .contact {display: flex; justify-content: flex-start; align-items: center; margin: 40px 0; padding: 40px 0; border: 1px solid #ccc; border-left: none; border-right: none;}
.location .contact .box {margin-right: 60px; display: flex; justify-content: flex-start; align-items: center;}
.contact .box .icon {font-size: 40px; padding-right: 15px;}
.contact .box .txt h3 {font-size: 14px; margin-bottom: 7px;}
.contact .box .txt p {font-size: 14px; color: #777;}
.location .info {display: flex; justify-content: space-between; align-items: center;}
.location .info p {font-size: 18px;}
.location .info a {display: inline-block; margin-left: 10px; width: 220px; height: 50px; line-height: 50px; background: var(--color-1); color: #fff; text-align: center; border-color: var(--color-1); transition: .4s;}
.location .info a:hover {background: var(--color-2); border-color: var(--color-2);}
.location .info a i {padding-right: 5px;}
.map {margin-top: 40px; width: 100%; height: 700px; border: 1px solid #eee;}
@media (max-width: 992px){
    .location {padding: 60px 0;}
    .location .tit {display: block;}
    .location .tit h2 {font-size: 24px; margin-bottom: 10px;}
    .location .tit p {font-size: 12px;}
    .location .contact {display: block; margin: 30px 0; padding: 0;}
    .location .contact .box {margin: 30px 0;}
    .contact .box .icon {font-size: 30px;}
    .contact .box .txt h3 {font-size: 12px; margin-bottom: 5px;}
    .contact .box .txt p {font-size: 12px;}
    .location .info {display: block;}
    .location .info p {font-size: 14px; line-height: 24px; margin-bottom: 20px;}
    .location .info a {width: 150px; height: 38px; line-height: 38px; margin: 0 10px 0 0; font-size: 12px;}
    .map {margin-top: 30px; height: 300px;}
}