@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;300;400;500;600;700;900&display=swap');
@font-face{ 
    font-family:'MIN Sans'; 
    src:url('/fonts/MinSans-Light.eot'); 
    src:url('/fonts/MinSans-Light.eot?#iefix') format('embedded-opentype'), 
    url('/fonts/MinSans-Light.woff2') format('woff2'), 
    url('/fonts/MinSans-Light.ttf') format('truetype'), 
    url('/fonts/MinSans-Light.otf') format('opentype'); 
    font-weight: 300;
}
@font-face{ 
    font-family:'MIN Sans'; 
    src:url('/fonts/MinSans-Regular.eot'); 
    src:url('/fonts/MinSans-Regular.eot?#iefix') format('embedded-opentype'), 
    url('/fonts/MinSans-Regular.woff2') format('woff2'), 
    url('/fonts/MinSans-Regular.ttf') format('truetype'), 
    url('/fonts/MinSans-Regular.otf') format('opentype'); 
    font-weight: 400;
}
@font-face{ 
    font-family:'MIN Sans'; 
    src:url('/fonts/MinSans-Medium.eot'); 
    src:url('/fonts/MinSans-Medium.eot?#iefix') format('embedded-opentype'), 
    url('/fonts/MinSans-Medium.woff2') format('woff2'), 
    url('/fonts/MinSans-Medium.ttf') format('truetype'), 
    url('/fonts/MinSans-Medium.otf') format('opentype'); 
    font-weight: 500;
}
@font-face{ 
    font-family:'MIN Sans'; 
    src:url('/fonts/MinSans-Bold.eot'); 
    src:url('/fonts/MinSans-Bold.eot?#iefix') format('embedded-opentype'), 
    url('/fonts/MinSans-Bold.woff2') format('woff2'), 
    url('/fonts/MinSans-Bold.ttf') format('truetype'), 
    url('/fonts/MinSans-Bold.otf') format('opentype'); 
    font-weight: 700;
}

.lt_customer{ position: relative; width: 100%; }
.latest_content{ width: 100%; border-top: 2px solid #17181e; }
.latest_content > li{ position: relative; border-bottom: 1px solid #dcdcdd; }
.latest_content > li .flex{ width: 100%; height: 100px; display: flex; align-items: center; background: transparent; transition: all 0.2s ease-in-out; }
.latest_content > li .flex:hover{ background: #fff; }

/*? BOX TYPE */
.dayBox{ width: 115px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.dayBox *{ display: block; color: #22252c; line-height: 22px; transition: all 0.2s ease-in-out; }
.latest_content > li .flex:hover .dayBox *{ color: #3350c3; }
.dayBox span{ font-size: 14px; font-weight: 400; }
.dayBox strong{ font-size: 20px; font-weight: 600; }
.titBox{ width: calc(100% - 360px); padding-right: 30px; }
.titBox p{ font-size: 26px; font-weight: 500; color: #22252c; letter-spacing: -1px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stateBox{ width: 245px; }
.stateBox ol{ display: flex; justify-content: center; }
.stateBox ol li{ width: 90px; height: 30px; font-size: 15px; font-weight: 500; color: #fff; line-height: 31px; text-align: center; overflow: hidden; }
.stateBox ol li:last-of-type{ margin-left: 5px; }
.stateBox ol li.co01{ background: #17181e; }
.stateBox ol li.co02{ background: #a0aaba; }
.stateBox ol li.co03{ background: #3350c3; }

/*? PAGER */
.page{ position: relative; width: 100%; text-align: center; margin-top: 50px; } 
.page a{ display: inline-block; width: 30px; height: 30px; font-size: 18px; font-weight: 700; color: #b6bcc1; line-height: 30px; vertical-align: middle; overflow: hidden; margin: 0 2px; transition: all 0.2s ease-in-out; }
.page a:hover{ color: #22252c; }

.page .num { display: inline-block; font-size: 18px; font-weight: 700; color: #b6bcc1; vertical-align: middle; overflow: hidden; font-family: 'Outfit'; }
.page .num .cur_page { font-size: 22px; color: #22252c; font-family: 'Outfit'; }
.page .pre { text-indent: -9999px; background:url('./img/btn_prev.png') no-repeat center center; padding:0; }
.page .pre:hover { background:url('./img/btn_prev_on.png') no-repeat center center; padding:0; }
.page .next{ text-indent: -9999px; background:url('./img/btn_next.png') no-repeat center center; padding:0; }
.page .next:hover{ background:url('./img/btn_next_on.png') no-repeat center center; padding:0; }
.page .cur{ color: #22252c; }





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

    .latest_content > li .flex{ height: 80px; }

    .dayBox{ width: 100px; }
    .dayBox *{ line-height: 20px; }
    .dayBox span{ font-size: 13px; }
    .dayBox strong{ font-size: 19px; }
    .titBox{ width: calc(100% - 300px); padding-right: 20px }
    .titBox p{ font-size: 22px; }
    .stateBox{ width: 200px; }
    .stateBox ol li{ font-size: 14px; }

    .page{ margin-top: 30px; }

}


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

    .latest_content > li .flex{ height: 70px; flex-wrap: wrap; flex-direction: column; justify-content: center; padding: 10px; }
    .dayBox{ flex-direction: row; justify-content: flex-start; width: calc(100% - 70px); }
    .dayBox span{ font-size: 12px; font-weight: 600; color: #a0aaba; }
    .dayBox strong{ font-size: 12px; color: #a0aaba; }
    .dayBox strong::before{ content: '.'; display: inline-block; }
    .titBox{ width: calc(100% - 70px); }
    .titBox p{ font-size: 16px; line-height: 24px; }
    .stateBox{ width: 70px; }
    .stateBox ol{ flex-direction: column; align-items: center; }
    .stateBox ol li{ width: 70px; height: 25px; font-size: 11px; line-height: 25px; }
    .stateBox ol li:last-of-type{ margin-left: 0; }

    .page a{ width: 20px; height: 30px; font-size: 15px; line-height: 30px; }
}