@charset "utf-8";
/* CSS Document */

.toptitle { display: none;}
.toptitle.mydisplay{ display: block;}
.myservice{ width: 100%; margin: 5% auto 0; }


.lineService{ width: 85%; margin: 0 auto 4%; font-size: 20px; font-family: Arial, Helvetica, "微軟正黑體";}
.item_head{ 
    margin-bottom: 5%; padding: 1.5% 2% 1.7%; background: #d8f5ee;  border-radius: 15px;
    text-align: center; font-size: 1.8em; color: #5fb2ab; position: relative;
}
.item_head span{ padding-right: 12px; color: #019b8e; font-weight: bold; }
.item_head b{ color: #c9a056; font-weight: normal;}
.item_head::after{ 
    content: ""; display: block; margin: 0 auto; width: 0; height: 0; 
    border: solid #d8f5ee; border-width: 20px 30px 0 30px;
    border-color: #d8f5ee transparent transparent transparent;
    position: absolute; top: 100%; left: 0; right: 0;
}
.item_head br{ display: none;}
.item_head br.br1{ display: block;}
.listBox{ display: flex; align-items: center; justify-content: flex-end;}
.listBox p span{ font-weight: bold; color: #17b3a0;}
.listBox ul.item_list { padding-left: 0; }
.listBox ul.item_list li{ list-style-type: decimal; margin-left: 3.5%; padding-bottom: 6px;}
.listBox ul.item_list ol{ margin-top: 2%; padding-left: 0; word-break: break-all;}
.listBox ul.item_list ol li{ list-style-type: disc; margin: 0 0 0 3.5%; }
.listBox ul.item_list ol li::marker{ color: #17b3a0;}
.listBox ul.item_list a{ color: #a75a03; text-decoration: none;}
.listBox ul.item_list a:hover{ color: #c28719;}
.listBox p.ps{ font-size: 0.85em; color: #838383;}
.listBox p.psred{ color: red; font-weight: bold;}
.listBox > div{ width: 77%;}
.listBox .codepic { width: 20%; margin-left: 3%; text-align: right;}
.listBox .codepic img{ width: 100%; max-width: 200px; margin: 0 auto; }
.listBox .codepic img:hover{ transform: translateY(2px); opacity: .85;}
.system_download{ display: none;}







/*------------------------------------------------------------------------*/

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

    .listBox{ flex-wrap: wrap;}    
    .item_head{ border-radius: 8px; font-size: 1.4em;}
    .item_head br{ display: block;}
    .item_head span{ padding-right: 0;}
    .listBox ul.item_list li,.listBox ul.item_list ol li{ margin-left: 4%;}
    .listBox > div{ width: 100%;}
    .listBox .codepic{ width: 100%; margin: 0 auto;}
    .listBox .codepic img{ display: none;}
    .system_download{ 
        display: block;
        width: 600px; margin: 3% auto; padding: 3% 2%; box-sizing: border-box; font-size: 1.3em;
        background-color: #1c9b90; box-shadow: 0 8px 0 #0c8076; border-radius: 99em;          
    }
    .system_download:hover{ background-color: #0bb1a3; box-shadow: 0 8px 0 #09a195; transform: translateY(1px);}
    .listBox .codepic a{ display: block; color: #fff; text-align: center; text-decoration: none;}



}

/*------------------------------------------------------------------------*/

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

    .myservice{ width: 90%; margin-top: 7%;}

    .lineService{ width: 100%; margin-bottom: 18%; font-size: 18px;}
    .item_head{ padding: 3% 3% 4%; margin-bottom: 8%;}
    .item_head::after{ border-width: 15px 20px 0 20px; }
    .listBox ul.item_list li,.listBox ul.item_list ol li{ margin-left: 7%;}
    .system_download{ width: 100%; }


}

/*------------------------------------------------------------------------*/

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

    .item_head{ padding: 3% 2% 4%; margin-bottom: 10%; font-size: 1.3em;}
}