body{

    font-family:Arial, Helvetica, sans-serif;

}





/* Header */



.site-header{

    background:#0875cf;

    color:#fff;

    padding:20px 30px;

}



header.site-header img {
    width: 100%;
    max-width: 185px;
}

.header-container{

    max-width:1300px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}





/* Logo Section */



.brand{

    display:flex;

    align-items:center;

    gap:15px;

}





.logo-circle{

    width:75px;

    height:75px;

    background:#fff;

    color:#0875cf;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:55px;

    font-weight:bold;

}





.brand-text h1{

    font-size:42px;

    line-height:45px;

}





.brand-text p{

    font-size:18px;

    font-weight:bold;

}







/* Right Section */



.header-right{

    flex:1;

}





.search-box{

    display:flex;

    justify-content:flex-end;

    margin-bottom:18px;

}





.search-box input{

    width:360px;

    height:40px;

    border:none;

    outline:none;

}





.search-box button{

    height:40px;

    padding:0 20px;

    background:#00529d;

    color:#fff;

    border:none;

    font-size:17px;

}







/* Navigation */



.navigation{

    display:flex;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:35px;

}





.navigation a{

    color:white;

    text-decoration:none;

    font-size:22px;

}







/* Mobile Responsive */



@media(max-width:768px){



.site-header{

    padding:15px;

}





.header-container{

    flex-direction:column;

    align-items:stretch;

}





.brand{

    justify-content:center;

}





.logo-circle{

    width:60px;

    height:60px;

    font-size:40px;

}





.brand-text h1{

    font-size:30px;

    line-height:32px;

}





.brand-text p{

    font-size:14px;

}





.search-box{

    justify-content:center;

}





.search-box input{

    width:70%;

}





.navigation{

    justify-content:center;

    gap:12px 18px;

}





.navigation a{

    font-size:16px;

}



}







.computer-layout{

    max-width:1100px;

    margin:auto;

    padding:25px;

    display:grid;

    grid-template-columns:1fr 280px;

    gap:35px;

}





/* Article Section */



.article-box{

    margin-bottom:45px;

}





.article-box h2 {

    color: #2572cb;

    font-size: 32px;

    line-height: 38px;

    font-weight: bold;

    margin-bottom: 25px;

    /* text-decoration: underline; */

}



.article-flex{

    display:flex;

    gap:30px;

    align-items:flex-start;

}





.article-flex img{

    width:240px;

    height:155px;

    object-fit:cover;

}





.article-flex p{

    font-size:25px;

    line-height:34px;

    color:#333;

    margin:0;

}





.article-flex a{

    display:inline-block;

    margin-top:18px;

    color:#0066cc;

    font-size:24px;

    text-decoration:none;

}





.article-flex a:hover{

    text-decoration:underline;

}







/* History */



.history-box h2{

    font-size:28px;

}





.history-box li{

    font-size:16px;

    line-height:26px;

}







/* Sidebar */



.sidebar-area{

    padding-top:0;

}





.side-box{

    margin-bottom:40px;

}





.side-box h3{

    font-size:32px;

    line-height:38px;

    color:#000;

    margin-bottom:25px;

}





.side-box a{

    display:block;

    color:#0066cc;

    font-size:22px;

    line-height:32px;

    text-decoration:none;

}





.side-box a:hover{

    text-decoration:underline;

}





.quiz-box{

    font-size:20px;

    line-height:30px;

}





.quiz-box p{

    font-size:22px;

    font-weight:bold;

}







/* Mobile Responsive */



@media(max-width:768px){



.computer-layout{

    grid-template-columns:1fr;

    padding:15px;

}





.article-box h2{

    font-size:24px;

    line-height:32px;

}





.article-flex{

    gap:15px;

}





.article-flex img{

    width:120px;

    height:90px;

}





.article-flex p{

    font-size:18px;

    line-height:26px;

}





.article-flex a{

    font-size:18px;

}





.side-box h3{

    font-size:26px;

}





.side-box a{

    font-size:18px;

    line-height:28px;

}



}





html{

    scroll-behavior:smooth;

}





.site-footer{



    background:#f4f8fc;

    padding:40px 30px 25px;

    position:relative;

    margin-top:50px;



}







/* Search */



.footer-search{



    display:flex;

    justify-content:center;

    margin-bottom:45px;



}





.footer-search input{



    width:430px;

    height:38px;

    border:1px solid #2874c6;

    outline:none;



}





