﻿
@media only screen and (max-width: 1280px){
    .index-banner,
    .index_program-allinfo-box,
    .index_activity-allinfo-box,
    .header-box{
        width: calc(100% - 80px);
    }
    .index_program-program-top-download-one, 
    .index_program-program-top-downloadspeed{
        font-size: 50px;
    }
    .index_program-program-top-download_slash{
        font-size: 35px;
    }
    .index_program-program-top-upload-one,
    .index_program-program-top-uploadspeed{
        font-size: 30px;
    }
    .index_program-program-bottom-text-top, 
    .index_program-program-bottom-text-bottom{
        font-size: 15px;
    }
    .index_program-program-bottom-text-triangle{
        border-top-width: 20px;
        border-bottom-width: 20px;
        border-left-width: 5px;
    }
    .index_program-program-bottom-symbol{
        font-size: 25px;
        margin-top: 5px;
    }
    .index_program-program-bottom-money-one{
        margin-top: 5px;
        font-size: 55px;
    }
    .index_program-program-bottom-slash{
        font-size: 30px;
    }
    .index_program-program-bottom-month{
        font-size: 20px;
        line-height: 30px;
    }
    .index_program-title{
        font-size: 110px;
    }
    .index_program-phone{
        font-size: 40px;
        width: calc(100% - 440px);
        line-height: 60px;
    }
    .rwd-menu{
        left: calc(80px);
    }
    .index-banner-video-box{
        height: calc((1080 / 1920) * (100vw - 80px));
    }
}
@media only screen and (max-width: 1200px){
    .index_program-program-title-download,
    .index_program-program-title-downloadspeed,
    .index_program-program-title-money{
        font-size: 110px;
    }
    .index_program-program-top-download-one,
    .index_program-program-top-downloadspeed{
        font-size: 45px;
    }
    .index_program-program-top-download_slash{
        font-size: 30px;
    }
    .index_program-program-top-upload-one,
    .index_program-program-top-uploadspeed{
        font-size: 25px;
    }
    .index_program-program-bottom-text-box{
        margin-top: 5px;
    }
    .index_program-program-bottom-text-triangle{
        margin-top: 5px;
    }

    .index_program-program-bottom-symbol{
        font-size: 20px;
    }
    .index_program-program-bottom-money-one{
        font-size: 50px;
        line-height: 30px;
    }
    .index_program-program-bottom-slash{
        font-size: 25px;
        line-height: 10px;
    }
    .index_program-program-bottom-month{
        font-size: 15px;
        line-height: 10px;
    }    
    .index_program-program-title-download_slash,
    .index_program-program-title-upload, 
    .index_program-program-title-uploadspeed, 
    .index_program-program-title-uploaz_symbol,
    .index_program-program-title-month_slash{
        font-size: 50px;
    }
}
@media only screen and (max-width: 1000px){
    .index-banner,
    .index_program-allinfo-box,
    .index_activity-allinfo-box,
    .header-box{
        width: 100%;
    }
    .index_phone i,
    .index_phone span{
        line-height: 70px;
    }
    .index_activity-allinfo-box{
        padding-top: 20px;
    }
    .index_activity-title-box{
        opacity: 1;
    }
    .index_program-program-title-download,
    .index_program-program-title-downloadspeed,
    .index_program-program-title-money{
        font-size: 100px;
    }
    .index_program-program-title-upload,
    .index_program-program-title-uploadspeed,
    .index_program-program-title-uploaz_symbol{
        font-size: 60px;
    }
    .index_program-allinfo{
        padding: 0 0;
        margin-left: 3%;
    }
    .index_activity-activity-title, 
    .index_activity-explanatory-title{
        font-size: 24px;
    }
    .index_line,
    .index_phone{
        width: 70px;
        height: 70px;
    }
    .index_phone{
        margin-top: 75px; 
    }
    .index_phone i{
        font-size: 40px;
    }
    .news-list-box .slick-prev:before,
    .news-list-box .slick-next:before{
        font-size: 50px;
    }
    .news-list-box .slick-prev{
        left: 10px;
    }
    .news-list-box .slick-next{
        right: 10px;
    }
    .index_program-title-box{
        display: flex;
        flex-direction:column-reverse;
    }
    .index_program-phone{
        margin-top: 10px;
        display: block;
        width: 100%;
        line-height: initial;
        text-align: left;
    }
    .index_program-phone span{
        display: inline-block;
        vertical-align: middle;
    }
    .index_program-phone a{
        display: inline-block;
        vertical-align: middle;
        margin-left: 20px;
    }
    .rwd-menu{
        left: calc(40px);
    }
    .index-banner-video-box{
        width: 90%;
        display: block;
        margin: 0 auto;
        height: calc((1080 / 1920) * (100vw - 10vw));
    }
    .index-banner-img-box{
        width: 90%;
        display: block;
        margin: 0 auto;
        margin-top: 20px;
    }
    .index-banner{
        box-shadow: none;
    }
    .news-box{
        background-color: #fff;
    }
}
@media only screen and (max-width: 900px){
    .index_program-program-top, 
    .index_program-program-bottom{
        padding: 0;
        box-sizing: inherit;
    }
}
@media only screen and (max-width: 768px){
    .index_program-program-top-download-one, 
    .index_program-program-top-downloadspeed{
        font-size: 40px;
    }
    .index_program-program-top-download_slash{
        font-size: 25px;
    }
    .index_program-program-top-upload-one,
    .index_program-program-top-uploadspeed{
        font-size: 20px;
    }
    .index_program-program-bottom-symbol{
        font-size: 15px;
    }
    .index_program-program-bottom-money-one{
        font-size: 40px;
    }
    .index_program-program-bottom-slash{
        font-size: 20px;
    }
    .index_program-program-bottom-month{
        font-size: 10px;
    }
}
@media only screen and (max-width: 700px){
    .index_program-title{
        font-size: 100px;
    }
    .index_program-program-title-download, 
    .index_program-program-title-downloadspeed, 
    .index_program-program-title-money{
        font-size: 80px;
    }
    .index_program-program-title-download_slash{
        font-size: 40px;
    }
    .index_program-program-title-upload, 
    .index_program-program-title-uploadspeed, 
    .index_program-program-title-uploaz_symbol{
        font-size: 40px;
    }
    .index_program-program-title-month_slash{
        font-size: 30px;
    }
    .index_program-program-top-download-one, 
    .index_program-program-top-downloadspeed{
        font-size: 35px;
    }
    .index_program-program-top-download_slash{
        font-size: 20px;
    }
    .index_program-program-top-upload-one,
    .index_program-program-top-uploadspeed{
        font-size: 15px;
    }
    .index_program-program-bottom-text-top, 
    .index_program-program-bottom-text-bottom{
        font-size: 15px;
    }
    .index_program-program-bottom-text-triangle{
        border-top-width: 20px;
        border-bottom-width: 20px;
    }
    .index_program-program-bottom-money-one{
        font-size: 35px;
        line-height: 22px;
    }
    .index_program-program-bottom-slash{
        font-size: 15px;
    }
    .index_program-program-bottom-month{
        font-size: 10px;
    }
    .index_program-phone{
        font-size: 26px;
    }
}
@media only screen and (max-width: 600px){
    .index_program-title{
        font-size: 80px;
    }
    .index_program-program-title-download, 
    .index_program-program-title-downloadspeed, 
    .index_program-program-title-money{
        font-size: 60px;
    }
    .index_program-program-title-download_slash{
        font-size: 40px;
    }
    .index_program-program-title-upload, 
    .index_program-program-title-uploadspeed, 
    .index_program-program-title-uploaz_symbol{
        font-size: 40px;
    }
    .index_program-program-title-month_slash{
        font-size: 40px;
    }
    .index_program-program-title-month{
        font-size: 10px;
    }
    .index_program-program-top-download-one, 
    .index_program-program-top-downloadspeed{
        font-size: 24px;
    }
    .index_program-program-top-download_slash{
        font-size: 12px;
    }
    .index_program-program-top-upload-one,
    .index_program-program-top-uploadspeed{
        font-size: 12px;
    }
    .index_program-program-bottom-text-top, 
    .index_program-program-bottom-text-bottom{
        font-size: 12px;
    }
    .index_program-program-bottom-text-triangle{
        border-top-width: 17px;
        border-bottom-width: 17px;
        border-left-width: 5px;
    }
    .index_program-program-bottom-symbol{
        font-size: 10px;
    }

    .index_program-program-bottom-text-box{
        margin-left: 0;
    }
    .index_activity-explanatory-text{
        font-size: 10px;
    }
    .index_activity-activity-title, 
    .index_activity-explanatory-title{
        font-size: 14px;
    }
    .index_line,
    .index_phone{
        width: 60px;
        height: 60px;
    }
    .index_phone{
        margin-top: 65px;
    }
    .index_phone i{
        font-size: 30px;
    }
    .index_phone:hover{
        width: 145px;
        font-size: 12px;
    }
    .index_phone i, .index_phone span {
        line-height: 60px;
    }
    .index_phone:hover{
        border-radius: 5px;
    }
}
@media only screen and (max-width: 550px){
    .index_program-program-bottom-money-one{
        font-size: 24px;
        line-height: 18px;
    }
    .index_program-phone{
        font-size: 20px;
    }

    .header-logo{
        width: 167px;
    }
    .rwd-menu{
        top: 17px;
    }
    .rwd-menu,
    .rwd-menu.active{
        left: 10px;
    }
    .header-info-box{
        width: 200px;
    }
    .header-info-box li{
        width: 100px;
    }
    .header-info{
        width: 80px;
        height: 80px;
    }
    .header-info p{
        font-size: 16px;
    }
    .header-info i{
        font-size: 20px;
    }
    .header-info-box li:nth-child(3) .header-info i, 
    .header-info-box li:nth-child(4) .header-info i {
        font-size: 22px;
    }
    .header-menu ul{
        width: 260px;
    }
    .index-banner{
        padding-top: 54px;
        padding-bottom: 20px;
    }
    .service-list-title{
        font-size: 20px;
    }
    .service-info-box{
        margin-top: 20px;
    }
    .service-info,
    .service-list {
        width: 260px;
    }
    .service-info p{
        font-size: 18px;
        margin-right: 10px;
    }
    .service-info span{
        font-size: 16px;
    }
    .service-list{
        margin-top: 10px;
    }
    .service-list p{
        font-size: 16px;
    }
    .service-list span{
        font-size: 14px;
    }
    .service-list-img {
        margin-top: 40px;
    }
}
@media only screen and (max-width: 500px){
    .index_program-program-bottom-text-box{
        padding: 2px 0;
    }
    .index_program-program-bottom-text-triangle{
        border-top-width: 14px;
        border-bottom-width: 14px;
        border-left-width: 5px;
    }
    .index_program-program-bottom-symbol{
        margin-left: 1px;
    }
    .index_program-program-box{
        padding: 5px 5px;
        border-width: 2px;
    }
    .news-list-box .slick-prev:before,
    .news-list-box .slick-next:before{
        font-size: 30px;
    }
}
@media only screen and (max-width: 450px){
    .index_program-program-title-download, 
    .index_program-program-title-downloadspeed, 
    .index_program-program-title-money{
        font-size: 50px;
    }
    .index_program-title{
        font-size: 55px;
    }
    .index_program-program-title{
        line-height: 40px;
    }
    .index_activity-activity-title, 
    .index_activity-explanatory-title{
        font-size: 12px;
    }
    .index_program-program-bottom-text-triangle{
        display: none;
    }
    .index_program-program-bottom-text-box{
        display: block;
        width: 80%;
        margin: 5px auto;

    }
    .index_program-program-bottom-text-top, 
    .index_program-program-bottom-text-bottom{
        
        display: inline-block;
    }

    .header-title-box a{
        font-size: 24px;
    }
}
@media only screen and (max-width: 400px){
    .index_program-program-top-download-one, 
    .index_program-program-top-downloadspeed{
        font-size: 16px;
    }
    .index_program-program-title-download_slash,
    .index_program-program-title-upload, 
    .index_program-program-title-uploadspeed, 
    .index_program-program-title-uploaz_symbol,
    .index_program-program-title-month_slash{
        font-size: 24px;
    }
    .index_program-program-title-download, 
    .index_program-program-title-downloadspeed, 
    .index_program-program-title-money{
        font-size: 44px;
    }
    .index_line,
    .index_phone{
        width: 40px;
        height: 40px;
    }
    .index_phone{
        margin-top: 45px; 
    }
    .index_phone i{
        font-size: 14px;
    }
    .index_phone i, .index_phone span {
        line-height: 40px;
    }
}



