/*
 * Responsive CSS file for AI Chinese Community
 * Version: 2.0.0
 * Description: Responsive stylesheet for mobile and tablet devices
 * Last Updated: 2026-02-07
 */

/* ===========================================================
   Mobile Small (320px - 480px)
   =========================================================== */

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

    /* ===========================================================
       Header Styles
       =========================================================== */

    .header {
        margin: 0;
        height: 60px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        background-color: #222;
    }

    .header .cont {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .header .cont .logo {
        padding: 0 0.4em;
        display: flex;
        align-items: center;
        height: 60px;
    }

    .header .cont .logo a {
        font-size: 1.2em;
        word-spacing: 0;
        display: flex;
        align-items: center;
        text-decoration: none !important;
    }

    .header .cont .logo a img {
        max-height: 45px;
        margin-right: 8px;
    }

    /* ===========================================================
       Menu Styles
       =========================================================== */

    .menu_cont {
        display: flex;
        align-items: center;
    }

    .menu_cont .profile .welcome_txt {
        display: none;
    }

    .menu_cont .menu_dropdonwn>ul {
        margin: 41px 0 0 -10px;
        text-align: right;
        right: 0;
        min-width: 150px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .menu_cont .menu_dropdonwn>a {
        padding-right: 10px;
    }

    .menu_cont .menu>ul>li {
        padding-right: 8px;
    }

    .menu_cont .menu a {
        padding-right: 2px;
        font-size: 14px;
    }

    .menu_cont .pc_ele {
        display: none;
    }

    .menu_cont .mob_ele {
        display: block !important;
    }

    .menu_cont .mob_ele_hide {
        display: none;
        width: 100%;
        position: absolute;
        background-color: #222;
        left: 0;
        right: 0;
        margin: 60px 0 0 0;
        padding: 20px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: #fff;
        font-size: 15px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 999;
        animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .menu_cont .menu_mob {
        margin: 15px 0 0 0;
        font-size: 1.1em;
        font-weight: 500;
    }

    .menu_cont .menu_mob>li {
        line-height: 200%;
        margin: 0;
        padding: 0;
    }

    .menu_cont .menu_mob>li>a {
        color: #fff;
        text-decoration: none !important;
        display: block;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        transition: all 0.2s ease;
    }

    .menu_cont .menu_mob>li>a:hover {
        color: #FF6F00;
        padding-left: 10px;
    }

    .menu_cont .menu_mob>li:last-child>a {
        border-bottom: none;
    }

    .menu_cont .redb {
        font-size: 1.2em;
        color: #fff;
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 8px;
        border-radius: 4px;
    }

    .menu_cont .redb:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .menu_cont .redn {
        color: #FF6F00;
        text-decoration: none !important;
        transition: all 0.2s ease;
    }

    .menu_cont .redn:hover {
        text-decoration: underline !important;
    }

    .menu_cont .greenn {
        color: #4CAF50;
    }

    /* ===========================================================
       Container Styles
       =========================================================== */

    .container {
        width: 100%;
        display: block;
        margin: 70px auto 15px auto;
        padding: 0 10px;
        position: relative;
        top: 0;
        box-sizing: border-box;
    }

    .container>.main {
        width: 100%;
        margin-right: 0;
    }

    .container>.main>.nav {
        width: 100%;
        top: 0;
        position: relative;
        margin-bottom: 10px;
    }

    .container>.sidebar {
        width: 100%;
        margin: 15px 0 0 0;
        display: block;
    }

    .container>.main>.nav>.parent {
        font-size: 14px;
        padding: 10px 5px;
        text-align: left;
    }

    .container>.main>.nav>.parent>a {
        margin-right: 5px;
        padding: 4px 6px;
        display: inline-block;
    }

    .container>.main>.nav>.children>a {
        margin-right: 5px;
        padding: 5px 6px;
        display: inline-block;
    }

    /* ===========================================================
       Node List Styles
       =========================================================== */

    .container>.main>.node_list>.node {
        padding: 8px 5px;
        text-align: left;
        flex-direction: column;
        align-items: flex-start;
    }

    .container>.main>.node_list>.node .l {
        padding: 3px 5px 3px 0;
        width: 100%;
        text-align: left;
    }

    .container>.main>.node_list>.node .r {
        padding: 5px 5px 5px 0;
        width: 100%;
    }

    .container>.main>.node_list>.node .r>a {
        padding: 0 5px 0 0;
        display: inline-block;
    }

    /* ===========================================================
       Content Styles
       =========================================================== */

    .container>.main .content>.item_news .twocol ul {
        margin: 0 0 0 -5px;
    }

    .container>.main .content>.item {
        padding: 10px 5px;
    }

    .container>.main .content>.item .l {
        padding-right: 8px;
    }

    .container>.main .content>.item .c h4 {
        font-size: 1em;
        padding: 0 0 5px 0;
    }

    .container>.main .content>.item_news {
        display: block;
        padding: 10px 5px 10px 10px;
        background-color: #faf8f8;
    }

    .container>.main .content>.item_news .title {
        font-size: 1.1em;
        padding: 0 0 5px 0;
        width: auto;
    }

    .container>.main .content>.item_news .twocol {
        width: 100%;
        margin: 0;
    }

    /* ===========================================================
       Pager Styles
       =========================================================== */

    .container>.main .pager {
        font-size: 13px;
        padding: 10px 10px;
    }

    .container>.main .pager a,
    .container>.main .pager span {
        padding: 5px 8px;
        margin: 2px;
    }

    /* ===========================================================
       Sidebar Styles
       =========================================================== */

    .container>.sidebar .sticky_box {
        position: relative;
        z-index: 0;
        top: 0;
    }

    .container>.sidebar {
        width: 100%;
        margin: 15px 0;
        display: block;
    }

    .container>.sidebar .box {
        width: 100%;
    }

    /* ===========================================================
       News Styles
       =========================================================== */

    .news_summary {
        font-size: 15px;
        line-height: 160%;
    }

    .news_cover {
        width: 100px;
    }

    .mobile_conver {
        display: block;
        width: 100%;
        padding: 6px 0 12px 0;
        margin: 0;
    }

    .pc_news_cover_cont {
        display: none;
    }

    /* ===========================================================
       Search Styles
       =========================================================== */

    .txtSearch {
        padding: 6px 3px;
        margin: 0 3px 0 0;
        width: 70%;
        vertical-align: middle;
    }

    .btnSearch {
        padding: 4px 7px;
        margin: 0 0 0 3px;
        width: 25%;
        vertical-align: middle;
    }

    .search_area {
        width: 100%;
    }

    .search_input {
        width: 100%;
    }

    /* ===========================================================
       Comment Styles
       =========================================================== */

    .container>.main>.comment_list .item {
        padding: 10px 5px;
    }

    .container>.main>.comment_list .item .c {
        padding-left: 8px;
    }

    .container>.main>.comment_list .item .c>.tool {
        padding: 0 0 10px 0;
    }

    .container>.main>.comment_list .item .c>.tool .icon_txt {
        display: none;
    }

    .container>.main>.comment_list .item .c>.tool .point {
        display: none;
    }

    /* ===========================================================
       Title Styles
       =========================================================== */

    .title_cont h1 {
        font-size: 18px;
    }

    /* ===========================================================
       Box Styles
       =========================================================== */

    .box ul li a {
        display: inline-block;
        word-wrap: break-word;
        word-break: break-all;
        overflow-wrap: break-word;
        hyphens: auto;
        max-width: 100%;
    }

    .box ul li ul li a {
        display: inline-block;
        word-wrap: break-word;
        word-break: break-all;
        overflow-wrap: break-word;
        hyphens: auto;
        max-width: 100%;
    }

    /* ===========================================================
       Form Styles
       =========================================================== */

    .form .cont_mid {
        width: 99%;
    }

    .form .cont_lag {
        width: 99%;
    }

    /* ===========================================================
       Content Item Styles
       =========================================================== */

    .cont_full .cont_item .logo {
        width: 24px;
        height: 24px;
    }

    .cont_full .cont_item .item {
        width: 50%;
        font-size: 13px;
    }

    .cont_full .cont_single .item {
        width: 100%;
        margin: 0 0 15px 0;
        line-height: 160%;
        text-align: center;
    }

    .cont_aidetail {
        display: block;
    }

    .cont_aidetail .cont_icon {
        width: 100%;
        margin-bottom: 10px;
    }

    .cont_txt_title {
        padding: 5px 0 15px 0;
    }

    .cont_item {
        padding: 10px 5px 0 5px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    .cont_item .item {
        width: 50%;
        margin: 0 0 15px 0;
        padding: 0 5px;
        box-sizing: border-box;
    }

    .cont_item .item:nth-child(2n) {
        padding-right: 0;
    }

    .cont_item .item:nth-child(odd) {
        padding-left: 0;
    }

    .cont_item .item3 {
        width: 100%;
        padding: 5px 5px;
        align-items: center;
        box-sizing: border-box;
    }

    .cont_item_sm {
        padding: 5px 0 0 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    .cont_item_sm_title {
        margin: 15px 0 0 10px;
        font-size: 0.9em;
    }

    .cont_item_sm {
        padding: 5px 0 0 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    .cont_item_sm_title {
        margin: 15px 0 0 10px;
        font-size: 0.9em;
    }

    .cont_item .logo {
        width: 50px;
        height: 50px;
        background-color: #eee;
    }

    .item_txt .item_title {
        width: 100%;
    }

    .cont_item .item .item_txt {
        padding-left: 10px;
    }

    .item_txt .item_desc {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        width: 100%;
        line-height: 120%;
    }

    /* ===========================================================
       Footer Styles
       =========================================================== */

    .footer {
        margin: 20px auto 0 auto;
        position: relative;
        top: 0;
        padding: 20px 10px;
        box-sizing: border-box;
    }

    .footer .content {
        width: 100%;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    .footer .content .link {
        font-size: 13px;
        line-height: 200%;
        margin-bottom: 10px;
    }

    .footer .content .link a {
        display: inline-block;
        margin: 0 2px;
    }

    .footer .content .subtxt {
        font-size: 12px;
        line-height: 160%;
    }

    .footer-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        width: 100%;
        box-sizing: border-box;
    }

    .footer-text {
        width: 100%;
        text-align: left;
    }

    .footer-info-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
    }

    .copyright-info {
        text-align: left;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
        line-height: 1.6;
        font-size: 12px;
    }

    .system-info {
        text-align: left;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
        line-height: 1.6;
        font-size: 12px;
    }

    .w3c-validation {
        margin-top: 10px;
        align-self: flex-start;
    }

    .w3c-validation img {
        height: 25px;
        width: auto;
    }

    .footer-bottom {
        margin-top: 15px;
    }

    .footer-info-container {
        font-size: 12px;
        line-height: 160%;
    }

    /* ===========================================================
       Scroll Buttons Styles
       =========================================================== */

    .scroll-buttons-container {
        display: none;
    }

    /* ===========================================================
       Course Responsive Styles
       =========================================================== */

    #dy_menu {
        position: relative;
        margin: 0 0 15px 0;
        top: auto;
        max-height: 50vh;
        overflow-y: auto;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        opacity: 1;
        width: 100%;
        overflow-x: hidden;
        left: 0;
    }

    #dy_menu.hidden {
        opacity: 0;
        width: 0;
        left: -100%;
        overflow: hidden;
    }

    .boxcomm .menu_link_lg,
    .boxcomm .menu_link_md {
        display: inline-block;
        padding: 7px 5px 7px 10px;
        font-size: 13px;
    }

    .course_area {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    .course_item {
        width: calc((100% - 10px)/2);
        max-width: calc((100% - 10px)/2);
        min-width: calc((100% - 10px)/2);
        margin: 0 5px 10px 0;
        box-sizing: border-box;
    }

    .course_item:nth-child(2n) {
        margin-right: 0;
    }

    .course_intro img {
        width: 28px;
    }

    .course_intro p {
        font-size: 13px !important;
        height: 32px;
    }

    .ai_tool_area {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    /* ===========================================================
       AI Tool Responsive Styles
       =========================================================== */

    .ai_tool_item {
        width: calc((100% - 10px)/2);
        margin: 0 5px 10px 0;
        box-sizing: border-box;
    }

    .ai_tool_item:nth-child(3n) {
        margin-right: 5px;
    }

    .ai_tool_item:nth-child(2n) {
        margin-right: 0;
    }

    /* ===========================================================
       Awesome List Responsive Styles
       =========================================================== */

    .awesome_item {
        width: calc((100% - 10px)/2);
        margin: 0 5px 10px 0;
        box-sizing: border-box;
    }

    .awesome_item:nth-child(3n) {
        margin-right: 5px;
    }

    .awesome_item:nth-child(2n) {
        margin-right: 0;
    }

    /* ===========================================================
       Sample UL Responsive Styles
       =========================================================== */

    .sample_ul {
        padding: 0;
        margin: 0;
    }

    .sample_ul_li {
        padding: 10px 5px;
        border-bottom: 1px solid #eee;
        width: 100%;
        box-sizing: border-box;
    }

    .sample_ul_li h3 {
        font-size: 15px;
        margin: 0 0 5px 0;
    }

    .sample_ul_li .sub_title {
        font-size: 12px;
        line-height: 160%;
    }

    .sample_ul_li .article_cont {
        padding: 10px 0;
        font-size: 13px;
        line-height: 160%;
    }

    /* ===========================================================
       Cont Title Responsive Styles
       =========================================================== */

    .cont_title {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 5px;
    }

    .cont_title .l {
        width: 100%;
        margin-bottom: 10px;
    }

    .cont_title .l h3 {
        font-size: 1em;
        margin-bottom: 8px;
    }

    .cont_title .l span,
    .cont_title .l a {
        font-size: 0.85em;
        display: inline-block;
        margin: 3px 3px 3px 0;
    }

    .cont_title .r {
        width: 100%;
        text-align: left;
    }

    .selMore {
        width: 100%;
    }

    /* ===========================================================
       Cont Item Responsive Styles
       =========================================================== */

    .cont_item {
        padding: 10px 5px 0 5px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    .cont_item .item {
        width: 50%;
        margin: 0 0 15px 0;
        padding: 0 5px;
        box-sizing: border-box;
    }

    .cont_item .item:nth-child(2n) {
        padding-right: 0;
    }

    .cont_item .item:nth-child(odd) {
        padding-left: 0;
    }

    .cont_item .item3 {
        width: 100%;
        padding: 5px 5px;
        align-items: center;
        box-sizing: border-box;
    }

    /* ===========================================================
       Form Responsive Styles
       =========================================================== */

    .form {
        padding: 15px;
    }

    .form .cont_mid {
        width: 100%;
        min-height: auto;
    }

    .form .cont_lag {
        width: 100%;
        min-height: auto;
    }

    .form .label {
        font-size: 13px;
    }

    /* ===========================================================
       Comment Responsive Styles
       =========================================================== */

    .comment_action {
        flex-direction: column;
        align-items: flex-start;
    }

    .comment_action .tool {
        width: 100%;
        margin-top: 10px;
    }

    .comment_action .tool .btn {
        margin-left: 0;
        margin-right: 10px;
    }

    /* ===========================================================
       Topic List Responsive Styles
       =========================================================== */

    .topic_list_item {
        padding: 15px 5px;
    }

    .topic_list_item .l {
        padding-right: 8px;
    }

    .topic_list_item .c {
        padding-left: 8px;
    }

    /* ===========================================================
       Item Responsive Styles
       =========================================================== */

    .container>.main .content>.item {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
    }

    .container>.main .content>.item .l {
        padding-right: 10px;
        margin-bottom: 8px;
    }

    .container>.main .content>.item .c {
        flex: 1;
        width: 100%;
        padding: 0;
    }

    .container>.main .content>.item .c h4 {
        font-size: 14px;
        padding: 0 0 6px;
    }

    .container>.main .content>.item .c .sub_title {
        font-size: 12px;
        line-height: 140%;
    }

    .container>.main .content>.item .r {
        margin-left: 0;
        padding-left: 0;
        width: 100%;
        text-align: left;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    .container>.main .content>.item .r .bubble {
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 4px;
    }

    /* ===========================================================
       Avatar Responsive Styles
       =========================================================== */

    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 4px;
    }

    .avatar2 {
        width: 40px;
        height: 40px;
        border-radius: 4px;
    }

    /* ===========================================================
       Node List Responsive Styles
       =========================================================== */

    .node_list_item {
        padding: 8px 5px;
    }

    /* ===========================================================
       Topic List Responsive Styles
       =========================================================== */

    .topic_list_item {
        padding: 15px 10px;
    }

    .topic_list_item .l {
        padding-right: 10px;
    }

    .topic_list_item .c {
        padding-left: 10px;
    }

    /* ===========================================================
       Item Responsive Styles
       =========================================================== */

    .container>.main .content>.item {
        padding: 14px;
        flex-direction: row;
        align-items: flex-start;
    }

    .container>.main .content>.item .l {
        padding-right: 12px;
        margin-bottom: 0;
    }

    .container>.main .content>.item .c {
        flex: 1;
        width: auto;
        padding: 0;
    }

    .container>.main .content>.item .c h4 {
        font-size: 14px;
        padding: 0 0 6px;
    }

    .container>.main .content>.item .c .sub_title {
        font-size: 13px;
        line-height: 140%;
    }

    .container>.main .content>.item .r {
        margin-left: auto;
        padding-left: 10px;
        width: 30%;
        text-align: right;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    .container>.main .content>.item .r .bubble {
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 4px;
    }

    /* ===========================================================
       Avatar Responsive Styles
       =========================================================== */

    .avatar {
        width: 45px;
        height: 45px;
        border-radius: 4px;
    }

    .avatar2 {
        width: 45px;
        height: 45px;
        border-radius: 4px;
    }

    /* ===========================================================
       Button Responsive Styles
       =========================================================== */

    .btn {
        padding: 8px 12px;
        font-size: 13px;
    }

    .btn-large {
        padding: 10px 15px;
        font-size: 14px;
    }

    /* ===========================================================
       Table Responsive Styles
       =========================================================== */

    table {
        font-size: 12px;
    }

    table th,
    table td {
        padding: 8px 5px;
    }

    /* ===========================================================
       Input Responsive Styles
       =========================================================== */

    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        font-size: 14px;
        padding: 8px 10px;
    }

    /* ===========================================================
       Avatar Responsive Styles
       =========================================================== */

    .avatar {
        width: 40px;
        height: 40px;
    }

    .avatar2 {
        width: 40px;
        height: 40px;
    }

}

/* ===========================================================
   Mobile Large (481px - 768px)
   =========================================================== */

@media screen and (min-width: 481px) and (max-width: 768px) {

    /* ===========================================================
       Header Styles
       =========================================================== */

    .header {
        margin: 0;
        height: 60px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        background-color: #222;
    }

    .header .cont {
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .header .cont .logo {
        padding: 0 0.4em;
        display: flex;
        align-items: center;
        height: 60px;
    }

    .header .cont .logo a {
        font-size: 1.3em;
        word-spacing: 0;
        display: flex;
        align-items: center;
        text-decoration: none !important;
    }

    .header .cont .logo a img {
        max-height: 50px;
        margin-right: 8px;
    }

    /* ===========================================================
       Menu Styles
       =========================================================== */

    .menu_cont {
        display: flex;
        align-items: center;
    }

    .menu_cont .menu a {
        font-size: 14px;
    }

    .menu_cont .mob_ele_hide {
        display: none;
        width: 100%;
        position: absolute;
        background-color: #222;
        left: 0;
        right: 0;
        margin: 60px 0 0 0;
        padding: 25px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: #fff;
        font-size: 15px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 999;
        animation: slideDown 0.3s ease-out;
    }

    .menu_cont .menu_mob {
        font-size: 1.15em;
        margin: 15px 0 0 0;
        font-weight: 500;
    }

    .menu_cont .menu_mob>li {
        line-height: 200%;
        margin: 0;
        padding: 0;
    }

    .menu_cont .menu_mob>li>a {
        color: #fff;
        text-decoration: none !important;
        display: block;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        transition: all 0.2s ease;
    }

    .menu_cont .menu_mob>li>a:hover {
        color: #FF6F00;
        padding-left: 10px;
    }

    .menu_cont .menu_mob>li:last-child>a {
        border-bottom: none;
    }

    .menu_cont .redb {
        font-size: 1.2em;
        color: #fff;
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 8px;
        border-radius: 4px;
    }

    .menu_cont .redb:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .menu_cont .redn {
        color: #FF6F00;
        text-decoration: none !important;
        transition: all 0.2s ease;
    }

    .menu_cont .redn:hover {
        text-decoration: underline !important;
    }

    .menu_cont .greenn {
        color: #4CAF50;
    }

    .menu_cont .pc_ele {
        display: none;
    }

    .menu_cont .mob_ele {
        display: block !important;
    }

    /* ===========================================================
       Container Styles
       =========================================================== */

    .container {
        width: 100%;
        display: block;
        margin: 70px auto 15px auto;
        padding: 0 15px;
        position: relative;
        top: 0;
        box-sizing: border-box;
    }

    .container>.main {
        width: 100%;
        margin-right: 0;
    }

    .container>.sidebar {
        width: 100%;
        margin: 15px 0 0 0;
        display: block;
    }

    .container>.main>.nav>.parent {
        font-size: 14px;
        padding: 8px 8px;
    }

    /* ===========================================================
       Content Styles
       =========================================================== */

    .container>.main .content>.item_news .title {
        font-size: 1.15em;
    }

    /* ===========================================================
       Course Responsive Styles
       =========================================================== */

    #dy_menu {
        max-height: 55vh;
    }

    .course_area {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    .course_item {
        width: calc((100% - 15px)/2);
        margin: 0 8px 10px 0;
        box-sizing: border-box;
    }

    .course_item:nth-child(2n) {
        margin-right: 0;
    }

    .ai_tool_area {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    /* ===========================================================
       AI Tool Responsive Styles
       =========================================================== */

    .ai_tool_item {
        width: calc((100% - 15px)/2);
        margin: 0 8px 10px 0;
        box-sizing: border-box;
    }

    .ai_tool_item:nth-child(2n) {
        margin-right: 0;
    }

    /* ===========================================================
       Awesome List Responsive Styles
       =========================================================== */

    .awesome_item {
        width: calc((100% - 15px)/2);
        margin: 0 8px 10px 0;
        box-sizing: border-box;
    }

    .awesome_item:nth-child(2n) {
        margin-right: 0;
    }

    /* ===========================================================
       Sample UL Responsive Styles
       =========================================================== */

    .sample_ul_li {
        padding: 10px 8px;
        width: 100%;
        box-sizing: border-box;
    }

    .sample_ul_li h3 {
        font-size: 15px;
    }

    .sample_ul_li .article_cont {
        padding: 10px 0;
        font-size: 14px;
        line-height: 160%;
    }

    /* ===========================================================
       Cont Title Responsive Styles
       =========================================================== */

    .cont_title {
        padding: 10px 8px;
    }

    .cont_title .l h3 {
        font-size: 1.05em;
    }

    .cont_title .l span,
    .cont_title .l a {
        font-size: 0.9em;
    }

    /* ===========================================================
       Cont Item Responsive Styles
       =========================================================== */

    .cont_item {
        padding: 10px 8px 0 8px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    .cont_item .item {
        width: 50%;
        margin: 0 0 15px 0;
        padding: 0 8px;
        box-sizing: border-box;
    }

    .cont_item .item:nth-child(2n) {
        padding-right: 0;
    }

    .cont_item .item:nth-child(odd) {
        padding-left: 0;
    }

    .cont_item .item3 {
        width: 100%;
        padding: 5px 8px;
        align-items: center;
        box-sizing: border-box;
    }

    .cont_item_sm {
        padding: 5px 0 0 12px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    .cont_item_sm_title {
        margin: 15px 0 0 12px;
        font-size: 0.92em;
    }

    /* ===========================================================
       Form Responsive Styles
       =========================================================== */

    .form {
        padding: 18px;
    }

    /* ===========================================================
       Button Responsive Styles
       =========================================================== */

    .btn {
        padding: 8px 14px;
        font-size: 14px;
    }

    /* ===========================================================
       Avatar Responsive Styles
       =========================================================== */

    .avatar {
        width: 45px;
        height: 45px;
    }

    .avatar2 {
        width: 45px;
        height: 45px;
    }

    /* ===========================================================
       Topic List Responsive Styles
       =========================================================== */

    .topic_list_item {
        padding: 15px 15px;
    }

    .topic_list_item .l {
        padding-right: 12px;
    }

    .topic_list_item .c {
        padding-left: 12px;
    }

    /* ===========================================================
       Item Responsive Styles
       =========================================================== */

    .container>.main .content>.item {
        padding: 15px;
        flex-direction: row;
        align-items: flex-start;
    }

    .container>.main .content>.item .l {
        padding-right: 15px;
    }

    .container>.main .content>.item .c {
        flex: 1;
    }

    .container>.main .content>.item .c h4 {
        font-size: 15px;
        padding: 0 0 8px;
    }

    .container>.main .content>.item .c .sub_title {
        font-size: 14px;
    }

    .container>.main .content>.item .r {
        width: 25%;
        padding-left: 15px;
    }

    .container>.main .content>.item .r .bubble {
        padding: 5px 10px;
        font-size: 12px;
    }

    /* ===========================================================
       Footer Styles
       =========================================================== */

    .footer {
        margin: 20px auto 0 auto;
        position: relative;
        top: 0;
        padding: 20px 15px;
        box-sizing: border-box;
    }

    .footer .content {
        width: 100%;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    .footer .content .link {
        font-size: 13px;
        line-height: 200%;
        margin-bottom: 10px;
    }

    .footer .content .link a {
        display: inline-block;
        margin: 0 2px;
    }

    .footer .content .subtxt {
        font-size: 12px;
        line-height: 160%;
    }

    .footer-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        width: 100%;
        box-sizing: border-box;
    }

    .footer-text {
        width: 100%;
        text-align: left;
    }

    .footer-info-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
    }

    .copyright-info {
        text-align: left;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
        line-height: 1.6;
        font-size: 12px;
    }

    .system-info {
        text-align: left;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
        line-height: 1.6;
        font-size: 12px;
    }

    .w3c-validation {
        margin-top: 10px;
        align-self: flex-start;
    }

    .w3c-validation img {
        height: 25px;
        width: auto;
    }

    .footer-bottom {
        margin-top: 15px;
    }

    .footer-info-container {
        font-size: 12px;
        line-height: 160%;
    }

    /* ===========================================================
       Scroll Buttons Styles
       =========================================================== */

    .scroll-buttons-container {
        display: none;
    }

}

/* ===========================================================
   Tablet (769px - 1024px)
   =========================================================== */

@media screen and (min-width: 769px) and (max-width: 1024px) {

    /* ===========================================================
       Header Styles
       =========================================================== */

    .header {
        margin: 0;
        height: 60px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        background-color: #222;
    }

    .header .cont {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .header .cont .logo {
        padding: 0 0.4em;
        display: flex;
        align-items: center;
        height: 60px;
    }

    .header .cont .logo a {
        font-size: 1.4em;
        word-spacing: 0;
        display: flex;
        align-items: center;
        text-decoration: none !important;
    }

    .header .cont .logo a img {
        max-height: 55px;
        margin-right: 8px;
    }

    /* ===========================================================
       Menu Styles
       =========================================================== */

    .menu_cont {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: flex-end;
    }

    .menu_cont .menu {
        display: flex;
        align-items: center;
        flex: 1;
    }

    .menu_cont .menu a {
        font-size: 14px;
        color: #ccc;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .menu_cont .menu a:hover,
    .menu_cont .menu a.selected {
        color: #FF6F00;
    }

    .menu_cont .menu>ul>li {
        padding-right: 10px;
        list-style: none;
        float: left;
    }

    .menu_cont .profile {
        display: flex;
        align-items: center;
        margin-left: 10px;
    }

    .menu_cont .profile .welcome_txt {
        display: block;
        color: #ccc;
        margin-right: 5px;
    }

    .menu_cont .redn {
        color: #FF6F00;
        text-decoration: none !important;
        transition: all 0.2s ease;
    }

    .menu_cont .redn:hover {
        text-decoration: underline !important;
    }

    .menu_cont .pc_ele {
        display: flex;
        align-items: center;
    }

    .menu_cont .mob_ele {
        display: none !important;
    }

    /* ===========================================================
       Topic List Responsive Styles
       =========================================================== */

    .topic_list_item {
        padding: 15px 20px;
    }

    .topic_list_item .l {
        padding-right: 15px;
    }

    .topic_list_item .c {
        padding-left: 15px;
    }

    /* ===========================================================
       Item Responsive Styles
       =========================================================== */

    .container>.main .content>.item {
        padding: 15px;
        flex-direction: row;
        align-items: flex-start;
    }

    .container>.main .content>.item .l {
        padding-right: 15px;
    }

    .container>.main .content>.item .c {
        flex: 1;
    }

    .container>.main .content>.item .c h4 {
        font-size: 15px;
        padding: 0 0 8px;
    }

    .container>.main .content>.item .c .sub_title {
        font-size: 14px;
    }

    .container>.main .content>.item .r {
        width: 20%;
        padding-left: 15px;
    }

    .container>.main .content>.item .r .bubble {
        padding: 6px;
        font-size: 12px;
    }

    /* ===========================================================
       Container Styles
       =========================================================== */

    .container {
        width: 100%;
        padding: 0 20px;
        margin: 70px auto 15px auto;
        position: relative;
        top: 0;
        box-sizing: border-box;
    }

    .container>.main {
        width: 68%;
        margin-right: 2%;
    }

    .container>.sidebar {
        width: 30%;
        margin-left: 0;
    }

    .container>.main>.nav>.parent {
        font-size: 14px;
        padding: 8px 10px;
    }

    /* ===========================================================
       Content Styles
       =========================================================== */

    .container>.main .content>.item_news .title {
        font-size: 1.2em;
    }

    /* ===========================================================
       Course Responsive Styles
       =========================================================== */

    #dy_menu {
        position: fixed;
        top: 116px;
        left: calc((100vw - 100%) / 2 + 20px);
        width: 280px;
        max-height: calc(100vh - 116px);
        opacity: 1;
    }

    #dy_menu.hidden {
        opacity: 0;
        width: 0;
        left: calc((100vw - 100%) / 2 - 260px);
    }

    .course_area {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    .course_item {
        width: calc((100% - 10px)/2);
        margin: 0 5px 10px 0;
        box-sizing: border-box;
    }

    .course_item:nth-child(2n) {
        margin-right: 0;
    }

    /* ===========================================================
       AI Tool Responsive Styles
       =========================================================== */

    .ai_tool_item {
        width: calc((100% - 10px)/2);
        margin: 0 5px 10px 0;
        box-sizing: border-box;
    }

    .ai_tool_item:nth-child(3n) {
        margin-right: 5px;
    }

    .ai_tool_item:nth-child(2n) {
        margin-right: 0;
    }

    /* ===========================================================
       Awesome List Responsive Styles
       =========================================================== */

    .awesome_item {
        width: calc((100% - 10px)/2);
        margin: 0 5px 10px 0;
        box-sizing: border-box;
    }

    .awesome_item:nth-child(3n) {
        margin-right: 5px;
    }

    .awesome_item:nth-child(2n) {
        margin-right: 0;
    }

    /* ===========================================================
       Sample UL Responsive Styles
       =========================================================== */

    .sample_ul_li {
        padding: 10px 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .sample_ul_li h3 {
        font-size: 15px;
    }

    .sample_ul_li .article_cont {
        padding: 10px 0;
        font-size: 14px;
        line-height: 160%;
    }

    /* ===========================================================
       Cont Title Responsive Styles
       =========================================================== */

    .cont_title {
        padding: 10px 10px;
    }

    .cont_title .l h3 {
        font-size: 1.08em;
    }

    /* ===========================================================
       Cont Item Responsive Styles
       =========================================================== */

    .cont_item .item {
        width: 33.33%;
        margin: 0 0 20px 0;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .cont_item .item:nth-child(3n) {
        padding-right: 0;
    }

    .cont_item .item:nth-child(3n+1) {
        padding-left: 0;
    }

    .cont_item {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    .cont_item .item3 {
        width: 100%;
        padding: 5px 10px;
        align-items: center;
        box-sizing: border-box;
    }

    .cont_item_sm {
        padding: 5px 0 0 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    .cont_item_sm_title {
        margin: 15px 0 0 20px;
        font-size: 1em;
    }

    /* ===========================================================
       Form Responsive Styles
       =========================================================== */

    .form {
        padding: 20px;
    }

    /* ===========================================================
       Button Responsive Styles
       =========================================================== */

    .btn {
        padding: 8px 15px;
        font-size: 14px;
    }

    /* ===========================================================
       Avatar Responsive Styles
       =========================================================== */

    .avatar {
        width: 48px;
        height: 48px;
    }

    .avatar2 {
        width: 48px;
        height: 48px;
    }

    /* ===========================================================
       Footer Styles
       =========================================================== */

    .footer {
        margin: 20px auto 0 auto;
        position: relative;
        top: 0;
        padding: 20px 20px;
        box-sizing: border-box;
    }

    .footer .content {
        width: 100%;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    .footer .content .link {
        font-size: 13px;
        line-height: 200%;
        margin-bottom: 10px;
    }

    .footer .content .link a {
        display: inline-block;
        margin: 0 2px;
    }

    .footer .content .subtxt {
        font-size: 12px;
        line-height: 160%;
    }

    .footer-content-wrapper {
        flex-direction: row;
        align-items: flex-start;
        gap: 15px;
        width: 100%;
        box-sizing: border-box;
    }

    .footer-text {
        flex: 1;
        min-width: 0;
        text-align: left;
    }

    .footer-info-line {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px;
        width: 100%;
        box-sizing: border-box;
    }

    .copyright-info {
        text-align: left;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
        line-height: 1.6;
        font-size: 13px;
    }

    .system-info {
        text-align: left;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
        line-height: 1.6;
        font-size: 13px;
    }

    .w3c-validation {
        margin-top: 0;
        flex-shrink: 0;
    }

    .w3c-validation img {
        height: 31px;
        width: auto;
    }

    .footer-bottom {
        margin-top: 15px;
    }

    .footer-info-container {
        font-size: 13px;
        line-height: 160%;
    }

    /* ===========================================================
       Scroll Buttons Styles
       =========================================================== */

    .scroll-buttons-container {
        position: fixed;
        top: auto;
        bottom: 80px;
        right: 15px;
        transform: none;
        z-index: 99999;
    }

    .scroll-button {
        width: 45px !important;
        height: 45px !important;
    }

    .scroll-icon {
        font-size: 18px !important;
    }

}

/* ===========================================================
   Desktop Small (1025px - 1249px)
   =========================================================== */

@media screen and (min-width: 1025px) and (max-width: 1249px) {

    /* ===========================================================
       Header Styles
       =========================================================== */

    .header {
        margin: 0;
        height: 60px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        background-color: #222;
    }

    .header .cont {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .header .cont .logo {
        padding: 0 0.4em;
        display: flex;
        align-items: center;
        height: 60px;
    }

    .header .cont .logo a {
        font-size: 1.5em;
        word-spacing: 0;
        display: flex;
        align-items: center;
        text-decoration: none !important;
    }

    .header .cont .logo a img {
        max-height: 60px;
        margin-right: 10px;
    }

    /* ===========================================================
       Menu Styles
       =========================================================== */

    .menu_cont {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: flex-end;
    }

    .menu_cont .menu {
        display: flex;
        align-items: center;
        flex: 1;
    }

    .menu_cont .menu a {
        font-size: 15px;
        color: #ccc;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .menu_cont .menu a:hover,
    .menu_cont .menu a.selected {
        color: #FF6F00;
    }

    .menu_cont .menu>ul>li {
        padding-right: 15px;
        list-style: none;
        float: left;
    }

    .menu_cont .profile {
        display: flex;
        align-items: center;
        margin-left: 15px;
    }

    .menu_cont .profile .welcome_txt {
        display: block;
        color: #ccc;
        margin-right: 5px;
    }

    .menu_cont .redn {
        color: #FF6F00;
        text-decoration: none !important;
        transition: all 0.2s ease;
    }

    .menu_cont .redn:hover {
        text-decoration: underline !important;
    }

    .menu_cont .pc_ele {
        display: flex;
        align-items: center;
    }

    .menu_cont .mob_ele {
        display: none !important;
    }

    /* ===========================================================
       Container Styles
       =========================================================== */

    .container {
        width: 100%;
        padding: 0 20px;
        margin: 70px auto 15px auto;
        position: relative;
        top: 0;
        box-sizing: border-box;
    }

    .container>.main {
        width: 68%;
        margin-right: 2%;
    }

    .container>.sidebar {
        width: 30%;
        margin-left: 0;
    }

    #dy_menu {
        position: fixed;
        top: 116px;
        left: calc((100vw - 100%) / 2 + 20px);
        width: 280px;
        max-height: calc(100vh - 116px);
        opacity: 1;
    }

    #dy_menu.hidden {
        opacity: 0;
        width: 0;
        left: calc((100vw - 100%) / 2 - 260px);
    }

    .course_area {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    .course_item {
        width: calc((100% - 10px)/2);
        margin: 0 5px 10px 0;
        box-sizing: border-box;
    }

    .course_item:nth-child(2n) {
        margin-right: 0;
    }

    .ai_tool_area {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    .ai_tool_item {
        width: calc((100% - 10px)/2);
        margin: 0 5px 10px 0;
        box-sizing: border-box;
    }

    .ai_tool_item:nth-child(3n) {
        margin-right: 5px;
    }

    .ai_tool_item:nth-child(2n) {
        margin-right: 0;
    }

    /* ===========================================================
       Awesome List Responsive Styles
       =========================================================== */

    .awesome_item {
        width: calc((100% - 10px)/2);
        margin: 0 5px 10px 0;
        box-sizing: border-box;
    }

    .awesome_item:nth-child(3n) {
        margin-right: 5px;
    }

    .awesome_item:nth-child(2n) {
        margin-right: 0;
    }

    /* ===========================================================
       Cont Item Responsive Styles
       =========================================================== */

    .cont_item .item {
        width: 33.33%;
        margin: 0 0 20px 0;
        padding: 0 10px;
    }

    .cont_item .item:nth-child(3n) {
        padding-right: 0;
    }

    .cont_item .item:nth-child(3n+1) {
        padding-left: 0;
    }

    /* ===========================================================
       Footer Styles
       =========================================================== */

    .footer {
        margin: 20px auto 0 auto;
        position: relative;
        top: 0;
        padding: 20px 20px;
        box-sizing: border-box;
    }

    .footer .content {
        width: 100%;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    .footer .content .link {
        font-size: 13px;
        line-height: 200%;
        margin-bottom: 10px;
    }

    .footer .content .link a {
        display: inline-block;
        margin: 0 2px;
    }

    .footer .content .subtxt {
        font-size: 13px;
        line-height: 160%;
    }

    .footer-content-wrapper {
        flex-direction: row;
        align-items: flex-start;
        gap: 15px;
        width: 100%;
        box-sizing: border-box;
    }

    .footer-text {
        flex: 1;
        min-width: 0;
        text-align: left;
    }

    .footer-info-line {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px;
        width: 100%;
        box-sizing: border-box;
    }

    .copyright-info {
        text-align: left;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
        line-height: 1.6;
        font-size: 13px;
    }

    .system-info {
        text-align: left;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
        line-height: 1.6;
        font-size: 13px;
    }

    .w3c-validation {
        margin-top: 0;
        flex-shrink: 0;
    }

    .w3c-validation img {
        height: 31px;
        width: auto;
    }

    .footer-bottom {
        margin-top: 15px;
    }

    .footer-info-container {
        font-size: 13px;
        line-height: 160%;
    }

    /* ===========================================================
       Scroll Buttons Styles
       =========================================================== */

    .scroll-buttons-container {
        position: fixed;
        top: auto;
        bottom: 80px;
        right: 15px;
        transform: none;
        z-index: 99999;
    }

    .scroll-button {
        width: 48px !important;
        height: 48px !important;
    }

    .scroll-icon {
        font-size: 19px !important;
    }

}