/* =====================================================
	  哆啦A夢中文網
	  Colorful Doraemon Edition
	===================================================== */
section{display:block}
	:root {
	   --dora-blue: #08a8e8;
	   --dora-blue-dark: #087cc1;
	   --dora-blue-light: #e8f8ff;

	   --dora-red: #ef4b55;
	   --dora-red-light: #fff0f1;

	   --dora-yellow: #ffd84d;
	   --dora-yellow-light: #fff9dc;

	   --dora-green: #42c99a;
	   --dora-green-light: #eafbf5;

	   --dora-purple: #9b75d6;
	   --dora-purple-light: #f5efff;

	   --dora-pink: #f28bb7;
	   --dora-pink-light: #fff0f7;

	   --dora-orange: #ff9f43;
	   --dora-orange-light: #fff4e8;

	   --text-dark: #25445a;
	   --text-medium: #557181;
	   --text-light: #8da1ad;

	   --border: #e5edf2;

	   --shadow:
	       0 10px 30px rgba(32, 92, 125, .08);

	   --shadow-hover:
	       0 16px 36px rgba(32, 92, 125, .14);
	}


	/* =====================================================
	  基本設定
	===================================================== */

	html {
	   scroll-behavior: smooth;
	}

	body {
	   margin: 0;
	   padding: 0;

	   background:
	       radial-gradient(
	           circle at 10% 10%,
	           rgba(8,168,232,.07),
	           transparent 25%
	       ),
	       radial-gradient(
	           circle at 90% 30%,
	           rgba(255,216,77,.09),
	           transparent 22%
	       ),
	       #f7fbfd;

	   color: var(--text-dark);

	   font-family:
	       "Noto Sans TC",
	       "Microsoft JhengHei",
	       "微軟正黑體",
	       Arial,
	       sans-serif;
	}


	/* =====================================================
	  防止舊 CSS 影響
	===================================================== */

	#g {
	   width: 100% !important;
	   min-width: 0 !important;
	   box-sizing: border-box;
	}

	#g *,
	#g *::before,
	#g *::after {
	   box-sizing: border-box;
	}


	/* =====================================================
	  MAIN
	===================================================== */

	.main {
	   display: block !important;

	   width: 100% !important;
	   max-width: 1180px !important;

	   margin: 110px auto 0 !important;

	   padding: 0 20px 70px !important;

	   min-height: 300px;

	   visibility: visible !important;
	   opacity: 1 !important;

	   box-sizing: border-box;
border: 0 !important;
        background: none !important;
        box-shadow: none !important;
	}


	/* =====================================================
	  HERO
	===================================================== */

	.cd-hero {
	   position: relative;

	   display: flex !important;
	   align-items: center;

	   width: 100%;
	   min-height: 350px;

	   margin: 0 0 38px;

	   overflow: hidden;

	   border-radius: 32px;

	   background:
	       linear-gradient(
	           125deg,
	           #08b5ec 0%,
	           #079ddd 38%,
	           #087bc5 72%,
	           #176db7 100%
	       );

	   box-shadow:
	       0 20px 45px rgba(8,126,184,.18);

	   visibility: visible !important;
	   opacity: 1 !important;
	}


	/* 漫畫式圓形裝飾 */

	.cd-hero::before {
	   content: "";

	   position: absolute;

	   width: 500px;
	   height: 500px;

	   right: -170px;
	   top: -230px;

	   border-radius: 50%;

	   background:
	       rgba(255,255,255,.13);
	}


	.cd-hero::after {
	   content: "";

	   position: absolute;

	   width: 270px;
	   height: 270px;

	   right: 180px;
	   bottom: -220px;

	   border-radius: 50%;

	   background:
	       rgba(255,216,77,.22);
	}


	/* =====================================================
	  HERO CONTENT
	===================================================== */

	.cd-hero-content {
	   position: relative;

	   z-index: 2;

	   width: 100%;

	   padding: 60px;
	}


	.cd-hero-label {
	   display: inline-flex;

	   align-items: center;

	   margin-bottom: 20px;

	   padding: 8px 17px;

	   border: 2px solid rgba(255,255,255,.35);

	   border-radius: 50px;

	   background:
	       rgba(255,255,255,.16);

	   color: #fff;

	   font-size: 13px;

	   font-weight: 800;

	   letter-spacing: 1.5px;
	}


	.cd-hero h1 {
	   margin: 0 0 18px;

	   color: #fff !important;

	   background: none !important;

	   border: 0 !important;

	   font-size: 42px;

	   line-height: 1.3;

	   font-weight: 900;

	   letter-spacing: 1px;

	   text-shadow:
	       0 3px 0 rgba(0,70,120,.15);
	}


	.cd-hero p {
	   max-width: 720px;

	   margin: 0 0 30px;

	   color: rgba(255,255,255,.95);

	   font-size: 17px;

	   line-height: 1.9;
	}


	/* =====================================================
	  HERO BUTTON
	===================================================== */

	.cd-hero-links {
	   display: flex;

	   flex-wrap: wrap;

	   gap: 12px;
	}


	.cd-hero-link {
	   display: inline-flex;

	   align-items: center;
	   justify-content: center;

	   min-height: 46px;

	   padding: 0 23px;

	   border-radius: 50px;

	   background: #fff;

	   color: #087db9 !important;

	   text-decoration: none !important;

	   font-weight: 800;

	   box-shadow:
	       0 6px 15px rgba(0,0,0,.10);

	   transition:
	       transform .2s ease,
	       box-shadow .2s ease,
	       background .2s ease;
	}


	.cd-hero-link:hover {
	   transform: translateY(-3px);

	   background: var(--dora-yellow);

	   color: #654c00 !important;

	   box-shadow:
	       0 10px 22px rgba(0,0,0,.16);
	}


	.cd-hero-link.secondary {
	   background:
	       rgba(255,255,255,.12);

	   color: #fff !important;

	   border:
	       1px solid rgba(255,255,255,.55);

	   box-shadow: none;
	}


	/* =====================================================
	  SECTION
	===================================================== */

	.cd-section {
	   display: block !important;

	   width: 100% !important;

	   margin: 0 0 34px;

	   padding: 34px;

	   background: rgba(255,255,255,.96);

	   border:
	       1px solid var(--border);

	   border-radius: 25px;

	   box-shadow: var(--shadow);

	   visibility: visible !important;

	   opacity: 1 !important;

	   position: relative;

	   overflow: hidden;
	}


	/* =====================================================
	  SECTION 頂部彩色線
	===================================================== */

	.cd-section::before {
	   content: "";

	   position: absolute;

	   left: 0;
	   top: 0;

	   width: 100%;
	   height: 4px;

	   background:
	       linear-gradient(
	           90deg,
	           var(--dora-blue),
	           var(--dora-green),
	           var(--dora-yellow),
	           var(--dora-orange),
	           var(--dora-red),
	           var(--dora-purple)
	       );
	}


	/* =====================================================
	  SECTION HEADER
	===================================================== */

	.cd-section-header {
	   display: flex;

	   align-items: center;

	   justify-content: space-between;

	   gap: 20px;

	   margin-bottom: 25px;

	   padding-bottom: 19px;

	   border-bottom:
	       1px solid #edf2f5;
	}


	.cd-section-title {
	   display: flex;

	   align-items: center;

	   gap: 13px;
	}


	.cd-section-title-icon {
	   display: flex;

	   align-items: center;
	   justify-content: center;

	   flex: 0 0 46px;

	   width: 46px;
	   height: 46px;

	   border-radius: 15px;

	   background:
	       linear-gradient(
	           135deg,
	           #e5f8ff,
	           #d7f3ff
	       );

	   color: var(--dora-blue-dark);

	   font-size: 21px;

	   box-shadow:
	       inset 0 0 0 1px rgba(8,168,232,.08);
	}


	.cd-section-title h2 {
	   margin: 0 !important;

	   padding: 0 !important;

	   color: #193f55 !important;

	   background: none !important;

	   border: 0 !important;

	   font-size: 24px;

	   line-height: 1.4;

	   font-weight: 900;
	}


	.cd-section-more {
	   color: var(--dora-blue-dark) !important;

	   text-decoration: none !important;

	   font-size: 14px;

	   font-weight: 800;

	   white-space: nowrap;
	}


	.cd-section-more:hover {
	   color: var(--dora-red) !important;

	   text-decoration: underline !important;
	}


	/* =====================================================
	  NEWS
	===================================================== */

	/* =====================================================
   最新新聞｜主新聞 + 次新聞
===================================================== */

