@charset "UTF-8";


/*初始設定*/

*{outline: none;word-break: break-all}

body{padding:0; margin:0; font-size:16px; font-family: 'Microsoft JhengHei',Arial;;}

img{ max-width: 100%; }

section{ padding: 5rem 0; }

a{color: #000; display: inline-block;}

a:hover{ color: #c6000b; text-decoration:none;}



/*bg-color*/

.bg_gery{background-color: #edf2f4; }



/*banner*/

.banner_box ul{ list-style: none; padding:0; margin:0;}

.banner_box{ width: 100%; height: 100%}



header{ /* position: absolute; top: 0; left: 0; */ width: 100%; background-color: #fff; display: flex; align-items: center; justify-content: flex-start; height: 82px;}



/*news_box*/

.index_title{ margin: 0 0 5rem; min-height: 200px; display: flex; align-items: center; align-content: center; justify-content: center; flex-wrap: wrap;}

.index_title h3{ font-size: 2.2rem; width: 100%; text-align: center; line-height: 1em; margin-bottom: 0; display: block;}

.index_title h3 span{ color: #c6000b;}

.index_title a{ display: inline-block; text-align: center; color: #999; font-size: .8rem;border: 1px solid #999;padding: 3px 7px; line-height: 1em; border-radius: 3px; }

.index_title a:hover{ border: 1px solid #000; background-color: #000; color: #fff;}



.index_title.ti_news_bg{ background: url('../images/bg_news_title.png') no-repeat center center; background-size: contain;}

.index_title.ti_zongtai_bg{ background: url('../images/bg_zongtai_title.png') no-repeat center center; background-size: contain;}



.group_item h4::before{ content: ''; display: block; position: absolute; left: 0; top: 0; height: 100%; width: 30px; background: url('../images/icon_red.png') no-repeat center center;}

.group_item p{ margin-top: 15px; margin-bottom: 30px;}



.news_box ul{ padding: 0; margin: 0 auto; list-style: none; max-width: 930px;}

.news_box ul li{ display: flex; align-items: center; justify-content: center; color:#2b2d42; margin-bottom: 2rem;}

.news_box ul li .test_box{ width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 20px;}

.news_box ul li .test_box p{ margin-bottom: 0; padding-right: 10px; display: block; white-space:nowrap;}

.news_box ul li .test_box::after{ content: ''; display: block; width: 100%; height: 1px; background-color: #bababa; margin-top: 1px;}

.news_box ul li a{ width: 100%; display: flex; justify-content: center;}

.news_box ul li span{ display: block; white-space:nowrap;}

.news_box ul li .news_more{display: block; text-align: right; font-size: .8rem; color:#000; white-space:nowrap; padding: 0 5px;}

.news_box ul li:hover .news_more{color: #c6000b;}



/*loading*/

    #loading_box {

        width: 100%;

        height: 100%;

        background-color: #000;

        position: fixed;

        z-index: 999999;

        left: 0;

        top: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-wrap: wrap;

    }



    .group_all{ text-align: center;}



    .group_all img{

        margin-bottom: 30px;

        display: block;

    }



    .loading {

        margin: 0 auto;

        display: flex;

        flex-flow: row nowrap;

        align-items: center;

        justify-content: space-between;

        width: 2em;

    }



    .loading span {

        width: 0.3em;

        height: 1em;

        background-color: #c6000b;

    }



    .loading span:nth-of-type(1) {

        animation: grow 1s -0.45s ease-in-out infinite;

    }



    .loading span:nth-of-type(2) {

        animation: grow 1s -0.3s ease-in-out infinite;

    }



    .loading span:nth-of-type(3) {

        animation: grow 1s -0.15s ease-in-out infinite;

    }



    .loading span:nth-of-type(4) {

        animation: grow 1s ease-in-out infinite;

    }



    @keyframes grow {



        0%,

        100% {

            transform: scaleY(1);

        }



        50% {

            transform: scaleY(2);

        }

    }



/*footer*/

footer{ background-color: #2b2b2b; color: #fff; text-align: center; padding:15px 0;}

footer p{ margin-bottom: 0; }



/**/

.gototop-button {

    border-radius: 4px 0 0 4px;

    bottom: 60px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

    line-height: 24px;

    padding: 8px 14px 9px;

    position: fixed;

    right: 0;

    z-index: 200;

    background-color: #c6000b;

    display: none;

}

.gototop-button i{ color: #fff; }





@media(min-width: 1100px){

    .logo_box{ width: 40%; }

    .right_box{ width: 60%; }

    .nav_box ul.sub_group li a{padding-bottom: 0; }

}



@media(min-width: 995px){

/*nav*/

.logo_box{ width: 30%; height: 100%; display: flex; justify-content: center; align-items: center;}

.right_box{ width: 70%; display: flex; justify-content: space-between; position: relative; height: 100%;}

.right_box::after{ content: ''; display: block; height: 12px; width: 100%; position: absolute; background-color: #000; bottom: 0; right:3px; transform:skewX(30deg); width: calc(100% - 3px);}

.right_box::before{ content: '';display: block; height: 12px; width: 100px; position: absolute; background-color: #000; bottom: 0; right:0;}

.search_icon{ width: 130px; height: 85%; text-align: right; display: flex; justify-content: flex-end; align-items: center;/*  padding-bottom: 18px; padding-right: 30px; */ cursor: pointer;position: absolute; z-index: 9999; right: 0; top: 0;}
/*.search_box{ display: flex; align-items: center; justify-content: flex-end; padding-bottom: 12px; position: absolute; right: 0; top: 82px;}*/
.search_box{
    width: 100%;
}
.search_icon.sopen{
    width: 350px !important;
    padding: 15px;
}


.nav_box{ flex: 1; }

.nav_box ul{ list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; height: 100%;width: 80%;}

.nav_box ul>li{ flex: 1; text-align: center; height: 100%; position: relative;}

.nav_box ul>li>a{ align-items: center; justify-content: center; padding-bottom: 12px; display: flex; height: 100%;}

.nav_box ul li:hover::after{ content: ''; display: block; height: 12px; width: 100%; position: absolute; background-color: #c6000b; bottom: 0; left:0; z-index: 99; transform:skewX(30deg);}

.nav_box ul li:hover ul.sub{ display: flex; }



.nav_box ul.bg_gray{ background-color: rgba(255,255,255,.8);}

.nav_box ul.sub{ position: fixed; width: 100%; z-index: 9; left: 0; height: auto; align-items: flex-start; justify-content: flex-start; display: flex;}

.nav_box ul.sub li:hover::after{ display: none;}

.nav_box ul.sub{ display: none; }



.nav_box ul.sub_group{ padding-left: 30%; padding-right: 12%;}

.nav_box ul.sub_group li{ flex: none; width: calc(100% / 7); text-align: left;}

.nav_box ul.sub_group li a{ height: 60px; padding:0;}



.nav_box ul.sub_about{ padding:1.5rem 20%; }

.nav_box ul.sub_about>li{ flex: none; width: calc(100% / 4); text-align: left;}

.nav_box ul.sub_about li a.titlename{ font-size: 1.7rem; text-align: left; margin-bottom: 15px;font-weight: bold;}

.nav_box ul.sub_about li a{ display: block; text-align: left;}

.nav_box ul.sub_about ul{flex-wrap: wrap;}

.nav_box ul.sub_about ul li{ width: 100%; flex:none;}

}



.search_icon.sopen{
    width: 250px;
    transition: all .3s;
    background-color: #fff;
}
.search_icon{ 
    transition: width .2s ease-in;
    border: 1px solid transparent;
    background-color: transparent;
    transition: all .3s;
    border-radius: 5px;
}
.search_icon .gsc-input:focus{    
    background: #fff;
}
.search_icon .gsc-control-wrapper-cse{ border: 2px solid transparent;}
.search_icon.sopen .gsc-control-wrapper-cse{ border: 2px solid #ddd; border-radius: 5px;}
form.gsc-search-box{
    margin-bottom:3px !important;
}
.search_box .cse .gsc-search-button-v2,
.search_box .gsc-search-button-v2{
    padding: 10px;
}
.search_box .gsc-search-button-v2, 
.search_box .gsc-search-button-v2:hover, 
.search_box .gsc-search-button-v2:focus{
    /*border-color: #aa1a1a;
    background-color: #c6050b;*/
    border-color: #fff;
    /*border-bottom-color: #eee;*/
    background-color: #ffffff;
}
.search_box input.gsc-input,
.search_box .gsc-input-box,
.search_box .gsc-input-box-hover,
.search_box .gsc-input-box-focus {
    border-color: #fff;
    border-bottom-color: #fff;
    padding: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;

}
.search_box .gsc-search-button{
    margin-left: -2px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.search_box .gsc-search-box-tools .gsc-search-box .gsc-input {
    padding-right: 0px;
}
.search_box .gsc-search-button-v2 svg {
    fill: #000000;
}
.search_box .gsc-control-cse{
	border-color: transparent;
	background-color: transparent;
	padding: 0;
}


@media(max-width: 994px){



.index_title h3{ line-height: .8em; }



/*menu*/

.mean-nav h1{font-size: 1rem; margin-bottom: 0; line-height: 1.5em;}

.logo_box{ position: absolute; top: 0; left: 20px; z-index: 9998; margin-top: 25px;}

.search_box{ 
    margin: 0 0 0 auto;
}

.search_icon{ 
    position: absolute; 
    top: 15px;
    right: 38px; 
    width: 100px;
    z-index: 9999;
    cursor: pointer;
    padding: 5px;
}





header{ height: 0; }



/**/

section{ padding: 3rem 0; }

.index_title{min-height: 100px; margin-bottom: 2.5rem;}

.news_box ul li .test_box p{ white-space:pre-wrap; }

.news_box ul li .test_box::after{ display: none; }

.news_box ul li{ border-bottom: 1px solid #bababa; padding-bottom: .5rem; margin-bottom: .5rem;}



.group_item h4{ font-size: 1.5rem; margin-bottom: 1rem; margin-top: 1rem;}



.news_box ul li .test_box p{ white-space: pre-wrap; }

}

.sub.hide{

    display: none !important;

}