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

body{
    overflow-x: hidden; 
    animation-name: fade-in;
    animation-duration:1s;
    animation-timing-function:ease-in;
    /*background-color: #fff9ef;*/

}
@keyframes fade-in{
    0%{
        opacity:1;
    }
    100%{
        opacity: 1;
    }
}

/*   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;
    }
}*/



/*----------------------------------------------------------*/
.mini_menu_box,.mini_menu{
    display: none;
}

.menu{
    
    position: absolute;
    width: 100%;
    z-index: 100;
    padding: 0 0px;
    top: 0;
}


/*.menu_height.fly_menu {
    padding-bottom: 99px;
}*/


.menu_box{
    margin: 0 auto;
}


.logo_box{
    width: 470px;
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
    transition: .5s;
}

.logo_box img{
    width: 100%;
}

.menu_bg{
    position: absolute;
    top: 0;
}



.i_box1{
    position: relative;
    margin-bottom: 70px;
    box-shadow: 0 0 10px #999;
}

.i_box1 img{
    width: 100%;
}

.i_box1_bg{
    position: absolute;
    width: 100%;
    bottom: -3%;
    left: 0;
    z-index: 1;
}


.i_box2{
    width: 1200px;
    margin: 0 auto;
    max-width: 90%;
    text-align: center;
}

.i_box2_star{
    display: inline-block;
    vertical-align: middle;
}

.i_box2_star img{
    display: inline-block;
}

.i_box2_center{
    display: inline-block;
    vertical-align: middle;
    margin: 0 30px;
}




.i_b2_star_1{ -webkit-animation: auto_star01 5s linear infinite;
  
                     animation: auto_star01 5s linear infinite;}


@keyframes auto_star01 {
  0%{transform:rotate(0deg);}
  30%{transform:rotate(360deg);}
  100%{transform:rotate(360deg);}

}


.i_b2_star_2{ -webkit-animation: auto_star02 5s linear infinite;
                
                     animation: auto_star02 5s linear infinite;}


@keyframes auto_star02 {
  0%{transform:rotate(0deg);}
  20%{transform:rotate(0deg);}
  50%{transform:rotate(360deg);}
  100%{transform:rotate(360deg);}

}


.i_b2_star_3{ -webkit-animation: auto_star03 5s linear infinite;
                
                     animation: auto_star03 5s linear infinite;}


@keyframes auto_star03 {
  0%{transform:rotate(0deg);}
  40%{transform:rotate(0deg);}
  70%{transform:rotate(360deg);}
  100%{transform:rotate(360deg);}

}



.i_b2_star_4{ -webkit-animation: auto_star04 5s linear infinite;
  
                     animation: auto_star04 5s linear infinite;}


@keyframes auto_star04 {
  0%{transform:rotate(0deg);}
  40%{transform:rotate(0deg);}
  70%{transform:rotate(-360deg);}
  100%{transform:rotate(-360deg);}

}


.i_b2_star_5{ -webkit-animation: auto_star05 5s linear infinite;
                
                     animation: auto_star05 5s linear infinite;}


@keyframes auto_star05 {
  0%{transform:rotate(0deg);}
  20%{transform:rotate(0deg);}
  50%{transform:rotate(-360deg);}
  100%{transform:rotate(-360deg);}

}


.i_b2_star_6{ -webkit-animation: auto_star06 5s linear infinite;
                
                     animation: auto_star06 5s linear infinite;}


@keyframes auto_star06 {
  0%{transform:rotate(0deg);}
  30%{transform:rotate(-360deg);}
  100%{transform:rotate(-360deg);}
  

}




.i_box2 h2{
    font-size: 28px;
    color: #555555;
    margin: 40px auto 20px auto;
    font-weight: 400;
}

.i_box2 h2 span{
    color: #fff;
    background-color: #099dfb;
    border-radius: 40px;
    padding: 3px 6px;
    margin: 0 10px;
}

.i_box2 h3{
    font-size: 28px;
    color: #555555;
    margin: 20px auto;
    font-weight: 400;
}

.i_box2 h3 span{
    color: #fff;
    background-color: #ec6d45;
    border-radius: 40px;
    padding: 3px 18px;
    margin: 0 10px;
}


.i_box3{
    width: 1400px;
    margin: 0 auto;
    max-width: 95%;
    text-align: center;
}

.i_box3_ul{
    margin: 80px auto;
}

.i_box3_ul li{
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: calc(33% - 24px);
    margin: 0 10px;
}

.i_box3_ul li img{
    margin: 0 auto 20px auto;
    max-width: 100%;
    border-radius: 20px;
}

.i_box3_ul li:nth-child(1) img{
    border: 5px #ec6d45 solid;
}

.i_box3_ul li:nth-child(2) img{
    border: 5px #95c447 solid;
}