.cd-news-list {
    display:grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, .85fr);

    gap:18px;

    width:100%;
}


/* =========================
   所有新聞
========================= */

.cd-news-item {
    position:relative;

    display:flex;

    align-items:center;

    width:100%;

    min-height:92px;

    padding:15px;

    border:
        1px solid #e3edf2;

    border-radius:17px;

    background:#fff;

    gap:15px;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}


.cd-news-item:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px
        rgba(30,80,105,.10);

    background:
        #fbfdfe;
}


/* =====================================================
   第一篇：主新聞
===================================================== */

.cd-news-item:first-child {

    grid-row:
        span 4;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    justify-content:flex-start;

    padding:0;

    overflow:hidden;

    min-height:420px;

    border-radius:21px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7fbfd
        );

    box-shadow:
        0 8px 24px
        rgba(30,80,105,.06);
}


.cd-news-item:first-child:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 16px 34px
        rgba(30,80,105,.13);
}


/* 第一篇圖片 */

.cd-news-item:first-child
.cd-news-image {

    flex:
        0 0 auto;

    width:100%;

    height:250px;

    border-radius:0;

    object-fit:cover;

    box-shadow:none;

}


/* 第一篇文字 */

.cd-news-item:first-child
.cd-news-text {

    padding:
        20px 23px 22px;
}


.cd-news-item:first-child
.cd-news-title {

    font-size:
        22px;

    line-height:
        1.55;

    font-weight:
        900;
}


.cd-news-item:first-child
.cd-news-date {

    margin-top:
        10px;

    font-size:
        13px;
}


