@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
body{width: 100%; font-size:13px; font-family: Microsoft JhengHei,Arial, Helvetica,sans-serif,nsimsun; color:#333; position:relative;}
a{ color:#333;  }
a:hover{ color:#488fde;}
* { 
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}
  
/*   html{
    overflow-y: hidden; 
    position:static;
} */

/*body{
    animation-name: fade-in;
    animation-duration:1s;
    animation-timing-function:ease-in;
}
@keyframes fade-in{
    0%{
        opacity:0;
    }
    100%{
        opacity: 1;
    }
}*/




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

/*#wrapper{
    margin: 0 auto;
    width: 1280px;

    text-align: left;
}*/

.certification_box{
    position: absolute;
    top: -120px;
    right: 0px;
    width: 100px;
}

.certification_box img{
    width: 100%;
    animation: c_auto 5s infinite;
    transform:rotate(30deg);
}

@-webkit-keyframes c_auto {


    50%{
        transform:rotate(30deg);
    }
    65%{
        transform:rotate(20deg);
    }
    80%{
        transform:rotate(30deg);
    }

}


.i_box_0 {
    background:rgba(15, 15, 15, 0.4);
    margin: 0 auto;
    display: block;
    float: middle;
    clear: both;
    width: 100%;
    min-width: 1280px;
    position: absolute;
    top: 0;
}

.i_box_0-1{
    width: 1280px;
    margin: 0 auto;
    padding:18px 0;
}

.i_box_0-1 h1{
    display: inline-block;
    color: #fff;
    width: 100px;
    text-align: center;
}

.i_box_0-1 h2{
    display: inline-block;
    color: #fff;
    width: calc(100% - 105px);

}



.i_box_1{
    display: block;
    background: #0c1534;
    background: -moz-linear-gradient(126deg, #5f1a1a 0%, #6859ea 100%);
    background: -webkit-linear-gradient(126deg, #5f1a1a 0%,#6859ea 100%);
    background: linear-gradient(126deg, #5f1a1a 0%,#6859ea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c1534', endColorstr='#6859ea',GradientType=1 );
    
    width: 100%;
    min-width: 1280px;
    padding-top: 30px

}

.i_box_1-1 {
    width: 1280px;
    margin: 0 auto;
    text-align: center;
    display: block;

}

.time_box{
    text-align: left;
    padding-bottom: 30px;
}

.b1_time{
    color: #fff;
    display: inline-block;
}

.logo_box{
    padding: 50px 0 10px 0;
}

.logo_box span{
    color: #fff;
    display: inline-block;
    padding-right: 10px;
}

.logo_box1{
    display: block;
    height: 220px;
    position: relative;
}

.logo_a{
    display: inline-block;
    text-align: left;
    float: left;
}

.logo_a img{
    text-align: left;
}

.logo_code{
    float: right;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 20px;
    width: 330px;
    text-align: left;
}

.logo_code img{
    width: 130px;
    margin: 0 auto;
    display: inline-block;
    animation: code_auto 1.5s infinite;
}

@-webkit-keyframes code_auto {
    0% {
        
        box-shadow: 0 0 0 0 #feb42bb3;
    }

    40%{
        box-shadow: 0 0 0 20 #feb42bb3;
    }

    60%{
        
    }

    80% {
        box-shadow: 0 0 0 15px #c55a5a00;
    }

    100% {
        
        box-shadow: 0 0 0 0 #c55a5a00;
    }
}


.logo_code_text{
    display: inline-block;
    padding: 10px 0 0 20px;
    vertical-align: top;
}

.logo_code h1{
    font-size: 16px; 
    color: #bbb;
    padding-top: 10px;
}

.logo_code h2{
    font-size: 20px; 
    color: #fff;
    padding-bottom: 20px;
    font-weight: 700;
}

.logo_code h3{
    font-size: 16px; 
    color: #eee;
}


.i_banner{
    display: block;
/*    width: 100%;*/
}

.i_box_2 {
    background: #5b247a;
    background: -moz-linear-gradient(-45deg, #5b247a 0%, #6859ea 100%);
    background: -webkit-linear-gradient(-45deg, #5b247a 0%,#6859ea 100%);
    background: linear-gradient(135deg, #5b247a 0%,#6859ea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b247a', endColorstr='#6859ea',GradientType=1 );
    /*width: 1920px;*/
    /*max-width: 1280px;*/
    text-align: center;
    margin: 0 auto;
    display: block;
    float: middle;
    clear: both;
    width: 100%;
    min-width: 1280px;
}

.i_box_2_ul{
    width: 1280px;
    margin: 0 auto;
}

.i_box_2_ul li{
    display: inline-block;
    width: calc(25% - 4px );
    vertical-align: top;
    padding: 50px 0;
}

.i_box_2_ul li h1{
    font-size: 24px;
    line-height: 36px;
    color: #ccc;
    text-align: center;
    padding-bottom: 20px;
}

.i_box_2_ul li h2{
    font-family: 'Roboto-Light', sans-serif;
    text-align: center;
    color: #fff;
    font-size: 80px;
    line-height: 100px;
    position: relative;
}

.i_box_2_ul li h2 span {
    font-size: 16px;
    color: #fff;
    right: 45px;
    bottom: 15px;
    line-height: 26px;
    font-family: Microsoft JhengHei,Arial, Helvetica,sans-serif,nsimsun;
    position: absolute;
    text-align: left;
}


.i_box_2_ul li h2 p {
    font-size: 50px;
    color: #fff;
    right: 45px;
    bottom: 43px;
    line-height: 26px;
    font-family: Microsoft JhengHei,Arial, Helvetica,sans-serif,nsimsun;
    position: absolute;
    text-align: left;
}

.i_box_2_ul li h3{
    font-size: 16px;
    line-height: 24px;
    color: #eee;
    text-align: center;
}



.i_box_3 {
    background:#f6f6f6;
    margin: 0 auto;
    display: block;
    float: middle;
    clear: both;
    width: 100%;
    min-width: 1280px;
}

.i_box_3-1{
    width: 1280px;
    margin: 0 auto;
    padding:50px 0 30px 0;
}

.b3_1{
    width: 150px;
    display: inline-block;
    vertical-align:top;
}

.b3_2{
    width: 190px;
    display: inline-block;
    vertical-align:top;
    text-align: center;
}

.b3_3{
    width: 190px;
    display: inline-block;
    vertical-align:top;
    text-align: center;
}

.b3_4{
    width: 450px;
    display: inline-block;
    vertical-align:top;
    text-align: center;
}

.b3_5{
    width: 270px;
    display: inline-block;
    vertical-align:top;
}





.box_3_ul-1 li{
    padding: 0 0 25px 0;

}

.box_3_ul-1 li a{
    color: #656565 ;
    font-size: 16px;
    
}


.b3_2 h1{
    color: #656565 ;
    padding-bottom: 10px;
}

.b3_2 img{
    width: 160px;
    margin: 0 auto;
}

.b3_3 h1{
    color: #656565 ;
    padding-bottom: 10px;
}

.b3_3 img{
    width: 160px;
    margin: 0 auto;
}

.b3_4 h1{
    color: #656565 ;
    padding-bottom: 10px;
}

.b3_4 ul{
    padding: 20px 0; 
}

.b3_4 ul li{
    display: inline-block;
    text-align: center;
    color: #656565;
    width: 130px;
}

.b3_4 ul li img{
    text-align: center;
    margin: 0 auto;
}

.b3_4 ul li h2{
    text-align: center;
    color: #656565;
    padding-top: 5px;
}

.b3_5-1{

}

.b3_5-1 a{
    border-radius: 4px;
    color: #fff;
    background: #1388ef;
    padding: 10px 20px;  
    margin-bottom: 10px;
    width: 230px;  
    transition: .3s;
    display: block;
}

.b3_5-1 a:hover{
    opacity: .8;
}

.b3_5-1 a img{
    display: inline-block;
}

.b3_5-1 a h1{
    font-size: 20px;
    display: inline-block;
    vertical-align: top;
    padding: 8px 0 0 5px;
}

.b3_5-2 a{
    color: #1388ef;
    border: 2px solid #1388ef;
    border-radius: 4px;
    padding: 10px 20px;
    width: 230px;
    transition: .3s;
    display: block;
}

.b3_5-2 a:hover{
    opacity: .8;
}

.b3_5-2 a img{
    display: inline-block;
}

.b3_5-2 a h2{
    font-size: 20px;
    display: inline-block;
    vertical-align: top;
    padding: 3px 0 0 5px;
    color: #1388ef;
}

.b3_5-2 a h2 span{
    font-size: 16px;
    line-height: 24px;
    color: #999;
    display: block;
}



.i_box_4 {
    background:#eee;
    margin: 0 auto;
    display: block;
    float: middle;
    clear: both;
    width: 100%;
    min-width: 1280px;
}

.i_box_4-1{
    width: 1280px;
    margin: 0 auto;
    padding:20px 0;
}



.i_box_4-1 img{
    width: 100%;
    margin: 0 auto;
}