.news-header{padding:30px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.1);position:relative;overflow:hidden;margin-bottom:20px}
.news-title{font-size:2rem;margin-bottom:10px;position:relative;z-index:1;text-shadow:0 2px 4px rgba(0,0,0,0.2)}
.news-subtitle{font-size:1.1rem;opacity:0.9;position:relative;z-index:1;font-weight:400}
.directory-section{background:white;border-radius:12px;overflow:hidden;margin-bottom:20px;box-shadow:0 4px 12px rgba(0,0,0,0.05)}
.directory-header{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;background:#F9F9F9;cursor:pointer;border-bottom:1px solid #e0e6ed;transition:all 0.3s ease;border-radius:12px 12px 0 0}
.directory-header:hover{background:#9C9C9C}
.directory-title{font-size:1.4rem;font-weight:600;display:flex;align-items:center;gap:10px}
.toggle-icon{font-size:1.2rem;transition:transform 0.3s ease}
.publish-time {gap: 10px;padding-top: 15px;color: #555;font-size: 0.95rem;}
.publish-time i {color: #1a73e8;}
.preface-section{border:1px solid #e0e6ed;border-radius:12px;overflow:hidden;margin:25px 0;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.preface-header{display:flex;align-items:center;padding:20px;background:white;border-bottom:1px solid #e0e6ed}
.preface-content{display:flex;flex-direction:row;background:white;align-items:center}
.preface-text{flex:1;padding:25px}
.preface-text p{margin-bottom:15px;color:#444;font-size:1.05rem;line-height:1.7}
.preface-text p:first-child{margin-top:0}
.directory-content{max-height:0;overflow:hidden;transition:max-height 0.4s ease-out}
.directory-content.expanded{max-height:1000px}
.directory-list{list-style:none;padding:10px 0}
.directory-list li{padding:15px 30px;border-bottom:1px solid #f0f0f0;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:12px}
.directory-list li:hover{background:#f5f9ff;padding-left:35px;color:#1a73e8}
.directory-list li.active{background:#e3f0ff;border-left:4px solid #1a73e8;padding-left:32px}
.directory-list li::before{content:"•";color:#1a73e8;font-size:1.5rem;font-weight:bold}
.news-content{background:white;border-radius:12px;padding:30px;box-shadow:0 4px 12px rgba(0,0,0,0.05);margin-bottom:20px}
.content-section{margin-bottom:30px;scroll-margin-top:20px;overflow:hidden}
.content-section h2{color:#1a73e8;margin-bottom:15px;padding-bottom:8px;border-bottom:2px solid #eaefff;clear:both}
.content-section p{margin-bottom:15px;font-size:1.05rem;color:#444;text-align:justify}
.float-left{float:left;margin:0 20px 15px 0;width:300px;max-width:45%;border-radius:8px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,0.1);transition:transform 0.3s ease;background:#f0f7ff;display:flex;flex-direction:column}
.float-left:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.15)}
.float-right{float:right;margin:0 0 15px 20px;width:300px;max-width:45%;border-radius:8px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,0.1);transition:transform 0.3s ease;background:#f0f7ff;display:flex;flex-direction:column}
.float-right:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.15)}
.direct-image{width:100%;height:auto;display:block;object-fit:cover}
.video-placeholder{min-height:180px;display:flex;align-items:center;justify-content:center;color:#1a73e8;font-size:1.1rem;font-weight:500;background:linear-gradient(135deg,#ffe3e3 0%,#ffc8c8 100%);position:relative;cursor:pointer;transition:all 0.3s}
.video-placeholder:hover{background:linear-gradient(135deg,#ffd1d1 0%,#ffb3b3 100%)}
.video-placeholder::after{content:"▶";position:absolute;font-size:3rem;color:rgba(255,255,255,0.8);text-shadow:0 0 10px rgba(0,0,0,0.3);transition:transform 0.3s}
.video-placeholder:hover::after{transform:scale(1.2)}
.youtube-badge{position:absolute;top:10px;right:10px;background:#FF0000;color:white;padding:4px 8px;border-radius:4px;font-size:0.8rem;font-weight:bold;display:flex;align-items:center;gap:4px}
.media-caption{padding:12px 15px;background:white;font-size:0.9rem;color:#666;border-top:1px solid #f0f0f0;text-align:center}
.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.8);justify-content:center;align-items:center}
.modal-content{position:relative;background-color:#000;border-radius:8px;width:80%;max-width:900px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.5)}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:rgba(0,0,0,0.7);color:white}
.modal-title{font-size:1.1rem;font-weight:600}
.close-modal{font-size:1.5rem;cursor:pointer;color:white;background:none;border:none;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background 0.3s}
.close-modal:hover{background:rgba(255,255,255,0.2)}
.modal-body{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.modal-body iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
.faq-section{background:white;border-radius:12px;padding:30px;box-shadow:0 4px 12px rgba(0,0,0,0.05)}
.faq-title{font-size:1.6rem;color:#1a73e8;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #eaefff;display:flex;align-items:center;gap:10px}
.faq-list{list-style:none}
.faq-item{margin-bottom:15px;border:1px solid #e0e6ed;border-radius:8px;overflow:hidden;transition:all 0.3s ease}
.faq-item:hover{box-shadow:0 3px 8px rgba(0,0,0,0.08)}
.faq-question{padding:18px 20px;background:#f8f9fa;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;color:#2c3e50;transition:background 0.3s}
.faq-question:hover{background:#e3f0ff;color:#1a73e8}
.faq-question .question-text{flex:1}
.faq-question .toggle-icon{color:#1a73e8;transition:transform 0.3s ease}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s ease-out,padding 0.4s ease;padding:0 20px;background:white}
.faq-answer.expanded{max-height:300px;padding:15px 20px}
.faq-answer p{color:#555;line-height:1.7}
.faq-answer ul{margin-left:20px;color:#555;line-height:1.7}
@media (max-width:900px){.float-left,.float-right{float:none;margin:15px auto;width:100%;max-width:100%;display:flex}
.content-section p{text-align:left}
}@media (max-width:768px){.news-title{font-size:1.8rem}
.news-header{padding:20px}
.directory-header{padding:15px 20px}
.news-content,.faq-section{padding:20px}
.faq-question{padding:15px;font-size:0.95rem}
.modal-content{width:95%}
}.expanded .toggle-icon{transform:rotate(180deg)}
.active-question{background:#e3f0ff !important;color:#1a73e8 !important;border-left:4px solid #1a73e8}
.clearfix::after{content:"";display:table;clear:both}