/* =====================================================
   其他新聞
===================================================== */

.cd-news-item:not(:first-child) {

    min-height:
        92px;
}


.cd-news-item:not(:first-child)
.cd-news-image {

    flex:
        0 0 125px;

    width:
        125px;

    height:
        76px;

    border-radius:
        11px;
}


.cd-news-item:not(:first-child)
.cd-news-title {

    font-size:
        16px;

    line-height:
        1.55;
}


/* =====================================================
   日期
===================================================== */

.cd-news-date {

    display:block;

    margin-top:
        6px;

    color:
        var(--text-light);

    font-size:
        13px;
}


/* =====================================================
   手機
===================================================== */

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

    .cd-news-list {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }


    .cd-news-item:first-child {

        grid-row:
            auto;

        min-height:
            auto;

    }


    .cd-news-item:first-child
    .cd-news-image {

        height:
            230px;

    }


    .cd-news-item:first-child
    .cd-news-title {

        font-size:
            20px;

    }

}


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

    .cd-news-item:first-child
    .cd-news-image {

        height:
            190px;

    }


    .cd-news-item:first-child
    .cd-news-text {

        padding:
            17px 18px 20px;

    }


    .cd-news-item:first-child
    .cd-news-title {

        font-size:
            18px;

        line-height:
            1.55;

    }


    .cd-news-item:not(:first-child) {

        min-height:
            78px;

        padding:
            10px;

    }


    .cd-news-item:not(:first-child)
    .cd-news-image {

        flex-basis:
            88px;

        width:
            88px;

        height:
            58px;

    }


    .cd-news-item:not(:first-child)
    .cd-news-title {

        font-size:
            14px;

    }

}


	.cd-news-item:hover {
	   padding-left: 10px;
	   padding-right: 10px;

	   background:
	       linear-gradient(
	           90deg,
	           #f2fbff,
	           #fff
	       );
	}


	.cd-news-item:last-child {
	   border-bottom: 0;
	}


	.cd-news-image {
	   display: block;

	   flex: 0 0 135px;

	   width: 135px;
	   height: 78px;

	   object-fit: cover;

	   border-radius: 14px;

	   background: #edf5f8;

	   box-shadow:
	       0 4px 12px rgba(30,80,105,.08);
	}


	.cd-news-text {
	   flex: 1;

	   min-width: 0;
	}


	.cd-news-title {
	   display: block;

	   color: #24485c !important;

	   font-size: 17px;

	   line-height: 1.65;

	   font-weight: 800;

	   text-decoration: none !important;

	   transition: color .2s ease;
	}


	.cd-news-title:hover {
	   color: var(--dora-blue-dark) !important;
	}


	.cd-news-date {
	   display: block;

	   margin-top: 7px;

	   color: var(--text-light);

	   font-size: 13px;
	}


	.cd-news-loading {
	   width: 100%;

	   padding: 45px 20px;

	   border-radius: 16px;

	   background:
	       linear-gradient(
	           135deg,
	           #effaff,
	           #f8fdff
	       );

	   color: #718691;

	   text-align: center;

	   line-height: 1.7;
	}


	.cd-news-error {
	   width: 100%;

	   padding: 35px 20px;

	   border-radius: 16px;

	   background: #f7fafc;

	   color: #657984;

	   text-align: center;
	}


	.cd-news-error strong {
	   display: block;

	   margin-bottom: 8px;

	   color: #31586d;
	}


	.cd-news-error a {
	   display: inline-block;

	   margin-top: 12px;

	   color: var(--dora-blue-dark) !important;

	   text-decoration: none !important;

	   font-weight: 800;
	}


	/* =====================================================
	  新聞分類
	===================================================== */

	.cd-news-category {
	   display: grid;

	   grid-template-columns:
	       repeat(3, 1fr);

	   gap: 14px;

	   margin-top: 24px;

	   padding-top: 24px;

	   border-top:
	       1px solid #edf2f5;
	}


	.cd-news-category a {
	   position: relative;

	   display: flex;

	   align-items: center;

	   justify-content: center;

	   min-height: 54px;

	   padding: 10px 15px;

	   border-radius: 15px;

	   background: #f5fafd;

	   border:
	       2px solid #e3eef3;

	   color: #28647e !important;

	   text-align: center;

	   text-decoration: none !important;

	   font-weight: 800;

	   transition:
	       .2s ease;
	}


	/* 第一個：藍 */

	.cd-news-category a:nth-child(1) {
	   background: var(--dora-blue-light);
	   border-color: #bfe9fa;
	}


	/* 第二個：紅 */

	.cd-news-category a:nth-child(2) {
	   background: var(--dora-red-light);
	   border-color: #ffd0d4;
	}


	/* 第三個：綠 */

	.cd-news-category a:nth-child(3) {
	   background: var(--dora-green-light);
	   border-color: #c5efdf;
	}


	.cd-news-category a:hover {
	   transform: translateY(-3px);

	   box-shadow:
	       0 8px 18px rgba(30,80,105,.10);
	}


	/* =====================================================
	  GADGET
	===================================================== */

	.cd-gadget-grid {
	   display: grid;

	   grid-template-columns:
	       repeat(3, 1fr);

	   gap: 16px;
	}


	.cd-gadget-card {
	   display: flex;

	   align-items: center;

	   min-height: 90px;

	   padding: 20px;

	   border-radius: 18px;

	   background:
	       linear-gradient(
	           135deg,
	           #f8fdff,
	           #eefaff
	       );

	   border:
	       1px solid #d9edf5;

	   color: #28566c !important;

	   text-decoration: none !important;

	   transition:
	       transform .2s ease,
	       background .2s ease,
	       box-shadow .2s ease;
	}


	.cd-gadget-card:nth-child(2),
	.cd-gadget-card:nth-child(5) {
	   background:
	       linear-gradient(
	           135deg,
	           #fffaf0,
	           #fff4dc
	       );

	   border-color: #f5e4b8;
	}


	.cd-gadget-card:nth-child(3),
	.cd-gadget-card:nth-child(6) {
	   background:
	       linear-gradient(
	           135deg,
	           #f4fff9,
	           #e9faf3
	       );

	   border-color: #d1eee1;
	}


	.cd-gadget-card:hover {
	   transform: translateY(-4px);

	   box-shadow:
	       var(--shadow-hover);
	}


	.cd-gadget-icon {
	   display: flex;

	   align-items: center;
	   justify-content: center;

	   flex: 0 0 45px;

	   width: 45px;
	   height: 45px;

	   margin-right: 15px;

	   border-radius: 50%;

	   background:
	       linear-gradient(
	           135deg,
	           #0bb8ed,
	           #087bc5
	       );

	   color: #fff;

	   font-size: 13px;

	   font-weight: 900;

	   box-shadow:
	       0 5px 12px rgba(8,150,210,.22);
	}


	.cd-gadget-card:nth-child(2) .cd-gadget-icon,
	.cd-gadget-card:nth-child(5) .cd-gadget-icon {
	   background:
	       linear-gradient(
	           135deg,
	           #ffc928,
	           #ff9f43
	       );
	}


	.cd-gadget-card:nth-child(3) .cd-gadget-icon,
	.cd-gadget-card:nth-child(6) .cd-gadget-icon {
	   background:
	       linear-gradient(
	           135deg,
	           #48d49f,
	           #20ad7b
	       );
	}


	.cd-gadget-title {
	   font-size: 15px;

	   line-height: 1.6;

	   font-weight: 800;
	}


	/* =====================================================
	  DATABASE
	===================================================== */

	.cd-database-grid {
	   display: grid;

	   grid-template-columns:
	       repeat(3, 1fr);

	   gap: 20px;
	}


	.cd-database-card {
	   overflow: hidden;

	   background: #fff;

	   border:
	       1px solid #e3edf1;

	   border-radius: 19px;

	   box-shadow:
	       0 5px 18px rgba(30,70,90,.055);

	   transition:
	       transform .2s ease,
	       box-shadow .2s ease;
	}


	.cd-database-card:nth-child(1) {
	   border-top: 4px solid var(--dora-blue);
	}

	.cd-database-card:nth-child(2) {
	   border-top: 4px solid var(--dora-green);
	}

	.cd-database-card:nth-child(3) {
	   border-top: 4px solid var(--dora-yellow);
	}

	.cd-database-card:nth-child(4) {
	   border-top: 4px solid var(--dora-red);
	}

	.cd-database-card:nth-child(5) {
	   border-top: 4px solid var(--dora-purple);
	}

	.cd-database-card:nth-child(6) {
	   border-top: 4px solid var(--dora-orange);
	}


	.cd-database-card:hover {
	   transform: translateY(-5px);

	   box-shadow:
	       var(--shadow-hover);
	}


	.cd-database-card a {
	   display: block;

	   color: #294d60 !important;

	   text-decoration: none !important;
	}


	.cd-database-card img {
	   display: block;

	   width: 100%;

	   height: 155px;

	   object-fit: cover;

	   background: #edf4f7;
	}


	.cd-database-card-title {
	   padding: 17px 12px;

	   color: #294d60;

	   font-size: 16px;

	   line-height: 1.5;

	   font-weight: 800;

	   text-align: center;
	}


	/* =====================================================
	  WORLD
	===================================================== */

	.cd-world-grid {
	   display: grid;

	   grid-template-columns:
	       repeat(4, 1fr);

	   gap: 15px;
	}


	.cd-world-card {
	   display: block;

	   min-height: 130px;

	   padding: 28px 15px;

	   border-radius: 18px;

	   background: #f6fafd;

	   border:
	       2px solid #e4eef3;

	   color: #28617b !important;

	   text-align: center;

	   text-decoration: none !important;

	   font-weight: 800;

	   line-height: 1.6;

	   transition:
	       .2s ease;
	}


	.cd-world-card:nth-child(1) {
	   background: var(--dora-blue-light);
	   border-color: #c4eafa;
	}

	.cd-world-card:nth-child(2) {
	   background: var(--dora-green-light);
	   border-color: #c8eedf;
	}

	.cd-world-card:nth-child(3) {
	   background: var(--dora-purple-light);
	   border-color: #dfcff5;
	}

	.cd-world-card:nth-child(4) {
	   background: var(--dora-yellow-light);
	   border-color: #f4e6ae;
	}


	.cd-world-card:hover {
	   transform: translateY(-4px);

	   box-shadow:
	       0 12px 25px rgba(30,80,105,.10);
	}


	/* =====================================================
	  VIDEO
	===================================================== */

	.cd-video-section {
	   background:
	       linear-gradient(
	           135deg,
	           #fff5fa,
	           #f4f0ff 50%,
	           #eefaff
	       );
	}


	.cd-video {
	   position: relative;

	   width: 100%;

	   max-width: 820px;

	   margin: 0 auto;

	   aspect-ratio: 16 / 9;

	   overflow: hidden;

	   border-radius: 21px;

	   background: #dfeef4;

	   box-shadow:
	       0 15px 35px rgba(100,60,120,.12);

	   border:
	       4px solid #fff;
	}


	.cd-video iframe {
	   position: absolute;

	   top: 0;
	   left: 0;

	   width: 100%;
	   height: 100%;

	   border: 0;
	}


	/* =====================================================
	  BOTTOM LINKS
	===================================================== */

	.cd-bottom-links {
	   display: grid;

	   grid-template-columns:
	       repeat(4, 1fr);

	   gap: 15px;
	}


	.cd-bottom-links a {
	   display: flex;

	   align-items: center;
	   justify-content: center;

	   min-height: 120px;

	   padding: 20px;

	   border-radius: 18px;

	   background: #f7fafc;

	   border:
	       2px solid #e3edf2;

	   color: #2d6178 !important;

	   text-align: center;

	   text-decoration: none !important;

	   font-weight: 800;

	   line-height: 1.6;

	   transition:
	       .2s ease;
	}


	.cd-bottom-links a:nth-child(1) {
	   background: var(--dora-blue-light);
	   border-color: #c5eafa;
	}

	.cd-bottom-links a:nth-child(2) {
	   background: var(--dora-yellow-light);
	   border-color: #f1e1a6;
	}

	.cd-bottom-links a:nth-child(3) {
	   background: var(--dora-pink-light);
	   border-color: #f5cfe1;
	}

	.cd-bottom-links a:nth-child(4) {
	   background: var(--dora-purple-light);
	   border-color: #ddcff0;
	}


	.cd-bottom-links a:hover {
	   transform: translateY(-4px);

	   box-shadow:
	       var(--shadow-hover);
	}


	/* =====================================================
	  RWD
	===================================================== */

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

	   .main {	       padding-left: 15px !important;
	       padding-right: 15px !important;
	   }


	   .cd-hero-content {
	       padding: 45px 38px;
	   }


	   .cd-hero h1 {
	       font-size: 34px;
	   }


	   .cd-gadget-grid {
	       grid-template-columns:
	           repeat(2, 1fr);
	   }


	   .cd-database-grid {
	       grid-template-columns:
	           repeat(2, 1fr);
	   }


	   .cd-world-grid {
	       grid-template-columns:
	           repeat(2, 1fr);
	   }


	   .cd-bottom-links {
	       grid-template-columns:
	           repeat(2, 1fr);
	   }

	}


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

	   .main {
	       padding:
	           0 10px 40px !important;
	   }


	   .cd-hero {
	       min-height: 0;

	       margin-bottom: 22px;

	       border-radius: 22px;
	   }


	   .cd-hero-content {
	       padding: 32px 24px;
	   }


	   .cd-hero h1 {
	       font-size: 28px;
	   }


	   .cd-hero p {
	       font-size: 15px;

	       line-height: 1.8;
	   }


	   .cd-hero-links {
	       gap: 8px;
	   }


	   .cd-hero-link {
	       min-height: 42px;

	       padding: 0 17px;

	       font-size: 14px;
	   }


	   .cd-section {
	       margin-bottom: 20px;

	       padding:
	           22px 17px;

	       border-radius: 19px;
	   }


	   .cd-section-header {
	       align-items: flex-start;

	       margin-bottom: 19px;
	   }


	   .cd-section-title-icon {
	       flex-basis: 40px;

	       width: 40px;
	       height: 40px;
	   }


	   .cd-section-title h2 {
	       font-size: 20px;
	   }


	   .cd-section-more {
	       font-size: 13px;
	   }


	   .cd-news-item {
	       gap: 12px;

	       min-height: 78px;

	       padding:
	           13px 0;
	   }


	   .cd-news-image {
	       flex-basis: 90px;

	       width: 90px;
	       height: 58px;

	       border-radius: 9px;
	   }


	   .cd-news-title {
	       font-size: 15px;

	       line-height: 1.55;
	   }


	   .cd-news-category {
	       grid-template-columns: 1fr;

	       gap: 9px;
	   }


	   .cd-gadget-grid {
	       grid-template-columns: 1fr;

	       gap: 10px;
	   }


	   .cd-gadget-card {
	       min-height: 76px;

	       padding: 15px;
	   }


	   .cd-database-grid {
	       grid-template-columns:
	           repeat(2, 1fr);

	       gap: 10px;
	   }


	   .cd-database-card img {
	       height: 110px;
	   }


	   .cd-database-card-title {
	       padding:
	           11px 5px;

	       font-size: 14px;
	   }


	   .cd-world-grid {
	       grid-template-columns:
	           repeat(2, 1fr);

	       gap: 10px;
	   }


	   .cd-world-card {
	       min-height: 105px;

	       padding:
	           23px 8px;

	       font-size: 14px;
	   }


	   .cd-bottom-links {
	       grid-template-columns:
	           repeat(2, 1fr);

	       gap: 10px;
	   }


	   .cd-bottom-links a {
	       min-height: 100px;

	       padding: 15px;

	       font-size: 14px;
	   }



	}