.footer-search button{



    background:#2874c6;

    color:white;

    border:none;

    padding:0 18px;

    font-size:18px;

    cursor:pointer;

    height:38px;



}









/* Columns */





.footer-container{



    max-width:1000px;

    margin:auto;

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;



}







.footer-column h3{



    font-size:24px;

    font-weight:500;

    margin-bottom:25px;

    color:#111;



}







.footer-column a{



    display:block;

    color:#1769c2;

    text-decoration:none;

    font-size:17px;

    margin-bottom:18px;



}







.footer-column a:hover{



    text-decoration:underline;



}









/* Social */





.social a{



    font-size:18px;



}









/* Bottom */





.footer-bottom{



    text-align:center;

    margin-top:70px;

    color:#333;



}







.footer-logo{



    width:45px;

    height:45px;

    background:#ddd;

    color:white;

    border-radius:50%;

    margin:0 auto 20px;



    display:flex;

    align-items:center;

    justify-content:center;



    font-size:32px;

    font-weight:bold;



}







.footer-bottom p{



    margin:5px 0;

    font-size:16px;



}







.footer-bottom a{



    color:#333;

    text-decoration:none;

    font-size:14px;



}









/* Back To Top */





.back-top{



    position:absolute;

    right:0;

    bottom:100px;



    background:#2874c6;

    color:white;



    padding:14px 20px;



    font-size:16px;

    cursor:pointer;



    text-decoration:none;



}









.back-top:hover{



    background:#155ca5;



}









/* Mobile */





@media(max-width:768px){





.site-footer{



    padding:30px 20px;



}





.footer-container{



    grid-template-columns:1fr;

    gap:25px;



}







.footer-search input{



    width:70%;



}







.back-top{



    display:none;



}





}



/*--------------------------------tip------------------------------*/

.tips-page{



    max-width:1250px;

    margin:auto;

    padding:30px;



}





.tips-page h1{



    font-size:30px;

    color:#111;

    border-bottom:1px solid #777;

    padding-bottom:10px;

    margin-bottom:18px;



}





.intro{



    font-size:16px;

    line-height:25px;

    color:#444;

    max-width:750px;

    margin-bottom:35px;



}









.tips-grid{



    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;



}







.tip-box{



    margin-bottom:35px;



}







.tip-box h2{



    font-size:24px;

    color:#111;

    margin-bottom:15px;



}







.tip-box a{



    display:block;

    font-size:16px;

    line-height:28px;

    color:#1769c2;

    text-decoration:none;



}







.tip-box a:hover{



    text-decoration:underline;



}









.favorite ol{



    padding-left:25px;



}





.favorite li{



    font-size:16px;

    line-height:30px;

    color:#1769c2;

    margin-bottom:4px;



}









.feedback{



    margin-top:40px;

    font-size:16px;



}







.feedback button{



    background:#2874c6;

    color:white;

    border:none;

    padding:7px 14px;

    margin-left:8px;

    cursor:pointer;



}









@media(max-width:768px){



.tips-grid{



    grid-template-columns:1fr;



}





.tips-page{



    padding:20px;



}





.tips-page h1{



    font-size:24px;



}





.tip-box h2{



    font-size:20px;



}





.tip-box a,

.favorite li{



    font-size:15px;



}



}

.dictionary-page{



    max-width:1200px;

    margin:auto;

    padding:35px;



}





/* Main Heading */



.dictionary-page h1{



    font-size:34px;

    line-height:42px;

    border-bottom:1px solid #777;

    padding-bottom:12px;

    margin-bottom:20px;

    color:#111;



}







.dictionary-intro{



    font-size:17px;

    line-height:28px;

    color:#444;

    max-width:850px;



}







/* Alphabet */



.alphabet{



    margin:25px 0;

    display:flex;

    flex-wrap:wrap;



}





.alphabet span{



    border:1px solid #bbb;

    padding:6px 10px;

    font-size:16px;

    color:#1769c2;



}









/* Main Grid */



.dictionary-grid{



    display:grid;

    grid-template-columns:1fr 320px;

    gap:60px;



}









/* Section Headings */



.word-section h2,

.side-box h2,

.category-box h2{



    font-size:26px;

    line-height:34px;

    color:#111;

    margin-bottom:20px;



}











/* Today's Word */



.word-content{



    display:flex;

    gap:25px;



}





.word-content img{



    width:120px;

    height:90px;

    object-fit:cover;



}







.word-content p{



    font-size:18px;

    line-height:30px;

    color:#444;



}







