@charset "utf-8";
/* CSS Document */
.video_dm{
	position: relative;
	width: 100%;
	z-index: 2;
	top:0;
	left: 0;
}
/* --- 1. 全域共用樣式 (放在最外面，避免重複寫三次) --- */
.div1_dm_left, .div1_dm_right {
    float: left; /* 這是大與中尺寸的共用值，手機版會再覆寫 */
}

.div1_dm_left_top {
    color: #ffffff;
    font-weight: bold;
}

.div1_dm_left_bottom img {
    /* 這裡可以先不放，因為三個尺寸數值都不同 */
}
/*div2*/
.div2_text{
	font-size: 18px;
	color:#ffffff;
	text-align: center;
}

/* --- 2. 各別尺寸定義 --- */
/*div3*/
.div3{
    padding-bottom: 293px;
    background-image:url("../img/DGM_bg_01_new.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 1920px 762px;
}
.div3 .container{
    padding-bottom: 120px;
}
.div3 .div3_bigouter_dm{
    width: 50%; 
    position: relative;
    margin: auto;
opacity: 0;
    visibility: hidden;
}
.div3 .div3_biginfake_dm{
    padding-top: 93%;
}
.div3 .div3_biginreal_dm{
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%;
    height:100%;
}
.div3 .rotate-on-scroll{
    display: inline-block; /* 必須加這行，否則 h1(block) 可能無法正確旋轉 */
    will-change: transform;    
}
.div3 .div3_smallouter_dm{
    width: 57%;
    position: absolute;
}
.div3 .div3_smallinfake_dm{
    padding-top: 100%;
}
.div3 .div3_smallinreal_dm{
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%;
    height:100%;
   
    border-radius: 100%;
    color:#ffffff;
}
.div3 .div3_smallinreal_dm1{
     background-color: rgba(0, 116, 176, 0.6);
}
.div3 .div3_smallinreal_dm2{
     background-color: rgba(248, 182, 22, 0.6);
}
.div3 .div3_smallinreal_dm3{
     background-color: rgba(236, 118, 162, 0.6);
}
.div3 .div3_smallinreal_dm .div3_smallen_dm{
    line-height: 1;
}
.div3 .div3_smallch_dm{
    margin-top: 5%;
    letter-spacing: 0.1em;
    line-height: 1.3em;
}
.div3 .div3_smallouter_dm1{
    top:0%;
    left:21.5%;
}
.div3 .div3_smallouter_dm2{
    bottom:0%;
    left:0%;
}
.div3 .div3_smallouter_dm3{
    bottom:0%;
    right:0%;
}

.div3 .div3_smallouter_dm1 .div3_smallshow1_dm{
    margin-top: 17%;
    text-align: center;
}
.div3 .div3_smallouter_dm2 .div3_smallshow1_dm{
    position: absolute;
    text-align: center;
    left: 14%;
    bottom:15%;
}
.div3 .div3_smallouter_dm2 .div3_smallshow1_dm .div3_smallch_dm{
    margin-top: 8%;
}
.div3 .div3_smallouter_dm3 .div3_smallshow1_dm{
    position: absolute;
    text-align: center;
    right: 18%;
    bottom:15%;
}
.div3 .div3_smallouter_dm3 .div3_smallshow1_dm .div3_smallch_dm{
    margin-top: 8%;
}
.div3 .div3_smallouter_dm1 .div3_smallshow2_dm{
    position: absolute;
    width: 100%;
    height:100%;
    top:0;
    left: 0;
}
.div3 .div3_smallouter_dm1 .div3_smallshow2_dm .div3_small_img{
    position: absolute;
    width: 37%;
    top:29%;
    left:69%;
}
.div3 .div3_smallouter_dm1 .div3_smallshow2_dm .div3_smalltext_dm{
    position: absolute;
    width: 100%;
    top: 21%;
    left: 112%;
}
.div3 .div3_smallouter_dm2 .div3_smallshow2_dm .div3_small_img{
    position: absolute;
    width: 37%;
    top: 27%;
    left: 2%;
}
.div3 .div3_smallouter_dm2 .div3_smallshow2_dm .div3_smalltext_dm{
    position: absolute;
    width: 92%;
    top: 18%;
    left: -96%;
    text-align: right;
}
.div3 .div3_smallouter_dm3 .div3_smallshow2_dm .div3_small_img{
    position: absolute;
    width: 37%;
    top:67%;
    left:81%;
}
.div3 .div3_smallouter_dm3 .div3_smallshow2_dm .div3_smalltext_dm{
    position: absolute;
    width: 90%;
    top: 85%;
    left: 102%;
}

.div3_smallshow1_dm, 
.div3_smallshow2_dm {
    opacity: 0;
    visibility: hidden;
    transition: none !important; /* 絕對不能有 CSS transition */
}
/*logo輪播*/
.marquee-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px; /* 排與排之間的間距 */
    padding: 40px 0;
    overflow: hidden;
    /* 左右漸層遮罩，讓 Logo 消失在邊緣時更自然 */
    /*-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);*/
}