.i_box3_ul li:nth-child(3) img{
    border: 5px #f2984f solid;
}

.i_box3_ul li h1{
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
}

.i_box3_ul li h2{
    font-size: 22px;
    color: #555555;
    line-height: 36px;
}


.i_box3_ul li:nth-child(1) h1{
    color: #ec6d45;
}

.i_box3_ul li:nth-child(2) h1{
    color: #95c447;
}

.i_box3_ul li:nth-child(3) h1{
    color: #f2984f;
}




.i_box4{
    background-image: url(../img/bg_dot_circle.png);
    background-position: center;
    width: 100%;
}

.i_box4_box{
    width: 1400px;
    margin: 0 auto;
    max-width: 95%;
    text-align: center;
    padding: 100px 0;   
}

.i_box4_box h1{
    font-size: 32px;
    color: #666;
    text-align: center;
}

.i_box4_box h2{
    font-size: 32px;
    color: #666;
    text-align: center;
    margin-top: 80px;
}


.i_box4_ul_01{
    margin: 30px auto;
}

.i_box4_ul_01 li{
    display: inline-block;
    vertical-align: middle;
    width: 150px;
    height: 150px;
    border-radius: 50%;
   /* border: 2px #a2cfeb solid;*/
    background-color: #eff5f9;
    color: #fff;
    font-size: 24px;
    text-align: center;
    padding: 50px 0;
    margin: 0 6px;
}

.i_box4_ul_01 li:nth-child(1),.i_box4_ul_01 li:nth-child(6){
    background-color:#ec6d45; 
}

.i_box4_ul_01 li:nth-child(2),.i_box4_ul_01 li:nth-child(7){
    background-color:#f2984f; 
}

.i_box4_ul_01 li:nth-child(3),.i_box4_ul_01 li:nth-child(8){
    background-color:#95c447; 
}

.i_box4_ul_01 li:nth-child(4){
    background-color:#099dfb; 
}

.i_box4_ul_01 li:nth-child(5){
    background-color: #a61ded;
}


.i_box4_ul_02{
    margin: 30px auto;
}

.i_box4_ul_02 li{
    display: inline-block;
    vertical-align: middle;
    width: 150px;
    height: 150px;
    border-radius: 20%;
    /*border: 2px #f2984f solid;*/
    background-color: #f9f5ef;
    color: #fff;
    font-size: 24px;
    text-align: center;
    padding: 50px 0;
    margin: 0 6px;
}

.i_box4_ul_02 li:nth-child(1),.i_box4_ul_02 li:nth-child(6){
    background-color:#ec6d45; 
}

.i_box4_ul_02 li:nth-child(2){
    background-color:#f2984f; 
}

.i_box4_ul_02 li:nth-child(3){
    background-color:#95c447; 
}

.i_box4_ul_02 li:nth-child(4){
    background-color:#099dfb; 
}

.i_box4_ul_02 li:nth-child(5){
    background-color: #a61ded;
}


.i_box5{
    width: 100%;
    margin: 0 auto;
    padding: 80px 0;
    text-align: center;
    background-color: #f7f7f7;
}

.i_box5_ul{
    margin: 20px auto;
    width: 1400px;
    max-width: 95%;
}


.i_box5_ul li{
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: calc(25% - 24px);
    margin: 0 10px;
}

.i_box5_ul li img{
    margin: 0 auto 30px auto;
    border-radius: 20px;
    box-shadow: 0 0 10px #ddd;
    max-width: 100%;
}

.i_box5_ul li h1{
    font-size: 24px;
    font-weight: 700;
    color: #ec6d45;
    border-radius: 50px;
    border: 3px #ec6d45 solid;
    padding: 8px 0;
}


.i_box6{
    width: 1400px;
    max-width: 95%;
    margin: 0 auto;
    padding: 80px 0;
    text-align: center;  
    overflow: hidden; 
}

.i_box6_img{
    display: inline-block;
    vertical-align: middle;
    width: calc(50% - 24px);
    margin: 0 10px;

}

.i_box6_img img{
    max-width: 100%;
}

.i_box6_map{
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 24px);
    margin: 0 10px;
}

.i_box6_map iframe{
    width: 100%;
    height: 400px;
}




.footer_box{
    background-color: #099dfb;
    text-align: center;
    padding: 50px 0;
}

.footer_box h1{
    color: #fff;
    font-size: 18px;
    margin-bottom: 15px;
}

.footer_box h2{
    color: #fff;
    font-size: 18px;
    margin-bottom: 20px;
}

.footer_box h2 a{
    color: #fff;
}

.footer_box h2 a:hover{
    color: #ffc000;
}

.footer_box h3{
    color: #333;
    font-size: 18px;

}

.footer_box h1 a{
    color: #333;
    font-size: 18px;
    margin-bottom: 15px;
    padding: 3px 15px;
    border-radius: 8px;
    transition: .5s;
    background-color: #ffc000;
    box-shadow: 0 0 0 0 #ffffffc4;
}

