/*修改*/
body{
    width: 100%;
    text-align: center;
    overflow-x: hidden;
    background: url(../images/bg.jpg) no-repeat top fixed #04c5cd!important ;
 }
a{ text-decoration: none; }
img { border:0; /*display: block; margin: auto;*/  }

.header{background-color: #197ebf !important;position: unset !important;}
.footer{background-color: #000 !important;}
.wrapper{background: url(../images/kv_bg.jpg) no-repeat top;}
.wrap-topview, .main-section{background-color: transparent !important;}
/*.main-section{margin-top: 5vh;}*/
.wrap-topview{position: relative;display: block;max-width: 2400px;max-height: 690px;overflow: hidden;}
.m-wrap-topview{display: none;}
.mobile{display: none;}
.pc{display: block;margin: 0 auto;}
.tab_arrow{width: 10%;}
.tab_arrow img{max-width: 100%;}

/* kv */
.title_kv{width: 1140px;height: 690px;margin: 0 auto;position: relative;z-index: 21;}
.kv{width: 100%;max-width: 567px;margin: 56px 0 137px 145px;margin: 7% 0 10% 10%;}
.kv_source{position: absolute;display: block;}
.sun{left: 5%;top: 10%;-webkit-animation: scaleDraw 1.5s ease-in-out infinite;z-index: 99;}
.star1{left: 5%;top: 50%;-webkit-animation: scaleDraw 2s ease-in-out infinite;z-index: 99;}
.star2{left: 60%;top: 50%;-webkit-animation: scaleDraw 2.8s ease-in-out infinite;z-index: 99;}
.flower{left: 46%;top: 34%;-webkit-animation: rotation 2s infinite linear;z-index: 99;}

/* 放大縮小 */
@keyframes scaleDraw {  /*定義關鍵幀、scaleDrew是需要繫結到選擇器的關鍵幀名稱*/
    0%{
        transform: scale(1);  /*開始為原始大小*/
    }
    25%{
        transform: scale(1.1); /*放大1.1倍*/
    }
    50%{
        transform: scale(1);
    }
    75%{
        transform: scale(1.1);
    }
}
.ballon{
    -webkit-animation-name: scaleDraw; /*關鍵幀名稱*/
    -webkit-animation-timing-function: ease-in-out; /*動畫的速度曲線*/
    -webkit-animation-iteration-count: infinite;  /*動畫播放的次數*/
    -webkit-animation-duration: 1.5s; /*動畫所花費的時間*/
}

/* 旋轉 */
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
    }

.bounce-in-left {
    -webkit-animation: bounce-in-left 1.1s both;
            animation: bounce-in-left 1.1s both;
            animation-delay: 0.3s;
}
@keyframes bounce-in-left {
  0% {
    -webkit-transform: translateX(-600px);
            transform: translateX(-600px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  55% {
    -webkit-transform: translateX(-68px);
            transform: translateX(-68px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
      opacity: 1;
}
  72% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateX(-28px);
            transform: translateX(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}


/*tabsBar*/
.m-tabsBox{display: none;}
.tabsBox, .m-tabsBox {
    padding: 0 !important;
    background-color: #f8c100;
}
.nav-tabs .nav-item a.nav-link{
    background-color: transparent !important;
    margin: 0.5rem;
    padding: 0.5rem 0 ;
    border-radius: 50px;
    font-size: 1.2rem;
}
.nav-tabs .nav-item a.nav-link{
    background-color: #FFF !important;
    border: 1px solid #FFF !important;
    color: #222 !important;
}
.nav-tabs .nav-item a.nav-link:active{
    background-color: #FFF !important;
    border: 1px solid #FFF !important;
    color: #222 !important;
}
.nav-tabs .nav-item a.nav-link:hover{
    background-color: #222 !important;
    border: 1px solid #222 !important;
    color: #fff !important;
}

.nav-tabs .nav-link{
    border: none !important;
}
.dropdown-toggle::after {
    content: none !important;
}

.dropdown {
    position: initial !important;
}

.nav-tabs .dropdown-menu {
    position: absolute;
    will-change: transform;
    top: 2px;
    left: 0px;
    transform: translate3d(0px, 65px, 0px) !important;
    width: 100% !important;
    padding: 0;
    float: none;
    background-color: #ec4f86;
    border: none;
    border-radius: 0;
}

.dropdown-item {
    float: left !important;
    width: 33.3% !important;
    clear: initial !important;
    padding: 0.5rem 0 !important;
    color: #FFF !important;
    text-align: center !important;
    background-color: #ec4f86 !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #dc3871 !important;
}

.contentBox{display: none;}
.contentBox.show{display: block;}
.contentBox .toppic-title {display: none;}

.toppic-pid-box{background-color: #FFF !important;text-align: center;}
.container .toppic-title{display: none;}

/*說明*/
.policyBox{background-color: #0a7ea0;}
.policy {padding: 0 1.5rem 2rem !important;}
.policy h3{border: 1px solid #fff;width: 30% !important;color: #fff !important;}
.policy .sub-title{font-weight: bold;font-size: 1.5rem !important;color: #ffd800;}
.policy ul li {list-style: disc inside!important;}
.policy ul .award_msg{color: #ffcc3e;}
.policy ul li span{color: #fff1a7; box-shadow: 0 1px;padding-bottom: 2px;font-weight: 600;}
.policy ul li a{color: #17c0fa;box-shadow: 0 1px;padding-bottom: 2px;/*font-weight: 600;*/}
.policy p b{color: #fff047;font-size: 1.2rem;}
.policy p{margin-top: 2vh;}


@media (max-width: 501px) {
    .m-navbarBox, .m-wrap-topview{
        display: block !important;
    }
    .m-navbarBox{
        position: absolute;
        z-index: 100;
        left: 0;
    }
}


/* RESPONSIVE
-------------------------------------------------- */
@media (min-width: 1200px) {
}

/* Between Medium and Small size 1366x 1281 */
@media(max-width: 1366px){
    .float {right: 3.3rem;}
}

/* Between Medium and Small size 1280x 800 */
@media(max-width: 1280px){
    .float {right: 1rem;bottom: 8rem;}
}

@media(max-width: 1198px){
}

/* iPad 橫式 1024x768 */
@media(max-width: 1025px){
    .nav-tabs .dropdown-menu{width: 192px;}
    .title_kv{width: 100%;height: auto;}
    .title_kv img{max-width: 100%;}
    .wrap-topview {height: auto;}
    .wrap-topview{display: none;margin-top:0 !important;}
    .m-wrap-topview{display: block;background: url(../images/bg_m.jpg) no-repeat top;background-size: contain;}
    .sun {top: 3%;width: 20%;}
    .flower {left: 50%;top: 30%;width: 13%;}
    .star1 {top: 28%;width: 10%;}
    .star2 {left: 55%;top: 70%;width: 10%;}
}
/* iPad 直式 size800x600 */
@media(max-width: 970px){
    .m-navbarBox{display: block;}
    .float{display: none !important;}
}

@media(max-width: 768px){
    .mobile{display: block;}
    .pc{display: none;}
    .title_kv_m{max-width: 100% !important;flex: 0 0 100% !important;/*padding: 2rem 0 0;*/}
    .title_kv{width: 100%;}

    .title_kv_m img{max-width: 100%;}
    .container {max-width: 100% !important;}
    .policy {padding: 0 1.2rem 2rem !important;}
}

/* APP and mobile */
@media (max-width: 500px){
	.container .toppic-title h3.m-title{display: block;}
	.container .toppic-title h3{font-size: 1.4rem !important;line-height: 1.1 !important;}
    .container .toppic-title{
        margin-bottom: -0.5rem !important;
        display: block;
        border-radius: 0 !important;
        background-color: #ffc89c !important;
    }
    .contentBox .toppic-title {margin-bottom: -0.5rem !important;display: block;}
	.toppic-pid-box h4{font-size: 1.2rem;padding: 0.3rem 0;}
	.toppic-pid-box{background-color: #fff!important;padding-top: 0.5rem !important;}
    .title_kv{width: 100%;height: auto;}
    .title_kv img{max-width: 100%;height: auto;}
    .policy h3 {font-size: 1.3rem !important;width: 80% !important;}
    .sun {top: 3%;width: 20%;}
    .flower {left: 50%;top: 30%;width: 13%;}
    .star1 {top: 28%;width: 10%;}
    .star2 {left: 55%;top: 70%;width: 10%;}
    .bounce-in-left {animation-delay: 0.8s;}

    /*副標*/
    .subtit{width: 71%;margin: 0 auto;}
    .subtit img{max-width: 100%;}

    /* tab */
    .tabsBox {display: none;}
    .m-tabsBox{display: block !important;}
    .nav-tabs .nav-item a.nav-link {
        padding: 0.2rem 0 !important;
        font-size: 0.9rem;
        border-radius: 10px;
        margin: 0.5rem;
    }
    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active{
        color: #FFF !important;
    }
    .dropdown-item:focus, .dropdown-item:hover{
        background-color: transparent !important;
    }
}