/* 共用 */
.title { color:#00419b; font-size:2rem; }
.link { color:#919191; display: inline-block; padding-bottom:25px; padding-right:90px; border-bottom:1px solid #919191; font-size:0.875rem; }
.link:hover { color:#ff4500; border-bottom:1px solid #ff4500; }
.loading { background-color:#fff; position: fixed; top:0; left:0; width:100%; height:100%; z-index:10000; }
.loading img { width:240px; margin-top:50vh; transform: translate(0,-50%); }
/* 圖片淡入淡出 */
@keyframes showin {
    0% { opacity: 0; }
    100% { opacity: 1; }
} 

@keyframes showout {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.top { position: relative; }
.top .topbnr .bnr { width:100%; height:100vh; }

.othopt { background-color:#00419b; padding:30px 0px; justify-content: center; align-items:center; }
.othopt .opt { margin:0px 25px; }
.othopt .opt .icon { width:60px; height:60px; }
.othopt .opt .content { padding-left:12px; padding-top:10px; text-align:left; }
.othopt .opt .content .name { color:#f6f6f6; }
.othopt .opt .content .en { color:#919191; font-size:0.875rem; }
.othopt .opt1 .icon { background:url("./images/ico-sp-1.png") no-repeat center center; background-size:60px; }
.othopt .opt2 .icon { background:url("./images/ico-sp-2.png") no-repeat center center; background-size:60px; }
.othopt .opt3 .icon { background:url("./images/ico-sp-3.png") no-repeat center center; background-size:60px; }
.othopt .opt4 .icon { background:url("./images/ico-sp-4.png") no-repeat center center; background-size:60px; }
.othopt .opt:hover .content .name { color:#ffd200; }
.othopt .opt:hover .content .en { color:#ffd200; }

.othopt .opt1:hover .icon { background:url("./images/ico-sp-1-b.png") no-repeat center center; background-size:60px; }
.othopt .opt2:hover .icon { background:url("./images/ico-sp-2-b.png") no-repeat center center; background-size:60px; }
.othopt .opt3:hover .icon { background:url("./images/ico-sp-3-b.png") no-repeat center center; background-size:60px; }
.othopt .opt4:hover .icon { background:url("./images/ico-sp-4-b.png") no-repeat center center; background-size:60px; }

.midbnr { display: flex; background-color:#f6f6f6; }
.midbnr .area { flex:1; display: flex; flex-direction: column; }
.midbnr .area.direv { flex-direction: column-reverse; }
.midbnr .area .BaseBnr { padding-top:360px; }
.midbnr .area img { width:auto; }
.midbnr .area .content { text-align:left; padding:80px; height:100%; }
.midbnr .area .content .tit { color:#00419b; font-size:1.5rem; }
.midbnr .area .content .cont { color:#474747; padding-top:20px; text-align:justify; }
.midbnr .area .link { position: absolute; bottom:80px; }

.product { padding:80px 0px 100px; background:url("./images/bg_p1.gif")no-repeat center bottom; }
.product .topType { display: flex; justify-content: space-between; margin-bottom: 10px; }

.product .pd { margin:20px 0px; padding:0px 15px; }
.product .pd .des { padding:20px; }
.product .pd .des a { text-decoration: none; }
.product .pd .des a:hover > .pdname { color:#ff4500; }
.product .pd .des .pdcls { color:#00419b; font-size: 0.875rem; margin-bottom: 8px;}
.product .pd .des .pdname { color:#474747; font-size:1.125rem; }

.case { height:480px; }

.news { padding:105px 0px; display: flex; text-align:left; }
.news .topType { width:calc(100% - 730px); }

.news .content { width:730px; color:#1b1b1b; }
.news .new { padding:20px 0px; display: flex; }
.news .new:not(:last-of-type) { border-bottom:1px solid #e2e2e2; }
.news .new .date { font-size:0.875rem; padding-right:60px; white-space: nowrap; }
.news .new .cont { display:inline-block; color:#1b1b1b; }
.news .new .cont:hover { color:#ff4500; }

.outlink { display: flex; }
.outlink > div { flex:1; }
.outlink .BaseArea:hover > .mask { background-color:#00419b; }
.outlink .mask { background-color:#000; opacity: 0.6; }
.outlink .content { display: flex; color:#fff; align-items:center; padding:0px 100px; text-align:left; }
.outlink .content .tit { font-size:1.5rem; letter-spacing: 3px; }
.outlink .content .cont { padding-top:25px; }
/* amination area init */
/* .cont, .prod,.btmbnr, .newcont { transform:translateY(100px); opacity: 0; } */
.upslideAni { animation:upslide 2s; transform:translateY(0px); opacity: 1; }
/* animation */
@keyframes upslide {
    0% { transform:translateY(100px); opacity: 0; }
    100% { transform: translateY(0px); opacity: 1; }
}


@media (max-width:1199.98px){
    .midbnr .area .BaseBnr { padding-top:300px; }
    .midbnr .area .content { padding:30px; }
    .midbnr .area .link { bottom:30px; padding-bottom:15px; }

    .case { height:420px; }

    .outlink .content { padding:0px 60px; }
    .outlink .content .cont { padding-top:15px; }
}

@media (max-width:1199.98px) and (min-width:992px){
    /* .top .topbnr .bnr { height:60vh; } */

}

@media (min-width:992px){
    
}

@media (max-width:991.98px){
    .case { height:350px; }

    .outlink { display: block; }
}



@media (min-width:768px) and (max-width:991.98px){
    .title { font-size:1.75rem; }

    .news .topType { width:calc(100% - 500px); }
    .news .content { width:500px; }
}

/* 手機橫寬991.98內 banner全版 */
/* @media (max-width:991.98px) and (orientation: landscape){
    .top .topbnr .bnr { height:100vh; }
} */


@media (min-width:768px){
    .news .topType .link { padding-top:40px; }
}

@media (max-width:767.98px){
    .title { font-size:1.5rem; }
    .link { padding-right:40px; padding-bottom:15px; }

    .midbnr { display: block; }
    .midbnr .area { display: block; }
    .midbnr .area .BaseBnr , .midbnr .area .BaseArea { position: static; padding:0px; }
    .midbnr .area img { width:100%; height:auto; }
    .midbnr .area .content .link { position:static; padding-top:40px; }

    .case { height:240px; }

    .news { display: block; padding:60px 0px; }
    .news .topType { width:100%; display: flex; justify-content: space-between; }
    .news .content { width:100%; }
    .news .new { display: block; }
    .news .new .cont { padding-top:10px; }

    .outlink .content { padding:0px 30px; }
    .outlink .content .tit { font-size:1.25rem; }
    .outlink .content .cont { padding-top:10px; }
}

@media(max-width:575.98px){
    .case { height:150px; }
}