/* common */
.location .title-area {text-align: center;}
.location .title-area .title {font-size: 50px; font-weight: 700; color: #000; margin-bottom: 25px;}
.location .title-area .title::before {content: ''; display: block; width: 50px; height: 3px; background: #e50050; margin: 0 auto 10px;}
.location .title-area .desc {font-size: 16px; font-weight: 300; line-height: 1.88; color: #4c4c4c;}

/* location */
.location {position: relative; padding: 80px 0 95px; overflow: hidden; z-index: 1;}
.location::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 590px; background: #f7f7f7; z-index: -1;}
.location .title-area .title {margin-bottom: 45px;}

.location .map-area .inner {max-width: 1500px; padding: 0;}
.location .group-map .location-map {height: 650px; border-radius: 20px; border: 1px solid #ddd; overflow: hidden;}
.location .root_daum_roughmap .wrap_map {height: inherit;}
.location .root_daum_roughmap .wrap_controllers {display: none;}

.location .info-area {position: relative ;margin-top: -80px; z-index: 2;}
.location .info-area .inner {display: flex;}
.location .info-area .location-logo {width: 435px; border-radius: 20px 0 0 20px; background: url("../img/loca_ptn.jpg"); padding: 60px 0; text-align: center;}
.location .info-area .contact-list {width: calc(100% - 435px); display: flex; background: #fff; padding: 50px 0; border-radius: 0 20px 20px 0; border: 1px solid #ddd;}
.location .info-area .contact-item {width: 33.33%; text-align: center; padding: 0 15px;}
.location .contact-item + .contact-item  {border-left: 1px solid #ddd;}
.location .contact-list i[class^="xi-"] {font-size: 40px; transition: .5s;}
.location .contact-item:hover i[class^="xi-"] {transform: rotateY(180deg);}
.location .contact-item:nth-child(1) i[class^="xi-"] {color: #ff0051;}
.location .contact-item:nth-child(2) i[class^="xi-"] {color: #595656;}
.location .contact-item:nth-child(3) i[class^="xi-"] {color: #009e96;}
.location .contact-list .title {display: block; margin-top: 12px; font-size: 23px; font-weight: 700; color: #000;}
.location .contact-list .desc {margin-top: 7px; font-size: 16px; font-weight: 300; color: #4c4c4c;}

/* media query */
@media screen and (max-width: 1700px) {
    /* common */
    .location {padding: 80px 0 95px;}
    .location .inner {padding: 0 20px;}
}

@media screen and (max-width: 1500px) {

}

@media screen and (max-width: 1400px) {
    /* common */
    .location {padding: 80px 0 95px;}
    .location .inner {padding: 0 60px;}
}

@media screen and (max-width: 1300px) {
    .location .info-area .location-logo {width: 350px;}
    .location .info-area .contact-list {width: calc(100% - 350px); padding: 40px 0;}
}

@media screen and (max-width: 1200px) {
    .location .contact-list i[class^="xi-"] {font-size: 37px;}
    .location .contact-list .title {font-size: 21px;}
    .location .contact-list .desc {font-size: 15px;}
}

@media screen and (max-width: 1023px) {
    /* common */
    .location br {display: none;}
    .location .title-area .title {font-size: 40px;}

    .location::after {height: 100vh;}
    .location .group-map .location-map {height: 400px;}
    .location .info-area .location-logo {display: none;}
    .location .info-area .contact-list {width: 100%; border-radius: 20px;}
}

@media screen and (max-width: 767px) {
    /* common */
    .location {padding: 60px 0;}
    .location .inner {padding: 0 40px;}
    .location .title-area .title {font-size: 35px;}
    .location .title-area .desc {font-size: 15px;}
}

@media screen and (max-width: 640px) {
    .location .info-area {margin-top: 40px;}
    .location .info-area .contact-list {flex-direction: column; padding: 0;}
    .location .info-area .contact-item {width: auto; padding: 20px;}
    .location .contact-item + .contact-item {border-top: 1px solid #ddd;}
}

@media screen and (max-width: 480px) {
    /* common */
    .location {padding: 60px 0;}
    .location .inner {padding: 0 20px;}
    .location .title-area .title {font-size: 30px; margin-bottom: 35px;}
    .location .title-area .desc {font-size: 14px;}

    .location .contact-list i[class^="xi-"] {font-size: 34px;}
    .location .contact-list .title {font-size: 19px;}
    .location .contact-list .desc {font-size: 14px;}
}