/* common */
#location { overflow: hidden; padding-top:60px; }
.sub_h1 { position:relative; font-size: 60px; font-family: 'NanumSquareRound',sans-serif; font-weight: 800; }
.sub_h1.eng { font-size: 72px; text-transform: uppercase; }
.sub_h1 span { margin-left: 30px; font-size: 24px; font-weight: 300; letter-spacing: -0.6px; color: #666; font-family: 'Noto Sans KR', sans-serif; }
.sub_h1::before { content:""; position: absolute; left:-20px; top:-15px; width:22px; height: 22px; background:#f15e7c; border-radius: 50%; }
.sub_h2 { font-size: 24px; font-family: 'NanumSquareRound',sans-serif; font-weight: 800; letter-spacing: -0.6px; line-height: 1; }
.sub_p { font-size: 19px; font-weight: 300; letter-spacing: -0.48px; line-height: 36px; }
.sub_p + .sub_p { margin-top: 30px; }
.sub_h1 + .sub_p { margin-top: 15px; }

.bg_bot { width:100%; height: 400px; background:url('../img/his_bg.jpg') no-repeat center / cover; margin:100px 0 0; }



/* location */
#location { text-align: center; padding-bottom:100px; }
#location .sub_h1 { display: inline-block; margin:0 0 50px; }

 .root_daum_roughmap { border-bottom: 1px solid rgba(0,0,0,.1); }

.loca_con { position:relative; z-index: 2; }
.loca_box { display: flex; margin: -100px 0 20px; }
.loca_box li { width:25%; padding:40px 25px; border-right: 1px solid rgba(255,255,255,0.2); background-color: #333; color:#fff; transition: all .3s; }
.loca_box li:last-child { border-right: 0; }

.loca_box li .icon { height: 44px; display: flex; align-items: center; justify-content: center; }
.loca_box li .icon img { transition: all .5s; }
.loca_box li b { display: block; text-align: center; margin:18px 0 15px; font-size: 20px; font-family: 'NanumSquareRound',sans-serif; line-height: 1; }
.loca_box li p { font-size: 16px; font-weight: 300; }



.loca_info li { display: flex; border-bottom: 1px solid #ddd; padding:50px 0; text-align: left; }
.loca_info li:last-child { border-bottom: 0; }
.loca_info li h2 { position:relative; width:400px; padding-left: 17px; position:relative; top:7px; }
.loca_info li h2:before { content:""; position:absolute; left:0; top:7px; width:8px; height: 8px; background:#f26784; border-radius: 50%; }
.loca_info li:last-child h2::before { background:#0aa1a4; }
.loca_info li p { width:calc(100% - 400px); }




/* hover animation */
@media screen and (min-width:1024px) {
    .loca_box li:hover { background:#f15e7c; }
    .loca_box li:hover .icon img { transform: rotateY(180deg); }
}


/* 반응형 */
@media screen and (max-width: 1420px) {

    /* common */
    /* #location p br { display: none; } */


    /* location */

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

    /* common */
    #location { padding-top: 35px; }
    .sub_h1 { font-size: 40px; }
    .sub_h1.eng { font-size: 45px; }
    .sub_h1::before { left: -18px; top: -13px; width: 18px; height: 18px; }
    .sub_h1 span { font-size: 20px; }
    .sub_h2 { font-size: 20px; }
    .sub_p { font-size: 17px; line-height: 32px; }
    .sub_p + .sub_p { margin-top: 25px; }

    .bg_bot { height: 300px; margin-top: 80px; }


    /* location */
    #location { padding-bottom: 80px; }
    #location .sub_h1 { margin: 0 0px 35px; }

    .loca_box li { padding: 30px 20px; }

    .loca_info li { padding: 40px 0; }
    .loca_info li h2 { width: 330px; }
    .loca_info li p { width: calc(100% - 330px); }


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

    /* common */
    #location { padding-top: 15px; text-align: center; }
    .sub_h1 { display: inline-block; font-size: 30px; }
    .sub_h1.eng { font-size: 33px; }
    .sub_h1::before { left: -14px; top: -11px; width: 13px; height: 13px; }
    .sub_h1 span { display: none; }
    .sub_h2 { font-size: 18px; }
    .sub_p { font-size: 15px; line-height: 29px; }
    .sub_p + .sub_p { margin-top: 20px; }

    .bg_bot { height: 250px; margin-top: 60px; }

    /* location */
    #location { padding-bottom: 50px; }
    .root_daum_roughmap .wrap_map { height: 300px !important; }

    .loca_box { width:calc(100% + 30px); margin: 0 0 15px -15px; flex-wrap: wrap; }
    .loca_box li { width:50%; border:none; padding: 30px 10px; }
    .loca_box li:nth-child(1),
    .loca_box li:nth-child(4) { background:#f15e7c; }
    .loca_box li p { font-size: 15px; line-height: 25px; }

    .loca_info li { flex-wrap: wrap; padding: 30px 0; }
    .loca_info li h2 { width: 100%; }
    .loca_info li h2:before { top: 4px; }
    .loca_info li p { width: 100%; padding:15px 0 0 15px; }

}