@charset "utf-8";

/* 찾아오시는 길 */
.locationPage{padding-bottom: 100px;}
.locationPage .max-width{max-width: 360px; margin: 0 auto;}
.locationPage #map{width: 100%; aspect-ratio: 328/260; border: 1px solid var(--s-color1); border-radius: var(--b-radius3); overflow: hidden;}
.locationPage #map .custom-controls {position: absolute; bottom: 12px; right: 12px; z-index: 100; display: flex; column-gap: 4px;}
.locationPage #map .custom-controls button {display: block; width: 24px; height: 24px; cursor: pointer; background-repeat: no-repeat; background-size: contain; background-position: center; transition: background-image 0.3s ease;}
.locationPage #map .custom-controls #zoom-default{background-image: url('https://static.edmclass.com/common/map-zoomDefault.svg');}
.locationPage #map .custom-controls #zoom-in{background-image: url('https://static.edmclass.com/common/map-zoomIn.svg');}
.locationPage #map .custom-controls #zoom-out{background-image: url('https://static.edmclass.com/common/map-zoomOut.svg');}
.locationPage .infoWrap{border: 1px solid var(--s-color1); border-radius: var(--b-radius3); padding: 16px; font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; margin-top: 16px;}
.locationPage .infoWrap .box + .box{margin-top: 24px;}
.locationPage .infoWrap .box .tit{margin-bottom: 4px;}
.locationPage .infoWrap .box a{color: #339DFF; position: relative; padding-left: 18px;}
.locationPage .infoWrap .box a::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url('https://static.edmclass.com/common/phone-icon-16.svg');}

/*************************************************************
    hover effect
*************************************************************/
@media (hover: hover) and (pointer: fine) {
    .locationPage #map .custom-controls #zoom-in:hover{background-image: url('https://static.edmclass.com/common/map-zoomIn-hover.svg');}
    .locationPage #map .custom-controls #zoom-out:hover{background-image: url('https://static.edmclass.com/common/map-zoomOut-hover.svg');}
}








@media screen and (min-width: 576px) {
    .locationPage .max-width{max-width: 332px; padding: 0;}
}

@media screen and (min-width: 1200px) {
    #wrap{min-height: 950px;}


    /* 찾아오시는 길 */
    .locationPage{padding-bottom: 40px;}
    .locationPage .max-width{max-width: 1200px;}
    .locationPage .mapWrap{display: flex; justify-content: space-between;}
    .locationPage .mapWrap #map{width: calc(50% - 12px); border-radius: var(--b-radius2); aspect-ratio: initial; height: 466px;}
    .locationPage #map .custom-controls {right: 16px; bottom: 16px; flex-wrap: wrap; width: 32px; row-gap: 8px;}
    .locationPage #map .custom-controls button {width: 32px; height: 32px;}
    .locationPage #map .custom-controls #zoom-default{background-image: url('https://static.edmclass.com/common/map-zoomDefault-pc.svg');}
    .locationPage #map .custom-controls #zoom-in{background-image: url('https://static.edmclass.com/common/map-zoomIn-pc.svg');}
    .locationPage #map .custom-controls #zoom-out{background-image: url('https://static.edmclass.com/common/map-zoomOut-pc.svg');}
    .locationPage .mapWrap .infoWrap{width: calc(50% - 12px); border-radius: var(--b-radius2); height: 466px; margin-top: 0; padding: 48px; font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px;}
    .locationPage .infoWrap .box .tit{font-size: var(--f-heading1); line-height: 28px; letter-spacing: -0.4px; margin-bottom: 8px;}
    .locationPage .infoWrap .box a{padding-left: 0;}
    .locationPage .infoWrap .box a::before{display: none;}

    /*************************************************************
        hover effect
    *************************************************************/
    @media (hover: hover) and (pointer: fine) {
        .locationPage #map .custom-controls #zoom-in:hover{background-image: url('https://static.edmclass.com/common/map-zoomIn-pc-hover.svg');}
        .locationPage #map .custom-controls #zoom-out:hover{background-image: url('https://static.edmclass.com/common/map-zoomOut-pc-hover.svg');}
    }
}