#line_section{width:90%; height:100%; border:1px solid #ddd; display: grid; grid-template-columns: 20% 25% 55%; margin: 0 5%;}
#line_section .line_area_num{border-right:1px solid #ddd;}
#line_section .line_area_detail{border-right:1px solid #ddd;}
#line_section .line_area_map{overflow: hidden;}
#line_section .line_area_map img{width:100%; height:auto;}

#line_section .line_area_num ul{padding:0; margin:0; list-style:none;}
#line_section .line_area_num ul li{height: 50px;  border-bottom: 1px solid #ddd;  padding-left: 8%;}
#line_section .line_area_num ul li:last-child{border-bottom: none;}
#line_section .line_area_num ul li a{width: 100%; display: flex; height: 100%;  align-items: center;}
#line_section .line_area_num ul li a b{font-weight:500;}

li.line_normal a{color: #000; font-size: 1.1rem; font-weight:600;}
li.line_seat a{color: var(--color-seat); font-size: 1.1rem; font-weight:600;}
li.line_night a{color: var(--color-night); font-size: 1.1rem; font-weight:600;}
li.line_village a{color: var(--color-village); font-size: 1.1rem; font-weight:600;}

.badge_normal{background-color: var(--color-normal); color:#fff; padding:2px 10px; margin-right:20px; font-size:0.7rem; text-align: center; border-radius: 3px; min-width:73px; display: inline-block;}
.badge_seat{background-color: var(--color-seat); color:#fff; padding:2px 10px; margin-right:20px; font-size:0.7rem; text-align: center; border-radius: 3px; min-width:73px; display: inline-block;}       
.badge_night{background-color: var(--color-night); color:#fff; padding:2px 10px; margin-right:20px; font-size:0.7rem; text-align: center; border-radius: 3px; min-width:73px; display: inline-block;}   
.badge_village{background-color: var(--color-village); color:#fff; padding:2px 10px; margin-right:20px; font-size:0.7rem; text-align: center; border-radius: 3px; min-width:73px; display: inline-block;}   


/*#line_section .line_area_detail*/
#line_section .line_area_detail{display: flex; flex-direction: column; justify-content: flex-start; align-items: center;}
#line_section .line_area_detail .line_detail_num{display: flex;
        flex-direction: row;
        width: 100%;
        align-items: center;
        padding: 10px 20px;}
#line_section .line_area_detail .line_detail_num h5{font-size: 1.6rem;
    font-weight: 700;
    color: #000;
    margin: 0 10px 0 0;
    letter-spacing: -1px;
}

#line_section .line_area_detail .line_detail_info1{padding: 0 20px 10px 20px; font-weight: 400; color: var(--color-second); font-size: 0.9rem;display: flex; width: 100%; }
#line_section .line_area_detail .line_detail_info2{padding: 0 20px 10px 20px; width:100%; display: flex; flex-direction: row; justify-content: space-between;}
#line_section .line_area_detail .line_detail_info2 div {display: flex; align-items: center;}
#line_section .line_area_detail .line_detail_info2 div em{font-style:normal; font-weight: 500; color: #000; font-size: 1rem; margin-right: 2px;}
#line_section .line_area_detail .line_detail_info3{padding: 0 20px 10px 20px; width:100%; }
#line_section .line_area_detail .line_detail_info3 div em{font-style:normal; font-weight: 500; color: #000; font-size: 1rem; margin-right: 10px;}
#line_section .line_area_detail .line_detail_info4{ padding: 13px 40px 13px 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    border-top: 1px solid #ddd;
    margin-top: 8px; background-color: rgba(238, 238, 238, 0.5);}

.badge_black{background-color: #000; color:#fff; padding:2px 5px; margin-right:3px; font-size:0.8rem; text-align: center; border-radius: 3px; min-width:60px; display: inline-block;}
.badge_blue{background-color: #2136ac; color:#fff; padding:2px 10px; margin-right:10px; font-size:0.8rem; text-align: center; border-radius: 3px; min-width:85px; display: inline-block;}
.badge_green{background-color: #00BCA1; color:#fff; padding:2px 10px; margin-right:10px; font-size:0.8rem; text-align: center; border-radius: 3px; min-width:85px; display: inline-block;}
.badge_violet{background-color: #5B5AAA; color:#fff; padding:2px 10px; margin-right:10px; font-size:0.8rem; text-align: center; border-radius: 3px; min-width:85px; display: inline-block;}


#line_section .line_area_detail .line_detail_tab{border-top:1px solid #ddd; width:100%; display: flex; flex-direction: row; margin:0;}
#line_section .line_area_detail .line_detail_tab div{width: 50%; padding: 10px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 1.2rem; font-weight: 600; color: var(--color-second); cursor: pointer; border-bottom:1px solid #ddd; background-color: #eee;}
#line_section .line_area_detail .line_detail_tab div bold{font-size: 1rem; font-weight: 700; color: var(--color-black);}
#line_section .line_area_detail .line_detail_tab div span{font-size: 0.8rem; font-weight: 400; color: var(--color-second); padding:5px 0;}
#line_section .line_area_detail .line_detail_tab .line_detail_tab_menu1{border-right: 1px solid #ddd;}
#line_section .line_area_detail .line_detail_tab .act{background-color: #fff; border-bottom:1px solid #fff;}

#line_section .line_area_detail .line_detail_line{width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; max-height: 650px; overflow-y: auto;}
#line_section .line_area_detail .line_detail_line ul{margin:0; padding:0; list-style:none; width:100%; height: 100%; overflow-y: auto;} 
#line_section .line_area_detail .line_detail_line ul li{position: relative; width: 100%; height:50px;display: flex; flex-direction: row;border-top: 1px solid #eee;}
#line_section .line_area_detail .line_detail_line ul li span{display: flex; align-items: center;}
#line_section .line_area_detail .line_detail_line ul li span.line_de1{width:25%; border-right: 2px solid #5C5C5C; display: flex; justify-content: center; align-items: center;}
#line_section .line_area_detail .line_detail_line ul li span.line_de1 strong{width:22px; height:22px; border-radius: 50%; background-color: #3A8810; display: flex; justify-content: center; align-items: center; }    
#line_section .line_area_detail .line_detail_line ul li span.line_de1 strong i{color:#fff;font-size: 0.9rem;}
#line_section .line_area_detail .line_detail_line ul li span.line_de2{width:75%; padding-left: 30px;font-size: 0.9rem;}
#line_section .line_area_detail .line_detail_line ul li span.line_de2:before{background-color: #fff; background-image: url(/img/arrow_down.png); background-repeat: no-repeat; background-size: cover; background-position: center; content: ""; position: relative;
    top: 0; left: -41px; width:20px; height:20px; z-index:10;}   
#line_section .line_area_detail .line_detail_line ul li img{position: relative; z-index:20;}

.line_detail_tab_menu1, .line_detail_tab_menu2 {          
            cursor: pointer;
            transition: all 0.2s ease-in-out;      
}

.line_detail_tab_menu1.act, .line_detail_tab_menu2.act {
    background-color: #fff; border-bottom:1px solid #fff;
}

.line_detail_tab_menu1:hover:not(.act), .line_detail_tab_menu2:hover:not(.act) {
    background-color: #fff;
}
.line_detail_line.hidden {
    display: none !important;
}

.modal-header-print{display: flex; flex-direction: row; justify-content: space-between; align-items: center;}





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

    #line_section {
        width: 100%;
        height: 100%;
        border: 1px solid #ddd;
        display: grid;
        grid-template-columns: 23% 77%;
        grid-template-rows: auto auto;
        margin: 0;
    }
    #line_section .line_area_num{height:100%;}

    #line_section .line_area_num ul li a{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
    }
    #line_section .line_area_num ul li a span{
        padding: 2px 0px;
        margin: 0 0 5px 0;
        font-size: 0.65rem;
        text-align: center;
        border-radius: 3px;
        min-width: 54px;
        display: inline-block;
    }
    #line_section .line_area_num ul li a b{font-size: 0.95rem; font-weight: 600;}


    #line_section .line_area_map{width:100%; height: auto;  grid-column: 1 / 3;}
    #line_section .line_area_detail .line_detail_num h5 {
        font-size: 1.4rem;
    }
    #line_section .line_area_detail .line_detail_info1 {
        padding: 0 20px 10px 20px;
        font-size: 0.9rem;
    }
    #line_section .line_area_detail .line_detail_info2 {
        padding: 0 10px 10px 10px; flex-direction: column; font-size: 0.8rem;
    }
    #line_section .line_area_detail .line_detail_info2 div {
        font-size: 0.8rem;
    }
    #line_section .line_area_detail .line_detail_num {      
        padding: 10px 20px 2px 20px;
    }
    #line_section .line_area_detail .line_detail_line ul li span.line_de2 {       
        font-weight: 400;
    }

    #line_section .line_area_detail .line_detail_info2 .badge_black{font-size: 0.75rem; margin:2px 6px;}
    #line_section .line_area_detail .line_detail_info2 div em {       
        font-size: 0.9rem;
        font-weight: 500;
        margin-right: 2px;
    }
    #line_section .line_area_detail .line_detail_info4
     {
        padding: 13px 20px 13px 20px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-top: 1px solid #ddd;
        margin-top: 0px;
        background-color: rgba(238, 238, 238, 0.5);
    }
    #line_section .line_area_detail .line_detail_info4 div a{font-size:0.7rem;}
    #line_section .line_area_detail .line_detail_tab div {
        padding: 10px 0px;
    }
    #line_section .line_area_detail .line_detail_tab .line_detail_tab_menu1, #line_section .line_area_detail .line_detail_tab .line_detail_tab_menu2 {
       display: flex; flex-direction: column; justify-content: center;
    }
    #line_section .line_area_detail .line_detail_tab .line_detail_tab_menu1 div, #line_section .line_area_detail .line_detail_tab .line_detail_tab_menu2 div {
        font-size: 0.8rem; flex-direction: row; width:100%; background-color: inherit; border-bottom: 0px; padding:0px;
    }
 
























}