/* =====================================================
   HERO V3
===================================================== */

.cd-hero-v3{

    position:relative;

    display:flex !important;

    align-items:center;

    width:100%;

    min-height:425px;

    margin:
        0 0 38px;

    overflow:hidden;

    border-radius:
        30px;

    background:
        #087bc5;

    box-shadow:
        0 22px 48px
        rgba(8,126,184,.20);

    isolation:isolate;
}


/* =====================================================
   背景
===================================================== */

.cd-hero-v3-bg{

    position:absolute;

    inset:0;

    z-index:-3;

    background-image:
        url("https://chinesedora.com/images/2021-news.jpg");

    background-position:
        center;

    background-size:
        cover;

    transform:
        scale(1.04);

    transition:
        background-image .5s ease,
        transform 8s ease;
}


.cd-hero-v3:hover
.cd-hero-v3-bg{

    transform:
        scale(1.08);

}


/* =====================================================
   背景遮罩
===================================================== */

.cd-hero-v3-overlay{

    position:absolute;

    inset:0;

    z-index:-2;

    background:

        linear-gradient(
            90deg,
            rgba(3,57,97,.94) 0%,
            rgba(4,79,126,.84) 37%,
            rgba(5,91,143,.55) 68%,
            rgba(5,91,143,.28) 100%
        );

}


