@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Noto+Sans+KR:wght@300;400;700;900&display=swap');
:root{
    --cio-primary-color-1:#F21D2F;
    --cio-primary-color-2:#A50C0D;
    --cio-secndary-color-1:#400406;
    --cio-secndary-color-2:#333333;
    --cio-font-color-1:#000000;
    --cio-font-color-2:#222222;
    --cio-font-color-3:#282828;
    --cio-font-color-4:#666666;
    --cio-font-color-5:#9B9B9B;
    --cio-font-color-6:#ffffff;
    --cio-font-color-7:#A7A7A7;
    --cio-gray-color-1:#6A6C6F;
    --cio-gray-color-2:#DDDDDD;
    --cio-gray-color-3:#E1E1E1;
    --cio-gray-color-4:#EDEDED;
    --cio-gray-color-5:#F0F1F2;
    --cio-gray-color-6:#F7F7F7;

    --color-gray-10:rgba(255,255,255,0.1);
    --color-gray-20:rgba(255,255,255,0.2);
    --color-gray-30:rgba(255,255,255,0.3);
    --color-gray-40:rgba(255,255,255,0.4);
    --color-gray-50:rgba(255,255,255,0.5);
    --color-gray-60:rgba(255,255,255,0.6);
    --color-gray-70:rgba(255,255,255,0.7);
    --color-gray-80:rgba(255,255,255,0.8);
    --color-gray-90:rgba(255,255,255,0.9);

    --cio-state-select-color:#F21D2F;
    --cio-state-success-color:#A50C0D;
    --cio-state-error-color:#A50C0D;
    --cio-hover-color:#ffffff;
    --cio-font-size-default:15px;
    --cio-blue:#2B95FF;
    --cio-blue-dark:#004AF6;
    --color-insider:#6EAE00;

    --color-kakao-1:#FFE812;
    --color-twitter-1:#1D95E0;
    --color-facebook-1:#3A579F;
}
body{
    /*min-width: 576px;*/
    font-family: 'Noto Sans KR', sans-serif;
    counter-reset: top-story-count;
    font-size:var(--cio-font-size-default);
    color:var(--cio-font-color-2);
}
a{
    color:var(--cio-font-color-2);
    text-decoration: none;
}
a:hover{
    color:var(--cio-font-color-2);
}
a:visited{
    color:var(--cio-font-color-2);
}
h1{
    Letter-Spacing : -0.7px;
}
h2{
    Letter-Spacing : -0.7px;
}
h3{
    Letter-Spacing : -0.7px;
}
h4{
    Letter-Spacing : -0.7px;
}
h5{
    Letter-Spacing : -0.7px;
    font-weight: bold;
}
h6{
    Letter-Spacing : -0.7px;
    line-height: 1.5em;
}
.font-lato{
    font-family: 'Lato';
}
.font-sm{
    font-size:0.93em;
}
.font-xs,small{
    font-size:0.86em;
}
p{
    line-height: 1.75em;
}
.font-color-primary-1{color: var(--cio-primary-color-1);}
.font-color-primary-2{color: var(--cio-primary-color-2);}
.font-color-secndary-1{color:var(--cio-primary-color-1);}
.font-color-b{color: var(--cio-font-color-1);}
.font-color-2{color: var(--cio-font-color-2);}
.font-color-3{color: var(--cio-font-color-3);}
.font-color-4{color: var(--cio-font-color-4);}
.font-color-5{color: var(--cio-font-color-5);}
.font-color-w{color: var(--cio-font-color-6);}

.bg-primary-1{background-color: var(--cio-primary-color-1);}
.bg-primary-2{background-color: var(--cio-primary-color-2);}
.bg-gray-1{background-color: var(--cio-gray-color-1);}
.bg-gray-2{background-color: var(--cio-gray-color-2);}
.bg-gray-3{background-color: var(--cio-gray-color-3);}
.bg-gray-4{background-color: var(--cio-gray-color-4);}
.bg-gray-5{background-color: var(--cio-gray-color-5);}
.bg-gray-6{background-color: var(--cio-gray-color-6);}
.bg-gray-dark{background-color: var(--cio-font-color-2);}