/*淡入*/
@-webkit-keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
  }
@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*右邊快速進入*/
@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(20%, 0, 0);
        transform: translate3d(20%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(20%, 0, 0);
        transform: translate3d(20%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/*左邊進入*/
@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/*上方進入*/
@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -20%, 0);
        transform: translate3d(0, -20%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -20%, 0);
        transform: translate3d(0, -20%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}


/*下方進入*/
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}



@media only screen and (min-width: 1001px){
    .service-list-title,
    .header-title-box,
    .header-info-box li,
    .index-banner-video-box,
    .index-banner-img-box,
    .index_program-info,
    .index-pages-name-block,
    .index-pages-editor-block,
    .service-info-box,
    .service-list,
    .service-list-img,
    .news-list-box,
    .protection-list-box{
        opacity: 0;
    }
    .service-list-title.anima,
    .news-list-box.anima,
    .protection-list-box.anima{
        animation: fade 1s ease 0s 1 both;
    }
    .header-title-box.anima{
        animation: fade 1s ease 0.2s 1 both;
    }
    .header-info-box li.anima,
    .service-list-img{
        animation: fadeInUp 1s ease 0.4s 1 both;
    }
    .index-banner-video-box.anima{
        animation: fade 1s ease 0.5s 1 both;
    }
    .index-banner-img-box.anima{
        animation: fade 1s ease 0.5s 1 both;
    }
    .index_program-info.anima{
        animation: fadeInUp 1s ease 0s 1 both;
    }
    .index-pages-name-block.anima,
    .index-pages-editor-block.anima,
    .service-info-box.anima{
        animation: fadeInUp 1s ease 0s 1 both;
    }
    .service-list{
        animation: fadeInUp 1s ease 0.2s 1 both;
    }
}