@charset "UTF-8";





@media screen and (min-width: 992px) {

/* 電腦版 */
.title2_dm{
    margin-bottom: 60px;
}
.title_leftborder_dm{
    padding-right: 4%;
    width:96%;
}
.services_outer_dm{
    width: 100%;
}
.services_in_dm{
    margin-top: 30px;
    margin-bottom: 30px;
}
.services_con_dm{
    width: 47.5%;
    cursor: pointer;
}


.services_con_dm .services_coninimg_dm{
    position: absolute;
    z-index: 1;
    display: none;
    opacity: 0;
}
.services_con_dm.active .services_coninimg_dm{
    display:block;
}
.services_con_dm .services_coninimg_dm1{
    width: 60%;
    top: -9%;
    right: -9%;
}
.services_con_dm .services_coninimg_dm2{
    width: 67%;
    top: -10%;
    right: -15%;
}
.services_con_dm .services_coninimg_dm3{
    width: 64%;
    top: -10%;
    right: -7%;
}
.services_con_dm .services_coninimg_dm4{
    width: 66%;
    top:-11%;
    right: -8%;
}
.services_con_dm .services_coninimg_dm5{
    top: -10%;
    right: -7%;
    width: 58%;
}
.services_con_dm .services_coninimg_dm6{
    top: -9%;
    right: -7%;
    width: 61%;
}
.services_conleft_dm{
    float:left;
}
.services_conright_dm{
    float:right;    
}
.color1_dm{
    background-image: 
        linear-gradient(to right,#1c2838,#1c2838),          
        linear-gradient(to right, #a5d5b7, #0074b0); /* 第二層：外層漸層 (露出的邊框) */
}
.color1_dm.active{
    background-image: 
        linear-gradient(to right,#a5d5b7,#0074b0),          
        linear-gradient(to right, #a5d5b7, #0074b0); /* 第二層：外層漸層 (露出的邊框) */
}
.color2_dm{
    background-image: 
        linear-gradient(to right,#1c2838,#1c2838),          
        linear-gradient(to right, #ff7aaa, #ff5354); /* 第二層：外層漸層 (露出的邊框) */
}
.color2_dm.active{
    background-image: 
        linear-gradient(to right,#ff7aaa,#ff5354),          
        linear-gradient(to right, #ff7aaa, #ff5354); /* 第二層：外層漸層 (露出的邊框) */
}
.color3_dm{
    background-image: 
        linear-gradient(to right,#1c2838,#1c2838),          
        linear-gradient(to right, #f39800, #f8b616); /* 第二層：外層漸層 (露出的邊框) */
}
.color3_dm.active{
    background-image: 
        linear-gradient(to right,#f39800,#f8b616),          
        linear-gradient(to right, #f39800, #f8b616); /* 第二層：外層漸層 (露出的邊框) */
}
.services_con_dm{
    border: 2px solid transparent; 
    border-radius: 1em; 
    background-origin: border-box;
    background-clip: content-box, border-box;
    display: inline-block;
    color: white;
    text-decoration: none;
    transition: transform 0.3s ease;
}
.services_conin_dm{
    position: relative;
    color:#ffffff;
    padding: 20px;
}
.services_bigtitle_dm{
    /*font-size: 34px;*/
    font-weight: bold;
    line-height: 1.3;
    position: relative;
    z-index: 2;
}
.services_text_dm{
    margin-top: 10px;
    /*font-size: 20px;*/
    font-weight: bold;
    position: relative;
    z-index: 2;
}
.services_stext_dm{
    margin-top: 10px;
    /*font-size: 18px;*/
    position: relative;
    z-index: 2;
}



}



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

/* 手機版 */
.title2_dm{
    margin-bottom: 30px;
}
.services_in_dm{
    width: 100%;
    text-align: center;
}
.services_con_dm{
    width: 70%;
    cursor: pointer;  
    margin-bottom: 30px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: left;
    transition: width 0.3s ease-in-out; /* 這裡就搞定動畫了 */
}
.services_con_dm.active{
    width: 100%;
    transition: width 0.3s ease-in-out;
}
.services_con_dm .services_coninimg_dm{
    position: absolute;
    z-index: 1;
    opacity: 0;
visibility: hidden; /* 改用這個來隱藏 */
    transition: opacity 0s, visibility 0s;

}
.services_con_dm.active .services_coninimg_dm{
opacity: 1;
    visibility: visible; /* 亮起時變回可見 */
    transition: opacity 0.5s ease-in-out, visibility 0.5s;
}
.services_con_dm .services_coninimg_dm1{
    width: 49%;
    top: -3%;
    right: -8%;
}
.services_con_dm .services_coninimg_dm2{
    width: 56%;
    top: -10%;
    right: -15%;
}
.services_con_dm .services_coninimg_dm3{
    width: 53%;
    top: -8%;
    right: -7%;
}
.services_con_dm .services_coninimg_dm4{
    width: 51%;
    top:-5%;
    right: -7%;
}
.services_con_dm .services_coninimg_dm5{
    top: -4%;
    right: -7%;
    width: 48%;
}
.services_con_dm .services_coninimg_dm6{
    top: -6%;
    right: -7%;
    width: 48%;
}


.services_con_dm.removeactive{
    /*width: 37.5%;*/
}
.services_conleft_dm{
    /*float:left;*/
}
.services_conright_dm{
    /*float:right;    */
}
.color1_dm{
    background-image: 
        linear-gradient(to right,#1c2838,#1c2838),          
        linear-gradient(to right, #a5d5b7, #0074b0); /* 第二層：外層漸層 (露出的邊框) */
}
.color1_dm.active{
    background-image: 
        linear-gradient(to right,#a5d5b7,#0074b0),          
        linear-gradient(to right, #a5d5b7, #0074b0); /* 第二層：外層漸層 (露出的邊框) */
}
.color2_dm{
    background-image: 
        linear-gradient(to right,#1c2838,#1c2838),          
        linear-gradient(to right, #ff7aaa, #ff5354); /* 第二層：外層漸層 (露出的邊框) */
}
.color2_dm.active{
    background-image: 
        linear-gradient(to right,#ff7aaa,#ff5354),          
        linear-gradient(to right, #ff7aaa, #ff5354); /* 第二層：外層漸層 (露出的邊框) */
}
.color3_dm{
    background-image: 
        linear-gradient(to right,#1c2838,#1c2838),          
        linear-gradient(to right, #f39800, #f8b616); /* 第二層：外層漸層 (露出的邊框) */
}
.color3_dm.active{
    background-image: 
        linear-gradient(to right,#f39800,#f8b616),          
        linear-gradient(to right, #f39800, #f8b616); /* 第二層：外層漸層 (露出的邊框) */
}
.services_con_dm{
    border: 2px solid transparent; 
    border-radius: 1em; 
    background-origin: border-box;
    background-clip: content-box, border-box;
    display: block;
    color: white;
    text-decoration: none;
    transition: transform 0.3s ease;
}
.services_conin_dm{
    position: relative;
    color:#ffffff;
    padding: 10px;
}
.services_bigtitle_dm{
    font-weight: bold;
    line-height: 1.3;
    position: relative;
    z-index: 2;
}
.services_text_dm{
    margin-top: 5px;
    font-weight: bold;
    position: relative;
    z-index: 2;
}
.services_stext_dm{
    margin-top: 5px;
    position: relative;
    z-index: 2;
}

}