/* =====================================================
   左側文字
===================================================== */

.cd-hero-v3-content{

    position:relative;

    z-index:5;

    width:
        min(650px,57%);

    padding:
        58px 0 75px 55px;

    color:#fff;

}


.cd-hero-v3-kicker{

    display:flex;

    align-items:center;

    gap:9px;

    margin-bottom:
        14px;

    color:
        rgba(255,255,255,.92);

    font-size:
        13px;

    font-weight:
        900;

    letter-spacing:
        1.4px;
}


.cd-hero-v3-dot{

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        var(--dora-yellow);

    box-shadow:
        0 0 0 5px
        rgba(255,216,77,.15);

    animation:
        cdHeroV3Pulse 2s
        ease-in-out infinite;
}


@keyframes cdHeroV3Pulse{

    0%,
    100%{

        opacity:1;

        transform:
            scale(1);

    }

    50%{

        opacity:.5;

        transform:
            scale(.78);

    }

}


.cd-hero-v3-category{

    margin-bottom:
        7px;

    color:
        rgba(255,255,255,.58);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2px;
}


.cd-hero-v3-content h1{

    margin:
        0 0 16px;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    color:
        #fff !important;

    font-size:
        42px;

    line-height:
        1.30;

    font-weight:
        900;

    letter-spacing:
        .4px;

    text-shadow:
        0 3px 15px
        rgba(0,0,0,.16);

}