.footer_box h1 a:hover{
    color: #fff;
}

.footer_box h1 a{ -webkit-animation: footer_auto 1.5s linear infinite;
                     animation: footer_auto 1.5s linear infinite;}


@-webkit-keyframes footer_auto {
    0% {
        box-shadow: 0 0 0 0 #ffffffc4;
    }
    40%{
        box-shadow: 0 0 0 15 #ffffffc4;
    }
    80% {
        box-shadow: 0 0 0 15px #c55a5a00;
    }
    100% { 
        box-shadow: 0 0 0 0 #c55a5a00;
    }
}


.i_box6_contact{
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 24px);
    margin: 0 10px;
    padding: 0 30px;
}

.contact_box01{
    text-align: left;
}

.contact_box01 h1{
    display: block;
    color: #333;
    margin-bottom: 5px;
}

.contact_box01 h1 span{
    color: #f52e2e;
}

.contact_box_input01{
    font-size: 16px;
    padding: 6px 8px;
    border: 1px #ddd solid;
    border-radius: 3px;
    width: 100%;
    margin-bottom: 12px;
    font-family: Noto Sans TC,Microsoft JhengHei;
}

.contact_box_input02{
    font-size: 16px;
    padding: 6px 8px;
    border: 1px #ddd solid;
    border-radius: 3px;
    width: 100%;
    margin-bottom: 12px;
    font-family: Noto Sans TC,Microsoft JhengHei;   
}

.contact_box_input03{
    font-size: 16px;
    padding: 6px 8px;
    border: 1px #ddd solid;
    border-radius: 3px;
    width: calc(100% - 135px);
    margin-bottom: 0px;
    font-family: Noto Sans TC,Microsoft JhengHei;
    margin-right: 12px;
    display: inline-block;
    vertical-align: middle;
}


.contact_code{
    width: 115px;
    background-color: #ddd;
    height: 30px;
    display: inline-block;
    vertical-align: middle;

}


.contact_send{
    padding: 6px 15px;
    cursor: pointer;
    font-size: 18px;
    background-color: #428bca;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    margin: 20px auto;
    transition: .3s;
    display: block;
    width: 150px;
}

.contact_send:hover{
    background-color: #49a2ef;
}




.i_box7{
    width: 1400px;
    max-width: 95%;
    margin: 0 auto;
    padding: 80px 0 40px 0;
    text-align: center;  
    overflow: hidden; 
}

.i_box7_title{
    margin: 20px auto 40px auto;
    text-align: center;
    
    padding: 5px 20px 7px 20px;
    border-radius: 50px;
    display: inline-block;
    color: #fff;
    background-color: #099dfb;
    position: relative;
    /*border: 3px #ffc000 solid;*/
}

.i_box7_title p{
    display: inline-block;
    vertical-align: middle;
    font-size: 26px;
}

.i_b7_star_1{
    display: inline-block;
    vertical-align: middle;
}

.i_b7_star_1{ -webkit-animation: auto_star07-01 5s linear infinite;
  
                     animation: auto_star07-01 5s linear infinite;}


@keyframes auto_star07-01 {
  0%{transform:rotate(0deg);}
  30%{transform:rotate(360deg);}
  100%{transform:rotate(360deg);}

}

.i_b7_star_2{
    vertical-align: middle;
    display: inline-block;
}

.i_b7_star_2{ -webkit-animation: auto_star07-02 5s linear infinite;
  
                     animation: auto_star07-02 5s linear infinite;}


@keyframes auto_star07-02 {
  0%{transform:rotate(0deg);}
  30%{transform:rotate(-360deg);}
  100%{transform:rotate(-360deg);}

}



.i_box7_01,.i_box7_02{
    margin-bottom: 20px;
}

.i_box7_02 .i_box7_img02-1{
    display: none;
}

.i_box7_img{
    display: inline-block;
    vertical-align: middle;
    width: 370px;
    margin: 0 10px;
    position: relative;
}

.i_box7_img h1{
    position: absolute;
    top: 30px;
    left: -10px;
    background-color: #f2984f ;
    color: #fff;
    padding: 6px 30px;
    font-size: 22px;
}

.i_box7_img img{
    border-radius: 15px;
    border: 10px #96d4fb solid;
    width: 100%;
}

.i_box7_text{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 400px);
    text-align: left;
    padding-left: 25px;
    padding-top: 20px;
}

.i_box7_text h1{
    color: #95c447;
    font-size: 16px;
    margin-bottom: 5px;
}

.i_box7_text h2{
    color: #099dfb;
    font-size: 28px;
    margin-bottom: 10px;
}

.i_box7_text h4{
    color: #c25372;
    font-size: 18px;
    margin-top: 20px;
}