@charset "utf-8";

@media screen and (max-width: 1200px) {

    #map { height: 320px !important;}
    #map_info{padding: 15px;display: block;margin-top: 0;}
    /* #map_info dt{display: none;} */
    #map_info dt{width: auto;}
    #map_info dt h3 img { max-width: 180px;}
    #map_info dd{width: auto;display: block;text-align: center;}
    #map_info dd .add { margin: 10px 0 0;}
    #map_info dd .add p { font-size: 15px;}
    #map_info dd .add ul { }
    #map_info dd .add li { font-size: 14px;}
    #map_info dd .add li span { margin-right: 5px; padding: 3px 7px; font-size: 13px;}
    #map_info dd .btn_box { margin-top: 15px;}
    #map_info dd .btn_box ul { justify-content: center;}
    #map_info dd .btn_box li { width: 50%; max-width: 150px;}
    #map_info dd .btn_box li + li { margin-left: 5px;}
    #map_info dd .btn_box li a { width: 100%; height: 40px; padding: 5px; padding-left: 20px; font-size: 13px;}
    #map_info dd .btn_box li a i { left: 5px; width: 25px; height: 25px;}

    #map_trans{margin-top: 20px;}
    #map_trans dl{padding: 20px 30px 20px 70px;}
    #map_trans dl dt{margin-bottom: 7px;}
    #map_trans dl dt h4{font-size: 13px;}
    #map_trans dl dt h4 i{left: 20px;width: 28px;line-height: 28px;border-radius: 28px;font-size: 13px;}
    #map_trans dl dd ul li{margin-bottom: 5px;}
    #map_trans dl dd ul li p{font-size: 13px;}
    #map_trans dl dd ul li strong{margin-right: 5px;min-width: 0;font-size: 13px;}
    #map_trans dl dd ul li strong em{display: inline-block;vertical-align: baseline;width: 8px;height: 8px;border-radius: 50%;margin-right: 3px;background: #ddd;font-size: 15px;}


    .bottom_info { margin: 40px -10px 0;}
    .bottom_info > div { padding: 0 10px;}
    .bottom_info .cont_box h4 { font-size: 20px;}
    .bottom_info .cont_box .bg_box { margin-top: 15px; padding: 15px;}
    .bottom_info .cont_box .bg_box dl { display: block;}
    .bottom_info .cont_box .bg_box dl + dl { margin-top: 10px;}
    .bottom_info .cont_box .bg_box dt { padding-left: 10px; font-size: 16px;}
    .bottom_info .cont_box .bg_box dt::before { top: 6px; width: 4px; height: 4px;}
    .bottom_info .cont_box .bg_box dd { margin-top: 10px;}

    .bottom_info .location dt,
    .bottom_info .location dd { width: auto;}
    .bottom_info .location .bg_box dd > div + div { margin-top: 5px;}
    .bottom_info .location .bg_box .subway em { padding: 2px 7px; font-size: 12px;}
    .bottom_info .location .bg_box .subway p { font-size: 14px;}
    .bottom_info .location .bg_box .txt_box { padding-left: 50px;}
    .bottom_info .location .bg_box .txt_box .tit { padding: 1px 8px; font-size: 14px;}
    .bottom_info .location .bg_box .txt_box .txt { font-size: 14px;}

    .bottom_info .customer .bg_box dt,
    .bottom_info .customer .bg_box dd { width: auto;}
    .bottom_info .customer .bg_box dd { font-size: 15px;}
    .bottom_info .customer .bg_box dd ul { margin: 15px -5px 0;}
    .bottom_info .customer .bg_box dd ul li { padding: 0 5px;}
    .bottom_info .customer .bg_box dd ul li a { height: 40px; font-size: 14px;}
    .bottom_info .customer .bg_box dd span { display: block; margin: 5px 0 0; font-size: 14px;}

}

@media screen and (max-width: 750px) {
    .fran-box > dt #map { height: 220px;}

    .bottom_info { display: block;}
    .bottom_info > div { width: 100%; }
    .bottom_info > div + div { margin-top: 20px;}
    .bottom_info .cont_box h4 { font-size: 18px;}
    .bottom_info .cont_box .bg_box { margin-top: 10px;}
}
