/* ===============================================================
    * about top slider
=============================================================== */
.top-ctrl {left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center;}
.top-bar {margin: 60px auto 40px;}
.top-tit h2 {font-size: 50px;}
.top-nav {justify-content: center; margin: 60px auto 170px;}
.about p {font-size: 18px; letter-spacing: 0.1em;}
@media (max-width: 850px){
    .top-slider {height: 211px; margin-top: 50px;}
    .top-slider .width-bd {position: static; transform: none; padding: 15px;}
    .top-ctrl {position: static; transform: none; display: flex; justify-content: flex-start; align-items: center;}
    .top-pager {font-size: 20px; color: #8d9aa8; width: auto;}
    .top-pager .swiper-pagination-current {color: #263a4f;}
    .top-bar {display: inline-block; width: 43px; height: 3px; margin: 0 0 0 10px;}
    .top-nav {margin: 0; margin-left: auto; color: #263a4f; font-size: 30px;}
    .top-nav i {padding: 0 0 0 10px;}
    .top-nav .swiper-button-disabled {color: #8d9aa8;}
}
/* ===============================================================
    * about-intro
=============================================================== */
.about-intro {position: relative;}
.intro1 {position: relative;}
.intro1 > span {position: absolute; font-size: 14px; letter-spacing: 0.1em; transform: rotate(90deg); left: 80px; transform-origin: left; top: 150px;}
.intro1 .width-bd {position: relative; padding: 150px 0; background: #fff;}
.intro1 h2 {font-size: 60px; letter-spacing: 0.02em;}
.intro1 h3 {font-size: 20px; line-height: 36px; letter-spacing: 0.06em; margin: 40px 0 80px;}
.intro-text {display: flex; justify-content: flex-start; align-items: flex-start;}
.intro-text h4 {font-size: 22px; width: calc((100% / 3 ) * 1);}
.intro-box {width: calc((100% / 3 ) * 2);}
.intro-box span {display: block; width: 150px; height: 2px; margin-bottom: 50px;}
.intro-box p {font-size: 14px; line-height: 30px; letter-spacing: 0.015em; width: 60%;}
.deco1 {position: absolute; right: 0; top: 0; bottom: 0; width: 375px; z-index: -1;}
.intro2 {position: relative; margin-bottom: 150px;}
.deco2 {position: absolute; left: 0; top: 0; bottom: 0; width: 375px; z-index: -1;}
.intro2 .width-bd {position: relative; z-index: 100; border-left: 1px solid white;}
.intro-img {width: 100%; height: 650px;} 
@media (max-width: 850px){
    .about-intro {margin-top: 60px;}
    .intro1 .width-bd {padding: 0 15px 40px;}
    .intro1 h2 {font-size: 35px;}
    .intro1 h3 {font-size: 12px; line-height: 20px; margin: 20px 0 30px;}
    .intro-text {display: block;}
    .intro-text h4 {font-size: 16px; width: 100%;}
    .intro-box {width: 100%;}
    .intro-box span {width: 75px; height: 1px; margin: 30px 0;}
    .intro-box p {font-size: 12px; line-height: 19px; width: 100%; }
    .intro2 {padding: 0 15px 60px; margin-bottom: 0;}
    .intro-img {height: 195px;}
}
/* ===============================================================
    * about-img
=============================================================== */
.about-img {padding-bottom: 150px;}
.about-img ul {display: flex; justify-content: center; align-items: center; }
.about-img li {width: calc(100% / 3); height: 60px; line-height: 60px; text-align: center; font-size: 16px; letter-spacing: 0.02em; cursor: pointer; transition: .3s; border-bottom: 1px solid #dddddd;}
.about-img li.active {background: #a3cc01; color: #fff; border-color: #a3cc01;}
.img-wrap {position: relative; width: 100%; height: 750px;}
.img-box {position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; transition: .3s;}
.img-box.active {opacity: 1;}
@media (max-width: 850px){
    .about-img {padding-bottom: 60px;}
    .about-img ul {display: block;}
    .about-img li {width: 100%; height: 40px; line-height: 40px; font-size: 14px;}
    .about-img li:first-of-type {border-top: 1px solid #ddd;}
    .img-wrap {height: 212px;}
}
/* ===============================================================
    * location
=============================================================== */
.location h2 {font-size: 50px;}
.location h3 {font-size: 16px; letter-spacing: 0.04em; margin: 20px 0 40px;}
.loca {display: flex; justify-content: flex-start; align-items: flex-start; margin-bottom: 30px;}
.loca span {font-size: 16px; margin-right: 20px;}
.loca p {font-size: 14px; line-height: 20px; letter-spacing: 0.02em; color: #777;}
.map {margin: 50px 0 150px; width: 100%; height: 530px; border: 1px solid #e0e0e0;}
.deco-img {width: 100%; height: 500px; background-position: bottom center;}
@media (max-width: 850px){
    .location .width-bd {padding: 0 15px;}
    .location h2 {font-size: 30px;}
    .location h3 {font-size: 14px; margin: 15px 0 25px;}
    .loca {margin-bottom: 20px;}
    .loca span {font-size: 14px; margin-right: 10px;}
    .loca:last-of-type {display: block;}
    .loca:last-of-type p {margin-top: 10px;}
    .map {height: 325px; margin: 0 0 60px;}
    .deco-img {height: 212px;}
}