/* ===============================================================
    * about
=============================================================== */
.about {position: relative;}
.about:after {content: ''; position: absolute; right: 0; top: 0; width: 120px; height: 442px; background: var(--color-3); z-index: -1;}
.about-box {width: 100%; height: 940px; display: flex; justify-content: space-between; align-items: flex-start; padding-top: 60px;}
.about-box .imgbox {width: 62%; height: 100%; position: relative; overflow: hidden;}
.about-box .imgbox img {position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 100%; width: auto; min-width: 100%; object-fit: cover;}
.about-box .txtbox {width: 38%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;}
.txtbox .tit {width: 100%; display: flex; justify-content: space-between; align-items: flex-end;}
.txtbox .tit h2 {position: relative; z-index: 1; font-size: 110px; line-height: 117px; margin-top: -70px; margin-left: -60px;}
.txtbox .tit p {font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 60px; white-space: nowrap;}
.txtbox-wrap {padding-left: 120px;}
.txtbox-wrap .txt {font-size: 14px; line-height: 34px; letter-spacing: -0.02em; color: #999;}
.txtbox-wrap .img {margin-top: 100px;}
.about .img-wrap {margin-top: 120px;}

.location .tit {display: flex; justify-content: flex-start; align-items: flex-end;}
.location h2 {font-size: 50px; padding-right: 20px;}
.location p {font-size: 14px; color: #777;}
.map {width: 100%; height: 650px; border: 1px solid #eee; margin-top: 60px;}
.location .info-box {display: flex; justify-content: space-between; align-items: center; padding: 60px 0;}
.location .contact {display: flex; justify-content: flex-start; align-items: center;}
.location .contact .box {display: flex; justify-content: flex-start; align-items: center;}
.location .contact .box:first-of-type {margin-right: 60px;}
.location .contact .icon {font-size: 40px; padding-right: 10px;}
.location .contact .txt h3 {font-size: 14px; letter-spacing: 0.1em; margin-bottom: 5px;}
.location .contact .txt p {font-size: 14px; color: #777;}
.location .traffic {display: flex; justify-content: flex-end; align-items: center;}
.location .traffic a {width: 220px; height: 50px; line-height: 50px; background: var(--color-1); color: #fff; margin-left: 10px; text-align: center; font-size: 14px; letter-spacing: -0.02em;}
.location .traffic a i {font-size: 18px; padding-right: 5px;}

@media (max-width: 992px){
    .about:after {display: none;}
    .about-box {display: block; height: auto; padding-top: 0;}
    .about-box .imgbox {width: 100%; height: 300px;}
    .about-box .txtbox {width: 100%; display: block;}
    .txtbox .tit {margin-top: -40px; margin-bottom: 40px;}
    .txtbox .tit h2 {font-size: 65px; line-height: 70px; margin-top: 0; margin-left: 0;}
    .txtbox .tit p {font-size: 16px; margin-right: 0;}
    .txtbox-wrap {padding-left: 0;}
    .txtbox-wrap .txt {font-size: 12px; line-height: 24px;}
    .txtbox-wrap .img {margin-top: 50px;}
    .about .img-wrap {margin-top: 60px; padding: 0;}

    .location .tit {display: block;}
    .location h2 {font-size: 30px; padding-right: 0; margin-bottom: 10px;}
    .location p {font-size: 12px;}
    .map {height: 250px; margin-top: 30px;}
    .location .info-box {display: block; padding: 40px 0 60px;;}
    .location .contact {display: block;}
    .location .contact .box:first-of-type {margin-right: 0; margin-bottom: 30px;}
    .location .contact .icon {font-size: 43px;}
    .location .contact .txt h3 {font-size: 14px;}
    .location .contact .txt p {font-size: 14px;}
    .location .traffic {justify-content: space-between; margin-top: 40px;}
    .location .traffic a {width: calc(50% - 5px); height: 40px; line-height: 40px; font-size: 12px; margin: 0;}
    .location .traffic a i {font-size: 14px;}
}