.marquee-track {
    display: flex;
    width: max-content; /* 讓內容決定寬度，不被父層切斷 */
    will-change: transform; /* 效能優化 */
}

.logo-group {
    display: flex;
    gap: 20px; /* Logo 之間的間距 */
    padding-right: 20px; /* 必須跟 gap 一致 */
}

.logo-item {
    width: 220px;
    background: rgba(255, 255, 255, 1);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}
.logo-item img{
    width: 100%;
    display: block;
    
}
.logo-item a:hover img{

}

/* 中間那一排設定初始錯位 */
.row-2 .marquee-track {
    margin-left: -100px;
}
/*logo輪播 end*/

@media (min-width: 1920px) {
.div3{
    background-size: 100% 762px;
}
}
@media (min-width: 1200px) {
	/* 大螢幕版 */
    .div1_dm { padding-top: 100px; }
    .div1_dm_left { width: 40%; padding-top: 20px; }
    .div1_dm_left_top { font-size: 45px; padding-bottom: 10px; }
    .div1_dm_left_bottom img { width: 80%; }
    .div1_dm_right { width: 60%; }
}


@media screen and (min-width: 992px) and (max-width: 1199px) {
	/* 電腦/平板中螢幕 */
    .div1_dm { padding-top: 54px; }
    .div1_dm_left { width: 40%; padding-top: 20px; }
    .div1_dm_left_top { font-size: 40px; padding-bottom: 10px; }
    .div1_dm_left_bottom img { width: 80%; }
    .div1_dm_right { width: 60%; }
}
@media screen and (min-width: 992px) {
	/*div2*/
	.div2_text{
		padding:70px 0; 
	}
    .div5{
        padding-top: 100px;
    }
    /*div6*/
    .div6{
        padding-top: 100px;
    }
    /*div6 end*/
}

@media screen and (max-width: 991px) {
	/* 手機版 */
    .div1_dm { padding-top: 30px; }
    .div1_dm_left { 
        width: 76%; 
        max-width: 400px; 
        padding-top: 10px; 
        margin: auto; 
        float: none; /* 手機版取消浮動 */
    }
    .div1_dm_left_top { font-size: 29px; padding-bottom: 6px; }
    .div1_dm_left_bottom img { width: 100%; }
    .div1_dm_right { 
        width: 100%; 
        margin-top: 20px; 
        float: none; /* 手機版取消浮動 */
    }
    /*div2*/
    .div2_text{
		padding:35px 0; 
	}
    /*div3*/
    .div3{
        padding-bottom: 135px;
        background-size: 240%;
    }
    .div3 .container{
        padding-bottom: 66px;
    }
    .logo-item {
    width: 150px;
    }
    /*div5*/
    .div5{
    margin-top: 25px;
    }
    .div5 .title1_dm{
        margin-bottom: 10px;
    }
    /*div5 end*/
    /*div6*/
    .div6{
        margin-top: 25px;
    }
    /*div6 end*/
}