.cd-hero-v3-content p{

    max-width:
        590px;

    margin:
        0;

    color:
        rgba(255,255,255,.91);

    font-size:
        16px;

    line-height:
        1.9;

}


/* =====================================================
   按鈕
===================================================== */

.cd-hero-v3-actions{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:
        26px;

}


.cd-hero-v3-primary,
.cd-hero-v3-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:
        45px;

    padding:
        0 21px;

    border-radius:
        50px;

    font-weight:
        800;

    text-decoration:
        none !important;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


.cd-hero-v3-primary{

    gap:8px;

    background:
        #fff;

    color:
        var(--dora-blue-dark) !important;

    box-shadow:
        0 7px 20px
        rgba(0,0,0,.13);

}


.cd-hero-v3-primary:hover{

    transform:
        translateY(-3px);

    background:
        var(--dora-yellow);

    color:
        #604c00 !important;

    box-shadow:
        0 12px 26px
        rgba(0,0,0,.18);

}


.cd-hero-v3-secondary{

    color:
        #fff !important;

    border:
        1px solid
        rgba(255,255,255,.45);

    background:
        rgba(255,255,255,.10);

}


.cd-hero-v3-secondary:hover{

    transform:
        translateY(-3px);

    background:
        rgba(255,255,255,.20);

}


/* =====================================================
   右側五幕選擇
===================================================== */

.cd-hero-v3-picker{

    position:absolute;

    z-index:10;

    top:50%;

    right:27px;

    width:
        355px;

    transform:
        translateY(-50%);

}


/* =====================================================
   單一幕
===================================================== */

