/* 共用 */

.mhhome { height:100px; }

.loading { background-color:#fff; position: fixed; top:0; left:0; width:100%; height:100%; z-index:10000; }
.loading img { width:auto; padding-top:30vh; }
/* 圖片淡入淡出 */
@keyframes showin {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

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

/* .logo { height:160px; width:160px; left:120px; } */
/* .logo img { padding-top:15px; width:auto; } */


/* .top .topbnr .bnr { width:100%; height:100vh; } */


.bnr2 { margin-top:40px; }
.bnr2 .ColItem .ColBg { overflow: hidden; border-radius: 5px; }
.bnr2 .ColItem .des { padding:20px; color:#474747; }
.bnr2 .ColItem .ColBg:hover .des { background-color:#8026a6; color:#fff; }

.homeArea2 { position:relative; padding:20px 0px; background-color:#f3f5f7; }
.homeArea2 .area { text-align:left; }
.homeArea2 .area .left { position: relative; }

/* .homeArea2 .area .right { padding-left:90px; padding-right:40px; } */
.homeArea2 .area .right { padding-left:10px; }
.homeArea2 .area .right .tit { color:#303030; font-size:1.5rem; }
.homeArea2 .area .right .tit:hover { color:#f77f00; }
.homeArea2 .area .right .cont { font-size:1.25rem; }

.homeArea2 .link { display: inline-block; border:1px solid #75c6d1; color:#75c6d1; padding:12px 35px; margin-top:20px; }
.homeArea2 .link i { margin-left:10px; }
.homeArea2 .link:hover { background-color:#8026a6; border:1px solid #8026a6; color:#fff; }
.homeArea2 .area .right { color:#474747; text-align: justify; }

.cournews { text-align:left; padding:20px 0px 40px; }
.cournews .title { text-align:left; }
.cournews .courses > a:first-child { margin-top:10px; }
.cournews .course { display: block; border-bottom:1px solid #dbe4ec ; text-align:left; padding:10px 0px; }
.cournews .course .date { padding-right:15px; }
.cournews .course .name { display:inline-block; width:calc(100% - 110px); font-size:1.125rem; color:#262626; vertical-align: middle; }
.cournews .course .name a { color:#262626; }
.cournews .course:hover > .name { color:#f77f00; }
.cournews .course .img { width:24px; padding:2px 0px; }
.cournews .link { font-size: 1rem; display: inline-block; color:#474747; border-bottom:1px solid #474747; }
.cournews .link i { margin-left:10px; }
.cournews .link:hover { color:#f77f00; border-bottom:1px solid #f77f00; }

.homeSearch { position: relative; height:80px; }
.searchArea { display: flex; justify-content: center; position: absolute; top:0px; left:12px; right:12px; padding:40px; background-color:#fff; box-shadow:8px 3px 20px rgba(104, 131, 141, 0.8); }
.searchArea .area { display: flex; align-items:center; padding:20px; background-color:#aebbc2; border-radius: 10px; margin-right:30px; }
.searchArea .area.bc2 { background-color:#004a86; }
.searchArea .area.last { margin-right:0px; padding:0px; }
.searchArea .area.last button { padding:25px; border-radius:10px; }
.searchArea .area label { font-size:1.25rem; color:#fff; }
.searchArea .area input { width:390px; padding:8px 10px; border:none; }
.searchArea .area button { font-size:1.25rem; padding:5px 15px; border:none; background-color:#004a86; color:#fff; }
.searchArea .area button:hover { background-color:#fecb00; color:#303030; }
.searchArea .area select { padding:8px 10px; width:210px; border:none; }

.outlink { padding-top:80px; padding-bottom:20px; background:url("./images/bg-link.jpg")no-repeat center center; background-size:cover; }
.outlink a { color:#fff; display: inline-block; }
.outlink a > div { margin-top:5px; }
.outlink a:hover { color:#ffc300; }
.outlink .icon { width:18px; }
.outlink .material-icons { font-size:18px; margin-top: 2px; margin-left: 6px; }


/* 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 (min-width:1200px){
    /* .homeArea2 .area .left { width:480px; } */
    /* .homeArea2 .area .right { width:calc(100% - 480px); } */

    .cournews .course .date { display:inline-block; }
}

@media (max-width:1199.98px){
    /* .logo { left:50px; } */
    .homeArea2 .area .right .cont { font-size:1.125rem; }

    .cournews .course .name { width:calc(100% - 25px); }
    .homeSearch { height:200px; }
    .searchArea { display: block; }
    .searchArea .area { margin-right:0px; margin-bottom:15px; }
    .searchArea .area.bc2 { display: inline-flex; justify-content: center; float:left; margin-right:15px; margin-bottom:0px; }
    .searchArea .area input { width:calc(100% - 70px); }
}

@media (max-width:1199.98px) and (min-width:992px){
    /* .homeArea2 .area .left { width:360px; } */
    /* .homeArea2 .area .right { width:calc(100% - 360px); } */
}

@media (min-width:992px){
    .cournews .row { margin-left:-30px; margin-right:-30px; }
    .cournews .row > div { padding:0px 30px; }
}

@media (max-width:991.98px){
    .homeArea1 .bnr1 .ColBg .des { padding:20px; }
}



@media (min-width:768px) and (max-width:991.98px){
    /* .homeArea2 .area .left { width:280px; } */
    /* .homeArea2 .area .right { width:calc(100% - 280px); padding-left:40px; padding-right:20px; } */
    .homeArea2 .area .right { margin-top:20px; }
}

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

@media (min-width:768px){
    .homeArea2 .area { display: flex; }
    .homeArea2 .area .left img { max-width:100%; width:auto; height:auto; }

    /* .homeArea2 .area .right .cont { min-height:120px; } */
}

@media (max-width:767.98px){
    .mhhome { height:60px; }

    .cournews { padding:60px 0px; }
    .cournews .course .date { padding:4px 0px; font-size:0.875rem; }
    .cournews .course .name { padding:0px; width:calc(100% - 10px); }

    .homeArea2 .area .left .tt { font-size:1.75rem; }
    .homeArea2 .area .right { margin-top:20px; padding: 0; }
    .homeArea2 .link { margin-top:0px; }

    .searchArea { left:15px; padding:30px; }
    .searchArea .area { padding:15px; }
    .searchArea .area input { width:calc(100% - 65px); padding:5px 10px; }
    .searchArea .area label { font-size:1rem; }
    .searchArea .area select { padding:5px 10px; width:150px; }
    .searchArea .area button { font-size:1rem; }
    .searchArea .area.last button { padding:20px; }

    .loading img { width:80px; }
}

@media (max-width:575.98px){
    .searchArea .area.mid { margin-bottom:15px; width:100%; }
    .searchArea .area.last { width:100%; }
    .searchArea .area.last button { width:100%; }
}