.word-content a{



    display:inline-block;

    margin-top:12px;

    color:#1769c2;

    font-size:18px;

    text-decoration:none;



}









/* Video */



.video-box{



    width:220px;

    margin:40px 0;



}





.video-box video{



    width:100%;

    height:300px;

    object-fit:cover;

    border:1px solid #ddd;



}











/* Sidebar */





.side-box{



    margin-bottom:45px;



}





.side-box a{



    display:block;

    color:#1769c2;

    font-size:18px;

    line-height:32px;

    text-decoration:none;



}







.side-box ol{



    padding-left:25px;



}







.side-box li{



    color:#1769c2;

    font-size:18px;

    line-height:32px;



}









/* Category */





.category-box a{



    color:#1769c2;

    font-size:18px;



}







.category-box ul{



    margin-top:15px;

    padding-left:25px;



}







.category-box li{



    color:#1769c2;

    font-size:17px;

    line-height:32px;



}









/* Hover */



.dictionary-page a:hover{



    text-decoration:underline;



}









/* Responsive */



@media(max-width:768px){





.dictionary-page{



    padding:20px;



}





.dictionary-page h1{



    font-size:26px;



}







.dictionary-grid{



    grid-template-columns:1fr;

    gap:30px;



}







.word-section h2,

.side-box h2,

.category-box h2{



    font-size:22px;



}







.word-content{



    flex-direction:column;



}







.word-content p{



    font-size:16px;

    line-height:26px;



}







.video-box{



    width:180px;



}







.side-box a,

.side-box li{



    font-size:16px;

    line-height:28px;



}



}



.computer-history{



    max-width:1200px;

    margin:auto;

    padding:30px;



    display:grid;

    grid-template-columns:1fr 350px;

    gap:50px;



}







.history-content h1{



    font-size:34px;

    color:#111;

    border-bottom:1px solid #777;

    padding-bottom:10px;

    margin-bottom:25px;



}







.history-intro p{



    font-size:17px;

    line-height:28px;

    color:#444;



}









/* Right Image */



.history-image img{



    width:100%;

    height:auto;

    object-fit:cover;

    border-radius:4px;



}









/* Note Box */





.notice-box{



    background:#fff9b8;

    padding:15px;

    margin:25px 0;



}







.notice-box b{



    background:#f4d900;

    padding:5px 12px;

    font-size:15px;



}







.notice-box p{



    margin-top:15px;



}









/* Page Content */





.page-content{



    border:1px solid #777;

    padding:15px;

    width:280px;

    margin:25px 0;



}







.page-content h3{



    font-size:20px;

    margin-bottom:10px;



}







.page-content li{



    color:#1769c2;

    font-size:16px;

    line-height:28px;



}









/* History List */





.history-content h2{



    font-size:26px;

    margin-top:30px;



}







.history-list li{



    font-size:16px;

    line-height:26px;



}







/* Mobile */





@media(max-width:768px){





.computer-history{



    grid-template-columns:1fr;

    padding:20px;



}







.history-image{



    order:-1;



}







.history-content h1{



    font-size:26px;



}







.history-intro p{



    font-size:15px;

    line-height:24px;



}







.history-image img{



    width:100%;



}



}



.contact-page{



    max-width:1200px;

    margin:auto;

    padding:30px;



}







.contact-page h1{



    font-size:36px;

    color:#111;

    border-bottom:1px solid #777;

    padding-bottom:12px;

    margin-bottom:35px;



}









.contact-layout{



    display:grid;

    grid-template-columns:1fr 300px;

    gap:50px;

    align-items:start;



}









.contact-item{



    margin-bottom:35px;



}







.contact-item h2{



    font-size:28px;

    font-weight:400;

    color:#1769c2;

    margin-bottom:8px;



}







.contact-item p{



    font-size:18px;

    color:#444;

    line-height:28px;



}











.contact-image{



    text-align:center;



}







.contact-image img{



    width:260px;

    max-width:100%;

    margin-top:20px;



}











/* Hover */



.contact-item h2:hover{



    text-decoration:underline;

    cursor:pointer;



}









/* Responsive */



@media(max-width:768px){





.contact-page{



    padding:20px;



}







.contact-page h1{



    font-size:28px;



}







.contact-layout{



    grid-template-columns:1fr;



}







.contact-image{



    order:-1;



}







.contact-image img{



    width:180px;



}







.contact-item h2{



    font-size:22px;



}







.contact-item p{



    font-size:16px;

    line-height:24px;



}





}