@charset "utf-8";




:root{
    --main-color:#2499F3;
    --blue-color:#53CAFF !important;
    --yellow-color:#FFAA00 !important;
    --bg-color:#3d4046;

    --bdrdus-15:1.5rem;
    --bdrdus-12:1.2rem;
    --bdrdus-8:0.8rem;
    --bdrdus-5:0.5rem;

    --ani-1:all 0.2s ease;
}

html{font-size:62.5%;}
body{background-color:#272A31;}
.layout{max-width:152rem; margin:0 auto; padding:0 4rem; box-sizing:border-box;}
#page_wrap{padding:6.5rem 0 3rem; box-sizing:border-box;}
.sr-only {position:absolute !important; width:1px !important; height:1px !important; padding:0 !important;margin:-1px !important; overflow:hidden !important; clip:rect(0, 0, 0, 0) !important; white-space:nowrap !important; border:0 !important;}


a, p, strong, div, span, h1, h2, h3, h4, h5, h6{color:#fff;}

@media screen and (max-width:1024px) {
    html{font-size:58.5%;}
    .layout{padding:0 1.2rem;}
    #page_wrap{padding:6.5rem 0 1.2rem;}
}
@media screen and (max-width:640px) {
    html{font-size:54.5%;}
}





/* //////////////////////////////////////////////////////////
    
    Common Style

////////////////////////////////////////////////////////// */
/* 텍스트 */
h3{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:0 0.3rem; margin:0 0 1.4rem;}
h3>span{line-height:3.1rem; font-size:2.6rem; font-weight:400; letter-spacing:-1px; color:#fff;}
h4{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:0 0.3rem; margin:0 0 1.4rem;}
h4>span{line-height:2.5rem; font-size:2.1rem; font-weight:400; letter-spacing:-1px; color:#fff;}
h4 strong{font-weight:500;}

/*타이틀부분 추가 */
.h3_right {font-size:1.5rem;}
h3.type_01 {position: relative; flex-direction: column; align-items: flex-start; gap:1rem; padding:0 0.5rem; box-sizing:border-box;}
h3.type_01 span.tit {display:inline-block; width:100%; padding-right:8rem; box-sizing: border-box;}
h3.type_01 .h3_right {display:flex; justify-content:space-between; width:100%; flex-wrap:wrap;}
h3.type_01 .h3_right span {display:inline-block; position: relative;}
/*h3.type_01 .h3_right span + span::before {content:'ㆍ'; display:inline-block; font-weight:bold;}*/
h3.type_01 .date_icon {position: absolute; width:100%; top:0.2rem; right:0; display:flex; gap:0.5rem; justify-content: flex-end; padding-right:0.5rem;}
h3.type_01 .date_icon .date_btn, 
h3.type_01 .date_icon .date_txt {position: relative; display:block; width:2.5rem; height:2.5rem; border:2px solid rgba(255,255,255,0.4); border-radius:50%; background-repeat:no-repeat; box-sizing: border-box;}
h3.type_01 .date_icon .date_btn {background-image:url('../../img/dashboard/date_icon_03.svg'); background-position: center top 0.5rem; background-size:1rem; }
h3.type_01 .date_icon .date_txt {background-image:url('../../img/dashboard/date_icon_01.svg'); background-position: center top 0.4rem; background-size:0.5rem; background-color:transparent; }
h3.type_01 .date_icon .date_txt + .date_txtBox {display:none; position:absolute; font-size:1.4rem; padding:0.4rem 1rem; top:3.2rem; right:0.5rem; background-color:#3d4046; border-radius:0.5rem;}
h3.type_01 .date_icon .date_txt.on + .date_txtBox {display:block;}


.h4_right{font-size:1.5rem;}

/* 인풋 */
.inp>input[type="text"],
.sel>select{width:100%; height:4.8rem; border-radius:var(--bdrdus-8); font-size:1.7rem; box-sizing:border-box;}
.inp, .sel{width:100%;}
.inp>input[type="text"]{padding:0 1rem;}
.sel>select{
    padding:0 2.5rem 0 1rem; background-image:url(../../img/dashboard/icon_select_arrow.png); background-repeat:no-repeat; background-position:calc(100% - 0.8rem) 50%;
    -webkit-appearance:none; appearance:none;
}
.sel.sel_t>select{width:calc(100% - 2.5rem);}
.sel.sel_t>span{margin-left:0.2rem; font-size:1.7rem;}

/* 버튼 */
.btn{min-width:12.8rem; height:4.8rem; background-color:var(--main-color); border-radius:var(--bdrdus-8); vertical-align:middle;}
.btn>span{font-size:1.7rem; font-weight:600; letter-spacing:-1px;}

/* 컬러 */
.blue{color:var(--blue-color) !important;}
.yellow{color:var(--yellow-color) !important;}

/* 테이블 */
.table{width:100%;}
.table th,
.table td{height:2.9rem; font-size:14px; font-weight:500; letter-spacing:-1px; color:#fff; box-sizing:border-box;}
.table th{padding:0.6rem; background-color:var(--bg-color);}
.table td{padding:0.4rem; border-bottom:1px solid rgba(255,255,255,0.2); text-align:center; word-break:break-all;}
.table th.chk{background-color:#254890;}
.table td.chk{background-color:#1f335a;}
/* 스타일1 */
.table.style_1 tbody tr:nth-child(2n){background-color:var(--bg-color);}
/* 스크롤 */
.table_scroll{overflow-x:auto;}
.table_scroll .table{min-width:35rem;}

@media screen and (max-width:1024px) {
	h3{margin:0 0 1rem;}
	h3>span{font-size:2.3rem;}
	h3.type_01 .date_icon {top:0;}
}
@media screen and (max-width:640px) {
    h3>span{font-size:2.4rem;}
}



/* //////////////////////////////////////////////////////////
    
    Pagetab

////////////////////////////////////////////////////////// */
#top_menu{}
#top_menu .page_tab{
    position:absolute; top:0; left:50%;
    -webkit-transform:translateX(-50%); transform:translateX(-50%);
    -webkit-transition:top 0.4s ease; transition:top 0.4s ease;
}
#top_menu .page_tab ul{display:inline-flex; padding:2rem 3rem; background-color:var(--bg-color); border-radius:0 0 1.5rem 1.5rem; vertical-align:middle; box-sizing:border-box;}
#top_menu .page_tab ul li:not(:first-child){margin-left:1rem;}
#top_menu .page_tab ul li a{
    display:block; width:5rem; height:5rem; background-color:var(--bg-color); background-repeat:no-repeat; background-position:50% 50%; background-size:4rem auto; border-radius:var(--bdrdus-8); text-align:center;
    -webkit-transition:background-color 0.2s ease; transition:background-color 0.2s ease;
}
#top_menu .page_tab ul li a:hover{background-color:#2499f370;}
#top_menu .page_tab ul li a[data-menu_nm="소"]{background-image:url(../../img/dashboard/icon_animal_01_w.png);}
#top_menu .page_tab ul li a[data-menu_nm="돼지"]{background-image:url(../../img/dashboard/icon_animal_02_w.png);}
#top_menu .page_tab ul li a[data-menu_nm="닭"]{background-image:url(../../img/dashboard/icon_animal_03_w.png);}
#top_menu .page_tab ul li a[data-menu_nm="오리"]{background-image:url(../../img/dashboard/icon_animal_04_w.png);}
#top_menu .page_tab ul li a[data-menu_nm="계란"]{background-image:url(../../img/dashboard/icon_animal_05_w.png);}
#top_menu .page_tab ul li a[data-menu_nm="벌꿀"]{background-image:url(../../img/dashboard/icon_animal_06_w.png);}
#top_menu .page_tab ul li a[data-menu_nm="말"]{background-image:url(../../img/dashboard/icon_animal_07_w.png);}
#top_menu .page_tab ul li a.active{background-color:#2499F3;}
#top_menu .page_tab ul li a>span{overflow:hidden; display:block; text-indent:-200rem;}

/* 메뉴 고정 버튼 */
#top_menu .page_tab .tab_btn{
    position:absolute; top:2.8rem; right:calc(50% - 24.7rem); display:inline-block; width:2.8rem; height:3.2rem; margin-left:-0.4rem; background-color:#2499f370; background-image:url(../../img/dashboard/page_tab_fix.svg); background-repeat:no-repeat; background-position:50% 50%; border-radius: 0 0.5rem 0.5rem 0; vertical-align:middle;
    -webkit-transform:translateX(-50%); transform:translateX(-50%);
}
#top_menu .page_tab .tab_btn>span{overflow:hidden; display:inline-block; text-indent:-200rem;}
/* On */
#page_wrap.fix #top_menu .page_tab .tab_btn{background-color:var(--main-color);}

@media screen and (min-width:1025px) {
    /* 메뉴 열림(PC까지만) */
    #page_wrap.off #top_menu .page_tab{top:-7rem;}
    #page_wrap.fix #top_menu .page_tab{top:0;}
}
@media screen and (max-width:1024px) {
    /* 페이지 탭 */
    #top_menu .page_tab ul{padding:1.5rem;}

    /* 메뉴 고정 버튼 */
    #top_menu .page_tab .tab_btn{display:none !important;}
}
@media screen and (max-width:640px) {
    /* 페이지 탭 */
    #top_menu .page_tab ul li:not(:first-child){margin-left:0.5rem;}
    
    #top_menu.on .page_tab ul{gap:0 0.6rem;}
    #top_menu.on .page_tab ul li a{height:9.6rem; background-position:50% calc(50% - 1rem); background-size:4.2rem auto; border-radius:var(--bdrdus-8);}
    #top_menu.on .page_tab ul li a>span{padding-top:5.6rem;}
    
    .tab_btn{display:none !important;}
}
@media screen and (max-width:420px) {
    /* 페이지 탭 */
    #top_menu.on .page_tab ul{gap:0 0.6rem;}
    #top_menu.on .page_tab ul li a{height:6rem; background-position:50% 50%; background-size:5rem auto;}
    #top_menu.on .page_tab ul li a>span{overflow:hidden; text-indent:-200rem;}
}



/* //////////////////////////////////////////////////////////
    
    Search

////////////////////////////////////////////////////////// */
#top_menu .searchs{padding:2rem 2.5rem; background-color:var(--bg-color); border-radius:var(--bdrdus-15); text-align:center; box-sizing:border-box;}
#top_menu .searchs ul{display:inline-flex; flex-wrap:wrap; gap:0 3rem; vertical-align:bottom; text-align:left;}
#top_menu .searchs>ul>li{display:flex; flex-wrap:wrap; align-items:center;}
#top_menu .searchs>ul>li .tt{display:block; margin-right:1.2rem;}
#top_menu .searchs>ul>li .tt>span,
#top_menu .searchs>ul>li .tt>label{font-weight:600; font-size:1.7rem;}
#top_menu .searchs>ul>li .bx{display:flex; gap:0 1.5rem;}
#top_menu .searchs .search_btn{margin-left:2.5rem; vertical-align:bottom;}
#top_menu .searchs .search_btn:after{content:""; display:inline-block; width:2.1rem; height:2.1rem; margin-left:0.8rem; margin-top:-0.2rem; background:url(../../img/dashboard/icon_search.png) no-repeat 0 0; background-size:contain; vertical-align:middle;}

#contents{padding-top:2.5rem; box-sizing:border-box;}

@media screen and (min-width:641px) {
    /* 검색 */
    #top_menu .searchs>ul>li .sel>select{width:14rem;}
}
@media screen and (max-width:1140px) and (min-width:921px) {
    /* 검색 */
    #top_menu .searchs>ul>li{display:block; text-align:left;}
    #top_menu .searchs>ul>li .tt{margin-bottom:0.6rem;}
}
@media screen and (max-width:920px) and (min-width:641px) {
    /* 검색 */
    #top_menu .searchs{display:flex; align-items:flex-end;}
    #top_menu .searchs>ul{display:flex;}
    #top_menu .searchs>ul>li:first-child{width:100%; margin-bottom:0.4rem;}
}
@media screen and (max-width:640px) {
    /* 검색 */
    #top_menu .searchs ul{display:block;}
    #top_menu .searchs>ul>li{width:100%; margin-bottom:0.4rem;}
    #top_menu .searchs>ul>li .tt{width:6rem;}
    #top_menu .searchs>ul>li .bx{width:calc(100% - 7.3rem);}
    #top_menu .searchs .search_btn{width:100%; margin-top:1.2rem; margin-left:0;}
}



/* //////////////////////////////////////////////////////////
    
    Slide Custom

////////////////////////////////////////////////////////// */
#contents [data-js="slick-control"]{margin-bottom:1rem; text-align:right;}
#contents [data-js="slick-control"] button{
    overflow:hidden; width:3.4rem; height:3.4rem; border:1px solid rgba(255,255,255,0.4); text-indent:-2000px;
    -webkit-transition:border 0.2s ease; transition:border 0.2s ease;
}
#contents [data-js="slick-control"] button:hover{border-color:rgba(255,255,255,1);}
#contents [data-js="slick-control"] .slick-play{display:none; background:url(../../img/dashboard/icon_slide_play.svg) no-repeat 50% 50%;}
#contents [data-js="slick-control"] .slick-stop{background:url(../../img/dashboard/icon_slide_stop.svg) no-repeat 50% 50%;}
#contents [data-js="slick-slider"] button[class*="slick-"]{
    z-index:100; top:-4.4rem; width:3.4rem; height:3.4rem; background-repeat:no-repeat; background-position:50% 50%; border:1px solid rgba(255,255,255,0.4);
    -webkit-transition:border 0.2s ease; transition:border 0.2s ease;
    -webkit-transform:translate(0,0); transform:translate(0,0);
}
#contents [data-js="slick-slider"] button[class*="slick-"]:hover{border-color:rgba(255,255,255,1);}
#contents [data-js="slick-slider"] .slick-prev{left:auto; right:7.8rem; background-image:url(../../img/dashboard/icon_slide_prev.svg);}
#contents [data-js="slick-slider"] .slick-next{right:3.9rem; background-image:url(../../img/dashboard/icon_slide_next.svg);}
#contents [data-js="slick-slider"] button[class*="slick-"]:before{display:none;}
/* drag control */
#contents [data-js="slick-slider"] .slick-track{user-select:none;}
#contents section{user-select:text;}

@media screen and (max-width:1024px) {
	#contents [data-js="slick-slider"] .slick-track{user-select:auto;}
}



/* //////////////////////////////////////////////////////////
    
    Contents 공통

////////////////////////////////////////////////////////// */
/* 섹션별 레이아웃 */
#contents section{}
#contents section .scrol{display:flex; flex-wrap:wrap; gap:2.5rem 1.5rem; overflow-y:auto; overflow-x:hidden; max-height:calc(100vh - 16.4rem);}
/* 스크롤바 커스텀 */
#contents section .scrol::-webkit-scrollbar{width:7px;}
#contents section .scrol::-webkit-scrollbar-thumb{border-radius: 10px; border:1px solid rgba(255,255,255,0.3);}

/* 1:1:2 */
#contents section.lay_1 .grid_l{width:calc(25% - 1.5rem);}
#contents section.lay_1 .grid_c{width:calc(30% - 1.5rem);}
#contents section.lay_1 .grid_r{width:45%;}
/* 3분할 */
#contents section.lay_2 .grid_l,
#contents section.lay_2 .grid_c,
#contents section.lay_2 .grid_r{width:calc((100% - 3rem)/3);}
/* 2:1:1 */
#contents section.lay_3 .grid_l{width:45%;}
#contents section.lay_3 .grid_c{width:calc(30% - 1.5rem);}
#contents section.lay_3 .grid_r{width:calc(25% - 1.5rem);}
/* 4분할 */
#contents section.lay_4 .grid_l,
#contents section.lay_4 .grid_c,
#contents section.lay_4 .grid_r{width:calc((100% - 4.5rem)/4);}
/* 2:3 */
#contents section.lay_5 .grid_l{width:calc(41% - 1.5rem);}
#contents section.lay_5 .grid_r{width:59%;}
/* 하단 */
#contents section .grid_b{width:100%;}
/* 아티클 그리드 */
#contents section .grid_bx+.grid_bx{margin-top:2.5rem;}
#contents section .grid_b .table_scroll .table{min-width:90rem;}

/* 각 차트 영역 */
#contents section .radial_graph{width:100%; height:33.7rem;}
#contents section .bar_graph{width:100%; height:24.7rem;}
#contents section .pie_graph{width:100%; height:24.7rem;}
#contents section .rowbar_graph{width:100%; height:47.5rem;}
#contents section .map_area{width:100%; height:54rem; font-family:"맑은 고딕", Arial;}
#contents section .line_graph{width:100%; height:26.4rem;}
#contents section .circle_graph{width:100%; height:30rem;}
#contents section .sankey_chart{width:100%; height:22.1rem;}
#contents section .full_width_area{width:100%; height:40rem;}

/* 수치 표시 박스 */
#contents .num_group{display:flex; flex-wrap:wrap; flex-direction:column; gap:1rem;}
#contents .numbers{display:flex; justify-content:space-between; align-items:center; min-height:11.5rem; padding:0 2.2rem; background-color:var(--bg-color); border-radius:var(--bdrdus-12); box-sizing:border-box;}
#contents .numbers .l_bx .ranks{font-style:normal; font-size:2rem; font-weight:500;}
#contents .numbers .l_bx>strong{display:block; font-size:2.6rem; font-weight:600; letter-spacing:-1px;}
#contents .numbers .r_bx{text-align:right;}
#contents .numbers .r_bx .prices{display:block; font-size:3rem; font-weight:600; letter-spacing:-1.5px;}
#contents .numbers .r_bx span{font-weight:300; font-size:14px; letter-spacing:-1px;}
#contents .numbers .r_bx span>em{font-style:normal;}
/* 작은 버전 */
#contents .smal .numbers{min-height:7.5rem; padding:0 1.5rem; border-radius:var(--bdrdus-8);}
#contents .smal .numbers .l_bx .ranks{font-size:14px;}
#contents .smal .numbers .l_bx>strong{font-size:2.3rem;}
#contents .smal .numbers .r_bx .prices{font-size:2.6rem;}
#contents .smal .numbers .r_bx span{font-size:14px;}

/* 분할 */
#contents .parts{display:flex; flex-wrap:wrap; flex-direction:row; gap:1rem;}
#contents .parts>*{flex:1;}

/* 가축 부위별 현황 */
#contents .ani_sel{display:none; justify-content:flex-end; align-items: center; gap:0 8px; margin-top:1.5rem;}
#contents .ani_sel select{width:10rem; height:3.6rem; font-size:1.6rem;}
#contents .animal_part{position:relative;}
#contents .animal_part>img{display:block; width:100%; max-width:55rem; margin:0 auto;}
#contents .animal_part>ul{
    position:absolute; top:0; left:50%; width:100%; max-width:55rem; height:100%; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;
    transform:translateX(-50%);
}
#contents .animal_part>ul>li{position:absolute;}
#contents .animal_part>ul>li>a{display:flex; justify-content:center; align-items:center; width:100%; height:100%;}
#contents .animal_part>ul>li>a>span{white-space:nowrap;}
/* 소 부위 */
#contents .animal_part.cow.nums_0 ul{background-image:url(../../img/dashboard/part_cow_1.svg);}
#contents .animal_part.cow.nums_1 ul{background-image:url(../../img/dashboard/part_cow_2.svg);}
#contents .animal_part.cow.nums_2 ul{background-image:url(../../img/dashboard/part_cow_3.svg);}
#contents .animal_part.cow.nums_3 ul{background-image:url(../../img/dashboard/part_cow_4.svg);}
#contents .animal_part.cow.nums_4 ul{background-image:url(../../img/dashboard/part_cow_5.svg);}
#contents .animal_part.cow.nums_5 ul{background-image:url(../../img/dashboard/part_cow_6.svg);}
#contents .animal_part.cow.nums_6 ul{background-image:url(../../img/dashboard/part_cow_7.svg);}
#contents .animal_part.cow.nums_7 ul{background-image:url(../../img/dashboard/part_cow_8.svg);}
#contents .animal_part.cow.nums_8 ul{background-image:url(../../img/dashboard/part_cow_9.svg);}
#contents .animal_part.cow.nums_9 ul{background-image:url(../../img/dashboard/part_cow_10.svg);}
#contents .animal_part.cow.nums_10 ul{background-image:url(../../img/dashboard/part_cow_11.svg);}
#contents .animal_part.cow.nums_11 ul{background-image:url(../../img/dashboard/part_cow_12.svg);}
#contents .animal_part.cow.nums_12 ul{background-image:url(../../img/dashboard/part_cow_13.svg);}
#contents .animal_part.cow.nums_13 ul{background-image:url(../../img/dashboard/part_cow_14.svg);}
#contents .animal_part.cow.nums_14 ul{background-image:url(../../img/dashboard/part_cow_15.svg);}
#contents .animal_part .cow_link_1{top:10%; left:24%; width:12.8%; height:14%; clip-path:polygon(15% 10%, 100% 0%, 100% 100%, 0% 60%);}
#contents .animal_part .cow_link_2{top:8%; left:37.2%; width:28%; height:22%; clip-path:polygon(0% 0%, 92% 20%, 100% 100%, 0% 72%);}
#contents .animal_part .cow_link_3{top:12.5%; left:63.2%; width:16%; height:8.5%; clip-path:polygon(0% 0%, 100% 0%, 96% 85%, 15% 100%);}
#contents .animal_part .cow_link_4{top:20.5%; left:65.3%; width:13%; height:9.5%; clip-path:polygon(0% 10%, 100% 0%, 82% 100%, 5% 100%);}
#contents .animal_part .cow_link_5{top:12.5%; left:76.8%; width:18%; height:17.4%; clip-path:polygon(17% 0%, 72% 26%, 100% 87%, 0% 100%);}
#contents .animal_part .cow_link_6{top:19%; left:13.5%; width:25%; height:30.5%; clip-path:polygon(0% 45%, 40% 0%, 93% 18%, 100% 95%, 50% 100%);}
#contents .animal_part .cow_link_7{top:25%; left:37.5%; width:12.5%; height:9.5%; clip-path:polygon(0% 0%, 98% 30%, 72% 88%, 3% 100%);}
#contents .animal_part .cow_link_8{top:28%; left:38%; width:27.3%; height:22%; clip-path:polygon(0% 33%, 32% 26%, 46% 0%, 100% 10%, 85% 100%, 5% 92%);}
#contents .animal_part .cow_link_9{top:30.5%; left:65.6%; width:9.5%; height:9.7%; clip-path:polygon(0% 0%, 100% 0%, 71% 100%, 22% 76%);}
#contents .animal_part .cow_link_10{top:31%; left:62%; width:10%; height:18.2%; clip-path:polygon(35% 0%, 55% 40%, 100% 55%, 100% 90%, 0% 100%);}
#contents .animal_part .cow_link_11{top:29%; left:72.5%; width:23%; height:38%; clip-path:polygon(0% 35%, 13% 7%, 100% 0%, 80% 82%, 20% 100%, 0% 94%);}
#contents .animal_part .cow_link_12{top:48.7%; left:26.5%; width:17.5%; height:29%; clip-path:polygon(0% 5%, 70% 0%, 100% 60%, 90% 100%, 42% 83%);}
#contents .animal_part .cow_link_13{top:48%; left:39.5%; width:32.2%; height:17%; clip-path:polygon(0% 7%, 68% 15%, 100% 0%, 100% 100%, 80% 85%, 14% 100%);}
#contents .animal_part .cow_link_14{top:61%; left:77.5%; width:14.3%; height:13%; clip-path:polygon(0% 46%, 93% 0%, 100% 70%, 16% 100%);}
#contents .animal_part .cow_link_9>a>span{transform:translate(0, -0.5rem);}
#contents .animal_part .cow_link_10>a>span{transform:translate(0.6rem, 1.3rem);}
#contents .animal_part .cow_link_12>a>span{transform:translate(1.2rem, 0);}
/* 돼지 부위 */
#contents .animal_part.fig.nums_0 ul{background-image:url(../../img/dashboard/part_fig_1.svg);}
#contents .animal_part.fig.nums_1 ul{background-image:url(../../img/dashboard/part_fig_2.svg);}
#contents .animal_part.fig.nums_2 ul{background-image:url(../../img/dashboard/part_fig_3.svg);}
#contents .animal_part.fig.nums_3 ul{background-image:url(../../img/dashboard/part_fig_4.svg);}
#contents .animal_part.fig.nums_4 ul{background-image:url(../../img/dashboard/part_fig_5.svg);}
#contents .animal_part.fig.nums_5 ul{background-image:url(../../img/dashboard/part_fig_6.svg);}
#contents .animal_part.fig.nums_6 ul{background-image:url(../../img/dashboard/part_fig_7.svg);}
#contents .animal_part.fig.nums_7 ul{background-image:url(../../img/dashboard/part_fig_8.svg);}
#contents .animal_part.fig.nums_8 ul{background-image:url(../../img/dashboard/part_fig_9.svg);}
#contents .animal_part.fig.nums_9 ul{background-image:url(../../img/dashboard/part_fig_10.svg);}
#contents .animal_part.fig.nums_10 ul{background-image:url(../../img/dashboard/part_fig_11.svg);}
#contents .animal_part .fig_link_1{top:3.5%; left:20%; width:25.6%; height:24%; clip-path:polygon(0% 35%, 33% 6%, 100% 0%, 99% 74%, 16% 100%);}
#contents .animal_part .fig_link_2{top:0%; left:46%; width:15.5%; height:12%; clip-path:polygon(0% 23%, 100% 4%, 70% 55%, 2% 77%);}
#contents .animal_part .fig_link_3{top:1%; left:45.9%; width:31.7%; height:26.3%; clip-path:polygon(0% 34%, 36% 22%, 51% 0%, 100% 12%, 81% 100%, 49% 77%, 0% 75%);}
#contents .animal_part .fig_link_4{top:27.3%; left:25%; width:13.5%; height:32%; clip-path:polygon(0% 18%, 92% 39%, 0% 100%);}
#contents .animal_part .fig_link_5{top:22.3%; left:24%; width:21.2%; height:24.5%; clip-path:polygon(0% 23%, 100% 0%, 94% 100%, 51% 60%, 3% 42%);}
#contents .animal_part .fig_link_6{top:21.7%; left:45.1%; width:20%; height:13.7%; clip-path:polygon(3% 0%, 25% 0%, 100% 70%, 0% 100%);}
#contents .animal_part .fig_link_7{top:21.5%; left:51.5%; width:20%; height:14.5%; clip-path:polygon(0% 0%, 55% 5%, 100% 45%, 96% 100%);}
#contents .animal_part .fig_link_8{top:40%; left:25.5%; width:18.5%; height:35%; clip-path:polygon(0% 56%, 65% 0%, 100% 21%, 92% 70%, 70% 95%, 9% 100%);}
#contents .animal_part .fig_link_9{top:30.5%; left:43%; width:27.6%; height:41.2%; clip-path:polygon(7% 15%, 77% 3%, 100% 16%, 96% 77%, 41% 100%, 0% 84%);}
#contents .animal_part .fig_link_10{top:5%; left:70%; width:22%; height:62.2%; clip-path:polygon(37% 0%, 93% 19%, 100% 39%, 75% 96%, 22% 100%, 0% 90%, 8% 40%);}
#contents .animal_part .fig_link_2>a>span{transform:translate(-1rem, -0.5rem);}
#contents .animal_part .fig_link_4>a>span{transform:translate(-1.2rem, 0);}
#contents .animal_part .fig_link_5>a>span{transform:translate(2.5rem, -1rem);}
#contents .animal_part .fig_link_6>a>span{transform:translate(-2rem, 0);}
#contents .animal_part .fig_link_7>a>span{transform:translate(2rem, -0.4rem);}
/* 가축 부위 그래프 */
#contents .animal_chart{margin-top:1.5rem;}
#contents .animal_chart>ul>li{display:flex; justify-content:space-between; align-items: center}
#contents .animal_chart>ul>li:not(:first-child){margin-top:0.5rem;}
#contents .animal_chart>ul>li .tt{font-weight:500;}
#contents .animal_chart .bars{max-width:calc(100% - 7rem); height:3rem; line-height:3rem; padding:0 1rem; border-radius:0.3rem; text-align:right; font-size:14px; font-weight:500; box-sizing:border-box;}
#contents .animal_chart .bars.month_week{background-color:var(--main-color);}
#contents .animal_chart .bars.last_week{background-color:var(--blue-color); color:#272a31;}
#contents .animal_chart .bars.last_month{background-color:var(--yellow-color); color:#272a31;}
#contents .animal_chart .bars.same_month{background-color:#254890;}

@media screen and (max-width:1400px) {    
	/* 1:1:2 */
	#contents section.lay_1 .grid_l,
	#contents section.lay_1 .grid_c,
	#contents section.lay_1 .grid_r{width:calc((100% - 3rem)/3);}
	/* 2:3 */
	#contents section.lay_5 .grid_l,
	#contents section.lay_5 .grid_r{width:calc((100% - 1.5rem)/2);}
	
    /* 아티클 그리드 */
    #contents section .grid_bx+.grid_bx{margin-top:2rem;}
}
@media screen and (max-width:1400px) and (min-width:1025px) {
    /* 가축 부위별 현황 */
    #contents .ani_sel{display:flex;}
    #contents .animal_part>ul>li>a>span{font-size:12px;}
    #contents .animal_part .fig_link_4>a>span{transform:translate(-0.7rem, 0);}
    #contents .animal_part .fig_link_6>a>span{transform:translate(-1rem, 0);}
    #contents .animal_part .fig_link_7>a>span{transform:translate(2rem, 0);}
}
@media screen and (max-width:1024px) {
    /* 섹션별 레이아웃 */
    #contents section .scrol{gap:2rem 1.2rem;}
    
    /* 1:1:2 */
	#contents section.lay_1 .grid_l,
	#contents section.lay_1 .grid_c{width:calc(50% - 1.2rem);}
	#contents section.lay_1 .grid_r{width:100%;}
    /* 3분할 */
	#contents section.lay_2 .grid_l,
	#contents section.lay_2 .grid_c{width:calc((100% - 1.2rem)/2);}
	#contents section.lay_2 .grid_r{width:100%;}
    /* 2:1:1 */
    #contents section.lay_3 .grid_l{width:100%;}
    #contents section.lay_3 .grid_c,
    #contents section.lay_3 .grid_r{width:calc(50% - 1.2rem);}
    /* 4분할 */
	#contents section.lay_4 .grid_l,
	#contents section.lay_4 .grid_c,
	#contents section.lay_4 .grid_r{width:calc((100% - 1.2rem)/2);}
	/* 2:3 */
	#contents section.lay_5 .grid_l,
	#contents section.lay_5 .grid_r{width:100%;}

    /* 수치 표시 박스 */
    #contents .numbers{min-height:8.5rem; border-radius:var(--bdrdus-8);}
    #contents .numbers .l_bx>strong{font-size:2.3rem;}
    #contents .numbers .r_bx .prices{font-size:2.6rem;}
    /* 작은 버전 */
    #contents .smal .numbers{min-height:6.5rem; border-radius:var(--bdrdus-5);}
    #contents .smal .numbers .l_bx>strong{font-size:2.1rem;}
    #contents .smal .numbers .r_bx .prices{font-size:2.3rem;}
}
@media screen and (max-width:640px) {
    /* 2:1:1 */
    #contents section.lay_3 .grid_l{width:100%;}
    #contents section.lay_3 .grid_c,
    #contents section.lay_3 .grid_r{width:100%;}
        
    /* 수치 표시 박스 */
    #contents .num_group{gap:0.6rem;}
    #contents .numbers{min-height:7rem; border-radius:var(--bdrdus-5);}
    #contents .numbers .l_bx .ranks{font-size:1.7rem;}
    #contents .numbers .r_bx .prices{font-size:2.4rem;}
    /* 작은 버전 */
    #contents .smal .numbers .r_bx .prices{font-size:2.3rem;}
	
	/* 각 차트 영역 */
    #contents section .map_area{height:50rem;}
}
@media screen and (max-width:480px) {
	/* 1:1:2 */
	#contents section.lay_1 .grid_l,
	#contents section.lay_1 .grid_c,
	#contents section.lay_1 .grid_r{width:100%;}
	/* 3분할 */
	#contents section.lay_2 .grid_l,
	#contents section.lay_2 .grid_c,
	#contents section.lay_2 .grid_r{width:100%;}
	/* 4분할 */
	#contents section.lay_4 .grid_l,
	#contents section.lay_4 .grid_c,
	#contents section.lay_4 .grid_r{width:100%;}
	/* 2:3 */
	#contents section.lay_5 .grid_l,
	#contents section.lay_5 .grid_r{width:100%;}
	
    /* 분할 */
	#contents .parts{flex-direction:column;}

    /* 가축 부위별 현황 */
    #contents .ani_sel{display:flex;}
    #contents .animal_part>ul>li>a>span{font-size:12px;}
    #contents .animal_part .fig_link_2>a>span{transform:translate(-0.7rem, -0.2rem);}
    #contents .animal_part .fig_link_4>a>span{transform:translate(-0.7rem, 0);}
    #contents .animal_part .fig_link_6>a>span{transform:translate(-1rem, 0);}
    #contents .animal_part .fig_link_7>a>span{transform:translate(2rem, 0);}
}



/* //////////////////////////////////////////////////////////
    
    Contents 예외처리

////////////////////////////////////////////////////////// */

@media screen and (max-width:1400px) {
	/* Cow Section2 */
	#contents .cow_sec_2 .grid_bx .num_group.parts{flex-direction:column;}
	/* Cow Section5 */  
	#contents section.lay_2.cow_sec_5 .grid_l,
	#contents section.lay_2.cow_sec_5 .grid_c{width:calc((100% - 1.5rem)/2);}
	#contents section.lay_2.cow_sec_5 .grid_r{width:100%;}
	
	/* Cken Section1 */
	#contents .cken_sec_1 .grid_bx .num_group.parts{flex-direction:column;}
	
	/* Duck Section1 */
	#contents .duck_sec_1 .grid_bx .num_group.parts{flex-direction:column;}
	
	/* Egg Section1 */
	#contents .egg_sec_1 .grid_bx .num_group.parts{flex-direction:column;}
	
	/* Horse Section1 */
	#contents .horse_sec_1 .grid_bx .num_group.parts{flex-direction:column;}
}
@media screen and (max-width:1024px) {
	/* Cow Section2 */
	#contents .cow_sec_2 .grid_bx .num_group.parts{flex-direction:row;}
	/* Cow Section5 */
	#contents section.lay_2.cow_sec_5 .grid_l{width:100%;}
	#contents section.lay_2.cow_sec_5 .grid_c,
	#contents section.lay_2.cow_sec_5 .grid_r{width:calc((100% - 1.2rem)/2);}
	
	/* Cken Section1 */
	#contents .cken_sec_1 .grid_bx .num_group.parts{flex-direction:row;}
	
	/* Duck Section1 */
	#contents .duck_sec_1 .grid_bx .num_group.parts{flex-direction:row;}
	
	/* Egg Section1 */
	#contents .egg_sec_1 .grid_bx .num_group.parts{flex-direction:row;}
	
	/* Horse Section1 */
	#contents .horse_sec_1 .grid_bx .num_group.parts{flex-direction:row;}
}
@media screen and (max-width:640px) {
	/* Cow Section2 */
	#contents .cow_sec_2 .grid_bx .num_group.parts{flex-direction:column;}
	/* Cow Section5 */
	#contents section.lay_2.cow_sec_5 .grid_l,
	#contents section.lay_2.cow_sec_5 .grid_c,
	#contents section.lay_2.cow_sec_5 .grid_r{width:100%;}
	
	/* Cken Section1 */
	#contents .cken_sec_1 .grid_bx .num_group.parts{flex-direction:column;}
	
	/* Duck Section1 */
	#contents .duck_sec_1 .grid_bx .num_group.parts{flex-direction:column;}
	
	/* Egg Section1 */
	#contents .egg_sec_1 .grid_bx .num_group.parts{flex-direction:column;}
	
	/* Horse Section1 */
	#contents .horse_sec_1 .grid_bx .num_group.parts{flex-direction:column;}
}