.color-gray-1{color: var(--cio-gray-color-1);}
.color-gray-2{color: var(--cio-gray-color-2);}
.color-gray-4{color: var(--cio-gray-color-3);}
.color-gray-4{color: var(--cio-gray-color-4);}
.color-gray-5{color: var(--cio-gray-color-5);}
.color-gray-6{color: var(--cio-gray-color-6);}

.border-gray-10{border-color: var(--color-gray-10) !important;}

.border-gray-2{border-color: var(--cio-gray-color-2) !important;}
.border-gray-3{border-color: var(--cio-gray-color-3) !important;}
.border-gray-4{border-color: var(--cio-gray-color-4) !important;}
.border-gray-5{border-color: var(--cio-gray-color-5) !important;}
.border-gray-6{border-color: var(--cio-gray-color-6) !important;}

.border-primary-1{border-color: var(--cio-primary-color-1) !important;}

.crop-text-1 {
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.crop-text-2 {
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.crop-text-3 {
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.crop-text-4 {
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.crop-text-5 {
    -webkit-line-clamp: 5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.btn-cio {
    color: var(--cio-font-color-6);
    background-color: var(--cio-primary-color-1);
    border-color: var(--cio-primary-color-1);
}
.btn-black {
    color: var(--cio-font-color-6);
    background-color: #000000;
    border-color: #000000;
}
.btn-blue{
    background-color: var(--cio-blue);
    color(--cio-font-color-6);
}
.owl-nav button,.owl-dots button{
    outline: 0;
}

.card.no-border{
    border-width:0;
}
.card.no-border .card-body{
    padding:0.5rem 0;
}

/* list group */
.list-group-border .card-header a ion-icon{
    height: 0.60rem;
}
.list-group-border .card-header{
    display: flex;
    justify-content: space-between;
}
.list-group-border .list-group-item a:hover{
    color:var(--cio-primary-color-2);
    text-decoration: underline;
    text-underline-position: under;
}
.list-group-black{
    background-color: var(--cio-font-color-2);
    color:var(--cio-font-color-7);
}
.list-group-black .card-header{
    color:var(--cio-font-color-6) !important;
    display: flex;
    justify-content: space-between;
}
.list-group-black .card-header a ion-icon{
    height: 0.60rem;
}
.list-group-black .list-group-item{
    color:var(--cio-font-color-7) !important;
    background-color: var(--cio-font-color-2);
}
.list-group-black a{
    color:var(--cio-font-color-7);
}
.list-group-black .list-group-item a:hover{
    color:var(--cio-font-color-6);
    text-decoration: underline;
    text-underline-position: under;
}
.card.list-group-flush .card-header{
    background-color: transparent;
    border-bottom-width:0px;
}
.card.list-group-flush .card-header{
    display: flex;
    justify-content: space-between;
}
.card.list-group-flush .card-header strong{
    color:var(--cio-font-color-1);
}
.card.list-group-flush .card-header>div>span{
    color:var(--cio-font-color-5);
}
.btn-group-xs>.btn, .btn-xs {
    padding: 0.5rem 0;
    font-size: .7rem;
    line-height: 1.2em;
    color:var(--cio-font-color-2);
    background-color: transparent;
}
.btn-group-xs>.btn small, .btn-xs small{
}
.btn-group-xs>.btn:hover, .btn-xs:hover {
    color:var(--cio-primary-color-2);
    background-color: transparent;
}
.carousel-evp .card{
    background-color: var(--cio-font-color-2);
    color:var(--cio-font-color-6);
}
.border-insider{
    border-color:var(--color-insider);
}
.bullet-ranking{
    background-color:var(--cio-font-color-5);
    border-radius: 0.7em;
    border-bottom-right-radius: 0;
    display:inline-block;
    text-align:center;
    color:white;
    line-height:1.7em;
    margin-right:0.5em;
    padding:0 0.5em;
}
.list-group-ranking .card-header{
    background-color:transparent;
}
.list-group-ranking .highlight{
    background-color:var(--cio-primary-color-1);
}

/* insider */
.custom-logo {
    filter: invert(100%);
    transition: filter .5s ease-out;
}