/******************** 전체 wrapper */
.wrapper{
    /* min-width: 1280px;
    width: 1280px;
    max-width: 1920px; */
    min-width: 1280px;
    width: 100%;
    min-height: 100%;
    height: auto;
    box-sizing: border-box;
    /* overflow: hidden; */
    position: relative;
    margin: auto;
    padding-bottom: 50px;
}

/********************* head */
.head{
    /* width: 1280px; */
    min-width: 1280px;
    width: 100%;
    height: 80px;
    margin: auto;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 400px calc(1280px - 800px) 400px;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}
/* head_left */
.head_left{
    /* width: 100%; */
}
.head_left span.line{
    display: inline-block;
    height: 22px;
    width: 1px;
    background-color: #999;
    vertical-align: middle;
    margin: 0 5px;
}
.head_left strong{
    font-size: 22px;
    line-height: 22px;
    vertical-align: middle;
    font-weight: 900;;
}
.head_logo,
.foot_logo{
    width: 200px;
    height: 40px;
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100%;
    vertical-align: middle;
}
.foot_logo{
    display: inline-block;
    width: 170px;
}

/* head_right */
.head_right{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.head_right .login_user{
    padding-left: 25px;
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 700;
    font-size: 16px;
    line-height: 18px;
    color: #333;
    background-image: url("../img/profile-user.png")!important;
    background-repeat: no-repeat;
    background-position: 0;
    background-size: 20px;
}

.nav{
    height: 60px;
    display: grid;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    position:absolute;
    z-index: 100;
    width: 100%;
}
.nav.ac{
    position: fixed;
    top:0;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.nav > div{
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    width: 1280px;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    display: grid;
    grid-template-columns: repeat(5 , 1fr);
    gap: 10px;
}
.main_menu{
    display: inline-block;
    width: auto;
    height: 58px;
    padding: 21px 10px;
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    color: #333;
    word-break: keep-all;
    border-left: 1px solid #ddd;
    text-align: center;
    cursor: pointer;
}
.main_menu.ac{
    color: #2461BD;
    font-weight: 900;
}
.main_menu.ac svg path{
    fill:#2461BD;
}
.main_menu svg{
    vertical-align: middle;
    margin-bottom: 2.5px;
    margin-left: 3px;
}
.sub_nav{
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100px;
    background-color: #2461BD;
    position: absolute;
    top:140px;
    z-index: 99;
    box-shadow: 0 0 20px rgba(0,0,0,.5);
}
.sub_nav.on{
    display: grid;
    overflow: hidden;
    animation: menu_show_on .3s ;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
@keyframes menu_show_on{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.sub_nav.ac{
    top:60px;
    position: fixed;
}
.sub_nav > div{
    background-color: #225CB3;
    min-height: 100px;
    width: 1280px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    display: grid;
    grid-template-columns: repeat(5 , 1fr);
    padding-bottom: 10px;
}
.sub_nav > div > div{
    padding: 10px;
    vertical-align: top;
}
.sub_nav > div h2{
    font-weight: 700;
    font-family: 'NEXON_Lv2_Gothic';
    font-size: 16px;
    line-height: 40px;
    color: #fff;
    padding: 5px 10px;
    cursor: pointer;
}
.sub_nav > div hr{
    background-color:rgba(255,255,255,.1);
    margin-bottom: 15px;
}
.sub_nav > div a{
    display: block;
    color:rgba(255,255,255,.4);
    font-weight: 400;
    font-family: 'NEXON_Lv2_Gothic';
    font-size: 14px;
    padding: 5px 10px;
    line-height: 18px;
    cursor: pointer;
}
.sub_nav > div a:hover
{
    background-color: rgba(255,255,255,.1);
    color:#fff;
    font-weight: 600;;
}
.sub_nav > div a.ac{
    color:#fff;
    font-weight: 900;;
}






.main_menu:first-child{
    border-left: 0;
}
.main_menu:hover,
.main_menu.ac{
    background-color: rgba(255, 255, 255, 0.5);
}


.logout{
    width: 92px;
}
/**푸터**/
.footer {
    width: 100%;
    height: 15%;
    margin-top: 50px;
    border-top: 1px solid #ddd;
}
.footer > div{
    width: 1280px;
    
    margin: 20px auto;
    padding: 20px 0;;
}
.footer > a{
    display: inline-block;
    vertical-align: top;
    width: 200px;
}
.footer blockquote{
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 430px);
    padding-top: 7px;
    margin-left: 20px;
    line-height: 20px;
    font-size: 14px;
    color:#737A85
}
.footer p.copy{
    color:#ccc;
    margin-top: 10px;
}
.footer .contact{
    float: right;
    vertical-align: top;
    width: 180px;
    text-align: right;
}
.footer .contact hr{
    margin: 10px 0;
}
.footer .contact p{
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 5px;
}
.footer .contact a{
    line-height: 20px;
    font-weight: 900;
    font-size: 16px;;
}
/******************** 기본 content */
.content_board{
    width: 1280px;
    height: auto;
    margin:40px auto auto;
    background-color: #FFFFFF;
    display: grid;
    align-items: center;
}
/* content_left */
.content_left{
    width: 100%;
    height: 100%;
    background-color: #E9F1F7;
    padding: 20px 15px; 
}
.left_part{
    width: 100%;
    height: auto;
}
.part_head{
    display: grid;
    grid-template-columns: repeat(2 , 1fr);

}
.part_title{
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    padding: 2px 0;
    color: #111111;
    word-break: keep-all;
}
.part_title strong{
    font-weight: 900;
}
.part_title.link{
    cursor: pointer;
}

.part_title_small{
    font-size: 14px;
    color: #737A85;
}
.part_title.left_icon{
    padding-left: 26px;
    background-repeat: no-repeat;
    background-position: 0;
}
.part_title svg{
    vertical-align: middle;
    margin-left: 5px;
}


.left_icon.circle_graph{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17.999' viewBox='0 0 18 17.999'%3E%3Cg id='Layer_2' data-name='Layer 2' transform='translate(-1.491 -1)'%3E%3Cpath id='패스_66' data-name='패스 66' d='M18.5,7l-.06-.1a9,9,0,0,0-2.088-3.276l-.036-.06L16.2,3.49a8.939,8.939,0,0,0-2.76-1.8l-.132-.06A8.9,8.9,0,0,0,10,1a9,9,0,1,0,8.525,6.132Zm-.7,3.6a7.667,7.667,0,0,1-.6,2.436L12.552,10.6ZM10,17.8A7.8,7.8,0,1,1,12.48,2.614c-.426.918-1.242,2.868-3,7.062l-.12.36.18.264a.684.684,0,0,0,.4.282L16.6,14.1A7.8,7.8,0,0,1,10,17.8Z' transform='translate(0.5 0)'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.left_icon.square_graph{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg id='Layer_2' data-name='Layer 2' transform='translate(19 -1) rotate(90)'%3E%3Cpath id='패스_26' data-name='패스 26' d='M15.727,19H4.273A3.273,3.273,0,0,1,1,15.727V4.273A3.273,3.273,0,0,1,4.273,1H15.727A3.273,3.273,0,0,1,19,4.273V15.727A3.273,3.273,0,0,1,15.727,19ZM4.273,2.636A1.636,1.636,0,0,0,2.636,4.273V15.727a1.636,1.636,0,0,0,1.636,1.636H15.727a1.636,1.636,0,0,0,1.636-1.636V4.273a1.636,1.636,0,0,0-1.636-1.636Z'/%3E%3Cpath id='패스_27' data-name='패스 27' d='M15.909,2H4.455A2.455,2.455,0,0,0,2,4.455V15.909a2.455,2.455,0,0,0,2.455,2.455H15.909a2.455,2.455,0,0,0,2.455-2.455V4.455A2.455,2.455,0,0,0,15.909,2Zm-9,13.909a.818.818,0,1,1-1.636,0V12.636a.818.818,0,1,1,1.636,0Zm4.091,0a.818.818,0,0,1-1.636,0V6.091a.818.818,0,0,1,1.636,0Zm4.091,0a.818.818,0,1,1-1.636,0V9.364a.818.818,0,1,1,1.636,0Z' transform='translate(-0.182 -0.182)'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.left_icon.user_ico {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg id='Layer_2' data-name='Layer 2' transform='translate(19 -1) rotate(90)'%3E%3Cpath id='패스_26' data-name='패스 26' d='M15.727,19H4.273A3.273,3.273,0,0,1,1,15.727V4.273A3.273,3.273,0,0,1,4.273,1H15.727A3.273,3.273,0,0,1,19,4.273V15.727A3.273,3.273,0,0,1,15.727,19ZM4.273,2.636A1.636,1.636,0,0,0,2.636,4.273V15.727a1.636,1.636,0,0,0,1.636,1.636H15.727a1.636,1.636,0,0,0,1.636-1.636V4.273a1.636,1.636,0,0,0-1.636-1.636Z'/%3E%3Cpath id='패스_27' data-name='패스 27' d='M15.909,2H4.455A2.455,2.455,0,0,0,2,4.455V15.909a2.455,2.455,0,0,0,2.455,2.455H15.909a2.455,2.455,0,0,0,2.455-2.455V4.455A2.455,2.455,0,0,0,15.909,2Zm-9,13.909a.818.818,0,1,1-1.636,0V12.636a.818.818,0,1,1,1.636,0Zm4.091,0a.818.818,0,0,1-1.636,0V6.091a.818.818,0,0,1,1.636,0Zm4.091,0a.818.818,0,1,1-1.636,0V9.364a.818.818,0,1,1,1.636,0Z' transform='translate(-0.182 -0.182)'/%3E%3C/g%3E%3C/svg%3E%0A");
    
}

.left_icon.gps{
    background-image: url("../img/gps.png");
}
.left_icon.search{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg id='Layer_2' data-name='Layer 2' transform='translate(-1 -1)'%3E%3Cpath id='패스_53' data-name='패스 53' d='M8.609,16.218a7.609,7.609,0,1,1,7.609-7.609A7.609,7.609,0,0,1,8.609,16.218Zm0-13.527a5.918,5.918,0,1,0,5.918,5.918A5.918,5.918,0,0,0,8.609,2.691Z'/%3E%3Cpath id='패스_54' data-name='패스 54' d='M16.491,15.29l-1.2,1.2,4.481,4.472a.843.843,0,0,0,1.192-1.192Z' transform='translate(-2.209 -2.209)'/%3E%3Ccircle id='타원_5' data-name='타원 5' cx='6.763' cy='6.763' r='6.763' transform='translate(1.845 1.845)'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.part_content{
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 40px;
}
.part_content.part_2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.part{
    border:1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    padding: 20px;
}
.part.table.of_scroll{
    overflow-y: auto;
    max-height: 400px;
}
.part.table{
    padding: 0px;
}
.part.gray{
    width: 100%;
    background-color: #F9F9FC;
}
.main_tab{
    display: none;
}
.main_tab.ac{
    display: table;
}
.legend_section{
    text-align: right;
    height: auto;
    
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}
.legend_section.tab{
    display: inline-block;
}
.legend_section .time{
    font-size: 14px;
    text-align: right;
    color:#aaa;
    width: 100%;
    line-height: 24px;
}
.legend_section .time span.text {
    display: inline-block;
    vertical-align: middle;
    line-height: 35px;
}
.legend_section.center{
    justify-content: center;
}
.legend_sort{
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 700;
    font-size: 12px;
    line-height: 13px;
    color: #737A85;
    word-break: keep-all;
    position: relative;
    padding-left: 17px;
}
.legend_sort::before{
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border-radius: 3px;
    border: 0;
    background-color: #737A85;
    position: absolute;
    left: 0;
}
.wheezes_crackles .legend_sort.red::before{
    background-color: #CD6155;
}
.wheezes_crackles .legend_sort.yellow::before{
    background-color: #F5B041;
}
.good_or_bad .legend_sort.red::before{
    background-color: #D35400;
}
.good_or_bad .legend_sort.yellow::before{
    background-color: #F1C40F;
}
.good_or_bad .legend_sort.green::before{
    background-color: #16A085 ;
}
.good_or_bad .legend_sort.blue::before{
    background-color: #2980B9;
}
.good_or_bad .legend_sort.purple::before{
    background-color: #A269EB;
}
.gender .legend_sort.pink::before{
    background-color: #F1948A;
}
.gender .legend_sort.skyblue::before{
    background-color: #85C1E9;
}
.gender .legend_sort.pink strong{
    color: #F1948A;
}
.gender .legend_sort.skyblue strong{
    color: #85C1E9;
}
.normal_abnormal .legend_sort.green::before{
    background-color: #148F77 ;
}

.normal_abnormal .legend_follow.green{
    color: #148F77 ;
}

/******************* 이동근 팀장 추가 **/
.age .legend_sort.year10::before{
    background-color: #F2C865;
}
.age .legend_sort.year1020::before{
    background-color: #9ABC76;
}
.age .legend_sort.year2030::before{
    background-color: #60A78D;
}
.age .legend_sort.year3040::before{
    background-color: #5D758E;
}
.age .legend_sort.year4050::before{
    background-color: #E47940;
}
.age .legend_sort.year5060::before{
    background-color: #E6514C;
}
.age .legend_sort.year60::before{
    background-color: #999;
}
.age .legend_sort strong{
    font-weight: 900;
}
.age .legend_sort.year10 strong{
    color: #F2C865;
}
.age .legend_sort.year1020 strong{
    color: #9ABC76;
}
.age .legend_sort.year2030 strong{
    color: #60A78D;
}
.age .legend_sort.year3040 strong{
    color: #5D758E;
}
.age .legend_sort.year4050 strong{
    color: #E47940;
}
.age .legend_sort.year5060 strong{
    color: #E6514C;
}
.age .legend_sort.year60 strong{
    color: #999;
}

/* content_right */
.content_right{
    width: 100%;
    height: 100%;
    padding: 20px 15px;
    position: relative;
}
.content_right.pd_0{
    padding: 0;
}
.right_part{
    width: 100%;
    height: auto;
}
.main .left_part,
.main .right_part{
    min-height: 420px;
}
.part_title.right_icon{
    padding-right: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg id='next_1_' data-name='next (1)' transform='translate(-4 -3)'%3E%3Cg id='그룹_571' data-name='그룹 571' transform='translate(4 3)'%3E%3Cpath id='패스_149' data-name='패스 149' d='M5,0a5,5,0,1,0,5,5A5.006,5.006,0,0,0,5,0ZM6.545,5.295,4.461,7.378a.417.417,0,1,1-.589-.589L5.661,5,3.872,3.211a.417.417,0,0,1,.589-.589L6.545,4.705A.416.416,0,0,1,6.545,5.295Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 100%;
}
.title_flex{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
.title_flex .legend_section{
    width: auto;
}
.main_title{
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 900;
    font-size: 18px;
    line-height: 20px;
    color: #111111;
}

/* 하단 저작권 표기 */
.copyright{
    width: 1280px;
    margin: 20px auto 0;
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    color: #FFFFFF;
    text-align: right;
}



.loaction_head{
    height: 40px;
    display: grid;
    grid-template-columns: 360px auto;
    gap: 10px;
    width: 1280px;
    margin: 0 auto;
    margin-top: 60px;
    padding-top: 40px;
    box-sizing: border-box;
}
.loaction_head h2{
    color:#333;
    font-size: 22px;
    display: inline-block;
    font-family: 'NEXON_Lv2_Gothic';
}
.loaction_head h3{
    color:#333;
    font-size: 22px;
    font-weight: 900;;
    display: inline-block;
    font-family: 'NEXON_Lv2_Gothic';
}
.loaction_head h3 svg{
    vertical-align: middle;
    margin-left: 5px;
}
.loaction_head span{
    margin: 0 10px;
}
.loaction_head .sort{
    margin-top: -8px;
}

.sort hr{
    width: 5px;
    display: inline-block;
    vertical-align: middle;
    margin: 20px 5px;
    background-color: #aaa;
}
.location_bubble.ac{
    display: block;
}
.location_bubble{
    position: absolute;
    top: 210px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px 20px;
    z-index: 10;
    box-shadow: 0 0 3px rgba(0,0,0,.2);
    display: none;
    min-width: 160px;
}
.location_bubble a{
    display: block;
    line-height: 50px;
    font-size: 18px;
    padding: 0 10px;
    text-align: center;
}
.location_bubble a.ac{
    font-weight: 900;
}
.location_bubble a:hover{
    background-color: #eee;
}
.flow_text{
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #B8BED1;
}