.cd-hero-v3-item{

    position:relative;

    display:flex;

    align-items:center;

    gap:11px;

    min-height:
        68px;

    margin-bottom:
        7px;

    padding:
        10px 14px;

    border:
        1px solid
        rgba(255,255,255,.17);

    border-radius:
        15px;

    background:
        rgba(2,48,82,.46);

    backdrop-filter:
        blur(11px);

    cursor:pointer;

    color:#fff;

    transition:

        transform .25s ease,

        background .25s ease,

        border .25s ease,

        box-shadow .25s ease;

}


.cd-hero-v3-item:last-child{

    margin-bottom:
        0;

}


.cd-hero-v3-item:hover{

    transform:
        translateX(-4px);

    background:
        rgba(255,255,255,.15);

}


.cd-hero-v3-item.active{

    transform:
        translateX(-8px);

    background:
        rgba(255,255,255,.20);

    border-color:
        rgba(255,255,255,.46);

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.13);

}


.cd-hero-v3-item-number{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:
        0 0 31px;

    width:
        31px;

    height:
        31px;

    border-radius:
        9px;

    background:
        rgba(255,255,255,.12);

    color:
        rgba(255,255,255,.75);

    font-size:
        10px;

    font-weight:
        900;

}


.cd-hero-v3-item.active
.cd-hero-v3-item-number{

    background:
        var(--dora-yellow);

    color:
        #564700;

}


.cd-hero-v3-item-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:
        0 0 31px;

    width:
        31px;

    font-size:
        18px;

}


.cd-hero-v3-item-content{

    flex:
        1;

    min-width:
        0;

}


.cd-hero-v3-item-content strong{

    display:block;

    overflow:hidden;

    color:#fff;

    font-size:
        14px;

    line-height:
        1.45;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


.cd-hero-v3-item-content small{

    display:block;

    margin-top:
        2px;

    color:
        rgba(255,255,255,.48);

    font-size:
        9px;

    line-height:
        1.3;

    letter-spacing:
        1px;

    font-weight:
        700;

}


.cd-hero-v3-item-arrow{

    color:
        rgba(255,255,255,.42);

    font-size:
        17px;

}


.cd-hero-v3-item.active
.cd-hero-v3-item-arrow{

    color:
        var(--dora-yellow);

}


/* =====================================================
   底部 SCROLL
===================================================== */

.cd-hero-v3-bottom{

    position:absolute;

    z-index:6;

    left:
        55px;

    bottom:
        22px;

    display:flex;

    align-items:center;

    gap:11px;

    color:
        rgba(255,255,255,.53);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.4px;

}


.cd-hero-v3-scroll-line{

    position:relative;

    width:
        62px;

    height:
        2px;

    overflow:hidden;

    background:
        rgba(255,255,255,.18);

}


.cd-hero-v3-scroll-line span{

    position:absolute;

    left:0;

    top:0;

    width:
        24px;

    height:
        100%;

    background:
        rgba(255,255,255,.75);

    animation:
        cdHeroV3Scroll 2s
        ease-in-out infinite;

}


@keyframes cdHeroV3Scroll{

    0%{

        transform:
            translateX(-30px);

    }

    100%{

        transform:
            translateX(70px);

    }

}


/* =====================================================
   進度條
===================================================== */

.cd-hero-v3-progress{

    position:absolute;

    z-index:20;

    left:0;

    right:0;

    bottom:0;

    height:
        4px;

    background:
        rgba(0,0,0,.15);

}


.cd-hero-v3-progress span{

    display:block;

    width:
        0;

    height:
        100%;

    background:
        var(--dora-yellow);

}


/* =====================================================
   900px
===================================================== */

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

    .cd-hero-v3{

        min-height:
            520px;

    }


    .cd-hero-v3-content{

        width:
            100%;

        padding:
            42px 32px 245px;

    }


    .cd-hero-v3-content h1{

        font-size:
            34px;

    }


    .cd-hero-v3-picker{

        left:
            20px;

        right:
            20px;

        bottom:
            21px;

        top:
            auto;

        width:
            auto;

        transform:
            none;

        display:grid;

        grid-template-columns:
            repeat(5,1fr);

        gap:
            6px;

    }


    .cd-hero-v3-item{

        min-height:
            78px;

        margin:
            0;

        padding:
            8px;

        flex-direction:
            column;

        justify-content:
            center;

        gap:
            3px;

        text-align:
            center;

    }


    .cd-hero-v3-item:hover,
    .cd-hero-v3-item.active{

        transform:
            translateY(-4px);

    }


    .cd-hero-v3-item-number{

        position:absolute;

        top:5px;

        left:6px;

        width:23px;

        height:23px;

        flex-basis:
            23px;

        font-size:
            8px;

    }


    .cd-hero-v3-item-icon{

        font-size:
            20px;

    }


    .cd-hero-v3-item-content strong{

        font-size:
            11px;

        white-space:
            normal;

    }


    .cd-hero-v3-item-content small,
    .cd-hero-v3-item-arrow{

        display:none;

    }


    .cd-hero-v3-bottom{

        display:none;

    }

}


