:root{
    --main:#5f477b;
    --lightpur:#e0d3f4;
    --white: #ffffff;
    --lightgray:#f9f9f9;
    --purplered:#a30059;
}


#news{width:100%; min-width:100%; display: flex; flex-direction: row; justify-content: flex-start; align-items:stretch; gap:20px }
#news .mainarea{ flex:1 1 100%; list-style: none;}
#news .subarea{ width: 800px; position: relative;padding:0 40px;  user-select: none; }
#news .mainarea .mainlist{list-style: none;}
#news .mainarea .mainlist li{ display:flex; flex-direction: right; justify-content: flex-start; align-items: center;position: relative; padding:8px 0 8px 15px; border-bottom: 1px #ccc dashed; gap:20px }
#news .mainarea .mainlist li::before{ content: ""; width:4px; height:35px; position: absolute; top:50%; left:0; background: var(--lightpur);transform: translate(0%,-50%);}
#news .mainarea .mainlist li:nth-child(2n){ background: var(--lightgray);}
#news .mainarea .mainlist li > div{ flex: 1 1 100%; display:inline-flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
#news .mainarea .mainlist li a{flex:1 1 auto; display:inline-flex; flex-direction: row; justify-content: center; align-items: center; width:35px; height:35px; border-radius: 8px; background: var(--main); padding:8px; }
#news .mainarea .mainlist li a:hover{background: var(--purplered);}
#news .mainarea .mainlist li.hover .text{color:var(--purplered);}
#news .mainarea .mainlist li.hover .date{color:var(--purplered);}
#news .mainarea .mainlist li:hover .text{color:var(--purplered);}
#news .mainarea .mainlist li:hover .date{color:var(--purplered);}
#news .mainarea .mainlist li .date{ flex:1 1 100%; display:block; font-size:20px; color: var(--main); white-space: nowrap;  }
#news .mainarea .mainlist li .text{ 
    flex:1 1 100%; 
    font-size:20px; 
    text-align: left; 
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}



#news .suboverflow{overflow-x:hidden; width: 100%; height: 100%; padding:0; margin:0; position: relative;}
#news .subarea ul.sublist{width: 100%; height: auto; display: flex; flex-direction: row; list-style: none; flex-wrap: nowrap;position: relative; left:0px; top:0px; /*transition: left .4s linear;*/ }
#news .subarea ul.sublist > li{ min-width: 100%; background: var(--main); }
#news .subarea ul.sublist > li .itemarea{display:flex; flex-direction: column; justify-content:flex-start; align-items:flex-start; width: 100%; height: 100%;}
#news .subarea ul.sublist > li .itemarea a{color:var(--lightpur)}
#news .subarea ul.sublist > li .itemarea a:hover{color:var(--white)}
#news .subarea ul.sublist > li .itemarea img{width:100%; aspect-ratio: 3 / 2 ; }
#news .subarea ul.sublist > li .itemarea .itemContent{ width: 100%;padding:10px 25px; font-size:18px; line-height: 1.5; }
#news .subarea ul.sublist > li .itemarea .itemContent .title{ font-size:25px; text-align: justify; font-weight: bold; margin: 6px 0 10px 0;  }
#news .subarea ul.sublist > li .itemarea .itemContent .content{ text-align: justify;margin: 8px 0 10px 0;}
#news .subarea ul.sublist > li .itemarea .itemContent .date{ text-align: justify;margin: 8px 0 0px 0;}
#news .subarea ul.sublist > li .itemarea .itemContent .price{ text-align: justify;margin: 0px 0 6px 0;}
#news .subarea .leftarrow{display: inline-flex; justify-content: center; align-items: center; background: var(--main);color: var(--white); position: absolute; box-shadow: 3px 3px 5px #333; top:30%; left:15px;width:40px; height:45px; border-radius: 20%; cursor: pointer; }
#news .subarea .rightarrow{display: inline-flex;justify-content: center; align-items: center; background: var(--main);color: var(--white); position: absolute; box-shadow: -3px 3px 5px #333; top:30%; right: 15px;width:40px; height:45px;border-radius: 20%; cursor: pointer; }
#news .subarea .leftarrow .arrow{fill: var(--white); height:24px;}
#news .subarea .rightarrow .arrow{fill:var(--white); height:24px;}
#news .subarea .leftarrow:hover{  background: var(--purplered);}
#news .subarea .rightarrow:hover{ background: var(--purplered);}

#activity{position: relative; min-width:100%; left:0;top:0;text-align: left;}
#activity > ul{ width: 100%; display:flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap:0px; padding:0; margin:0; list-style: none;}
#activity > ul > li{display:flex; flex-direction: row; justify-content: flex-start; height:80px; align-items: center;position: relative; padding:5px 0px 5px 15px; border-bottom: 1px #ccc dashed; width: 100%; gap:20px }
#activity > ul > li::before{content: ""; width:4px; height:35px; position: absolute; top:50%; left:0; background: var(--lightpur);transform: translate(0%,-50%);}
#activity > ul > li:nth-child(even){background: var(--lightgray);}
#activity > ul > li > span:nth-child(1){ flex:1 1 auto; display:inline-block; font-size:20px; color: var(--main); white-space: nowrap; padding:0px 0px; line-height: 1.5;}
#activity > ul > li > span:nth-child(2){ flex:1 1 100%; }
#activity > ul > li > span:nth-child(2) a{
    flex:1 1 100%; 
    font-size:20px; 
    text-align: justify; 
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    color:#333;
    line-height: 1.5;
}
#activity > ul > li > span:nth-child(2) a:hover{
    color:var(--purplered)
}

#news .mainarea .mainlist li a > .links_icon{fill: #fff; stroke-width: 0px; width:15px; height:15px}
.news_link_but{fill: #fff; stroke-width: 0px; }

@media screen and ( max-width:1280px ){
    #news .subarea{width: 400px;}
}

/**/
@media screen and ( max-width:875px ) {
    #news .subarea{width: 350px;}
    #news .subarea ul.sublist > li .itemarea .itemContent .title{ font-size:21px; }
    
    #activity > ul > li > span:nth-child(1){font-size:20px;}
    #activity > ul > li > span:nth-child(2) a{font-size:20px; }
    
}


@media screen and ( max-width:767px ) {
    #news{flex-direction: column; justify-content: flex-start; align-items:stretch; gap:20px }
    #news .subarea{width: 100%;}
    #news .subarea .leftarrow{top:50%;}
    #news .subarea .rightarrow{top:50%;}

    #activity > ul > li{flex-direction: column; justify-content: flex-start; height:auto; align-items: flex-start; gap:0px }
    
    
}


@media screen and ( max-width:580px ) {
    #news .mainarea .mainlist li .date{ font-size:18px; }
    #news .mainarea .mainlist li .text{font-size:18px;}
    #activity > ul > li > span:nth-child(1){font-size:18px;}
    #activity > ul > li > span:nth-child(2) a{font-size:18px;}

}





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