/* =====================================================
   600px
===================================================== */

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

    .cd-hero-v3{

        min-height:
            585px;

        margin-bottom:
            22px;

        border-radius:
            22px;

    }


    .cd-hero-v3-content{

        padding:
            33px 23px 255px;

    }


    .cd-hero-v3-content h1{

        font-size:
            29px;

    }


    .cd-hero-v3-content p{

        font-size:
            14px;

        line-height:
            1.8;

    }


    .cd-hero-v3-actions{

        margin-top:
            20px;

    }


    .cd-hero-v3-primary,
    .cd-hero-v3-secondary{

        min-height:
            42px;

        padding:
            0 16px;

        font-size:
            14px;

    }


    .cd-hero-v3-picker{

        left:
            10px;

        right:
            10px;

        bottom:
            12px;

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            5px;

    }


    .cd-hero-v3-item{

        min-height:
            48px;

        flex-direction:
            row;

        justify-content:
            flex-start;

        padding:
            7px 10px;

        text-align:
            left;

    }


    .cd-hero-v3-item:hover,
    .cd-hero-v3-item.active{

        transform:
            translateX(0);

    }


    .cd-hero-v3-item-number{

        position:
            static;

        flex:
            0 0 27px;

        width:
            27px;

        height:
            27px;

    }


    .cd-hero-v3-item-icon{

        flex:
            0 0 27px;

        width:
            27px;

        font-size:
            17px;

    }


    .cd-hero-v3-item-content{

        text-align:
            left;

    }


    .cd-hero-v3-item-content strong{

        font-size:
            13px;

        white-space:
            nowrap;

    }

}
/* =====================================================
   YouTube 影音區
===================================================== */

.cd-video-section{

    background:
        linear-gradient(
            135deg,
            #fff8fb 0%,
            #f6f1ff 48%,
            #eefaff 100%
        );

}


.cd-video-icon{

    background:
        linear-gradient(
            135deg,
            #ffe9ee,
            #fff4f5
        );

    color:
        var(--dora-red);

}


/* =========================
   主要排版
========================= */

.cd-video-layout{

    display:grid;

    grid-template-columns:
        minmax(0,1.65fr)
        minmax(280px,.85fr);

    gap:
        25px;

    align-items:
        center;

}


/* =========================
   播放器
========================= */

.cd-video-player{

    width:100%;

}


.cd-video{

    position:relative;

    width:100%;

    aspect-ratio:
        16 / 9;

    overflow:hidden;

    border-radius:
        21px;

    background:
        #dfeef4;

    border:
        4px solid #fff;

    box-shadow:
        0 15px 35px
        rgba(80,60,120,.14);

}


.cd-video iframe{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    border:0;

}


/* =========================
   右側文字
========================= */

.cd-video-info{

    padding:
        5px 5px 5px 0;

}


.cd-video-label{

    color:
        var(--dora-red);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        1.7px;

}


.cd-video-info h3{

    margin:
        8px 0 10px;

    font-size:
        24px;

    line-height:
        1.4;

    color:
        #33485a;

}


.cd-video-info > p{

    margin:
        0 0 18px;

    color:
        var(--text-medium);

    font-size:
        15px;

    line-height:
        1.85;

}


/* =========================
   特色項目
========================= */

.cd-video-feature-list{

    display:
        grid;

    gap:
        10px;

}


.cd-video-feature-list > div{

    display:flex;

    align-items:center;

    gap:
        11px;

    padding:
        11px 12px;

    border-radius:
        13px;

    background:
        rgba(255,255,255,.65);

    border:
        1px solid
        rgba(224,215,231,.65);

}


.cd-video-feature-list > div > span{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:
        0 0 34px;

    width:
        34px;

    height:
        34px;

    border-radius:
        10px;

    background:
        #fff;

    color:
        var(--dora-red);

    font-weight:
        900;

}


.cd-video-feature-list strong{

    display:block;

    color:
        #395465;

    font-size:
        14px;

}


.cd-video-feature-list small{

    display:block;

    margin-top:
        2px;

    color:
        var(--text-light);

    font-size:
        11px;

}


/* =========================
   YouTube 按鈕
========================= */

.cd-video-button{

    display:
        inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:
        18px;

    min-height:
        44px;

    padding:
        0 19px;

    border-radius:
        50px;

    background:
        var(--dora-red);

    color:#fff !important;

    font-weight:
        800;

    text-decoration:
        none !important;

    box-shadow:
        0 7px 16px
        rgba(239,75,85,.20);

    transition:
        transform .2s ease,
        background .2s ease;

}


.cd-video-button:hover{

    transform:
        translateY(-2px);

    background:
        #db3d48;

}


/* =========================
   RWD
========================= */

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

    .cd-video-layout{

        grid-template-columns:
            1fr;

    }


    .cd-video-info{

        padding:
            0;

    }

}


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

    .cd-video-section{

        padding:
            22px 17px;

    }


    .cd-video{

        border-radius:
            16px;

        border-width:
            3px;

    }


    .cd-video-info h3{

        font-size:
            21px;

    }


    .cd-video-info > p{

        font-size:
            14px;

    }

}