*{font-family: '微軟正黑體', 'Microsoft Jhenghei', 'Arial', sans-serif;box-sizing: border-box;
   }
body{overflow-x:hidden;background: url('../images/master_bg.jpg') repeat-y center;background-size:100%;background-attachment: fixed;background-position: 0 20px;
     }
html {font-size:16px;}
h1, h2, h3, h4, h5, h6 { font-weight: 600;clear: both;}
h1{line-height: 3.6rem;}
h2{line-height: 2.6rem;}
h3{line-height: 2.2rem;}
h4{line-height: 2.6rem;}
h5{line-height: 2rem;}
a{ text-decoration: none;color: #2a2a2a;transition: all .2s linear; }
a:hover{ text-decoration: none;color: #000000; }

button{outline:none;}
button:focus{outline:none;}
br {  line-height: 150%; }
dl, ol, ul {
    list-style: none;
}

/*bootstrapt 間距設定*/
/* .container {padding-right:10px;padding-left: 10px;} */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { padding-right: 15px; padding-left: 15px; }

/* RWD 整體寬度調整*/
header div.content {  position: relative; }
div.content { width: 1200px; margin: auto; clear: both;}
header, section { width: 100%; margin: 0; clear: both; padding: 0;}
section p,section li{  margin-bottom: 0rem;font-size: 1rem;line-height: 2rem;font-weight: 500;letter-spacing:2px }
section b{  margin-bottom: 0rem;font-size: 1.1rem;line-height: 1.8rem;font-weight: 800;letter-spacing:2px }


/* youtube 影片 */
.video-width { width:100%; margin: 0 auto;border: 10px solid rgb(0, 0, 0); }
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0;left: 0; width: 100%; height: 100%;}

/* owl輪播點點修正 */
.owl-carousel span { width:10px; height:10px; margin:5px 7px; background: #ffffff !important; display:block; -webkit-backface-visibility:visible; -webkit-transition:opacity 200ms ease; -moz-transition:opacity 200ms ease; -ms-transition:opacity 200ms ease; -o-transition:opacity 200ms ease; transition:opacity 200ms ease; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; }
.owl-carousel .active span { width:10px; height:10px; margin:5px 7px; background: #4faec9 !important; display:block; -webkit-backface-visibility:visible; -webkit-transition:opacity 200ms ease; -moz-transition:opacity 200ms ease; -ms-transition:opacity 200ms ease; -o-transition:opacity 200ms ease; transition:opacity 200ms ease; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; }
.search_left{top:50%;left: -30px;position: absolute;color: #b3b3b3;font-size: 2rem;transition: .4s;}
.search_left:active{color: #d1d1d1;}
.search_right{top:50%;right: -30px;position: absolute;color: #b3b3b3;font-size: 2rem;transition: .4s;}
.search_right:active{color: #d1d1d1;}

/* 基本操作 */
.row{position: relative;z-index: 999;}
.text_center{text-align: center;}
.text_left{text-align: left;}
.flex{display: flex;}
.clear{clear: both;}
.h20{margin: 20px 0 0;}
.h50{margin: 50px 0 0;}
.h100{margin: 100px 0 0;}
.n30{margin: -30px 0;}

/* 大標 */
.row_hight{margin:100px 0 0;}
section .content .title  h2{ margin: 0 0 30px 0;text-align: center;line-height: 2.4rem;background-size: cover;} 
/* div.content { margin: 20px auto; } */
section .page_title{text-align: center;}
section .page_title .title_icon{width: 5%;margin: 40px auto 5px;}
section .page_title h2{ color:#166377;}
section .page_title h4{ color:#0a8bac;}
section .page_title h5{ text-align: justify;margin-bottom: 0rem;}
section .page_title p{ text-align: justify;margin-bottom: 0rem;}







/* 改變wow搖晃重心 */
.swing{transform-origin:center bottom;}


/* 主視覺 */
header#Visual {position: relative;background:url('../images/bg2.png') repeat-x -5px -60px;}
header#Visual > .container-fluid{width: 100%;}
.master{width: 70%;margin: 0 auto;}
.master > .master_rudder{width: 25%;margin: 0 auto;animation: rudder 30s ease infinite;padding: 15px 0 0;}
.master > .master_title {width: 100%;margin: -60px 0 0;}
.master > .master_subtitle {width: 100%;text-align: center;color:#166377;position: relative;}
.master > .master_subtitle i {font-size: 1.2rem;transform: translate(0px,-7px);margin:0 5px;}
.master > .master_subtitle::before {content:'';background:url('../images/line.svg') repeat-x -2px 0px;top:20%;left:0;width:40%;height:12px;position: absolute;border-radius: 30px;overflow: hidden;}
.master > .master_subtitle::after {content:'';background:url('../images/line.svg') repeat-x -2px 0px;top:20%;right:0;width:40%;height:12px;position: absolute;border-radius: 30px;overflow: hidden;}
    
@keyframes rudder{
    0%{
        transform: rotate(0deg);
    }
    90%{
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.master_subtitle2{position: relative;height: 300px;width: 80%;margin: 0 auto;}
.master_subtitle2_img{position: absolute;width: 100%;z-index: 1;}
.master_subtitle2_pointer{position: absolute;right:-3%;top:40%;z-index: 3;width: 8%;}
.master_subtitle2_leaf{position: absolute;left:-5%;top:45%;z-index: 3;width: 12%;}



/* PageA 內容設定*/
section#PageA{ position: relative;}
.pageA_btn_all{display: flex;justify-content: flex-end;margin: 15px 0 0;}
.pageA_btn{background-color:rgba(39, 161, 163, 0.5);width: 20%;height: 40px;border-radius: 20px 20px 0 0;color: #ffffffd8;text-align: center;cursor: pointer;transition: all .3s linear;}
.pageA_btn p{font-weight: 800;line-height: 40px;font-size: 1.1rem;}
.pageA_btn:hover{background-color: rgb(70, 183, 185);}
.pageA_btn:active{background-color: rgb(70, 183, 185);}
.pageA_btn.active{background-color: rgb(70, 183, 185);}
.pageA_btn:first-child{margin-right:10px;}
.pageA_box{position: relative;width: 100%;border:20px solid #D1E5E5;background-color: rgba(255, 255, 255, 0.8);}
.pageA_box::before{content:'';position: absolute;background:url('../images/cir.png');top:0;left:0;z-index: 9;}
.pageA_content{position: absolute;top:0;left: 0;padding: 20px;opacity: 0;transition: all .5s linear;}
.pageA_content.active{opacity: 1;}
.pageA_img1{width: 100%;margin: 15px auto;text-align: center;}
.pageA_img1 img{width: 50%;}

/* 畫紅線 */
.red_line{ background-repeat: repeat-x; background-size: 200% .2em;
    background-position: 0 1.7em;
    transition: all .5s ease-out .6s;
    padding: 5px 0 5px 5px;
    margin: 0 3px;background-image: -webkit-linear-gradient(left,transparent 50%,#ff6a6a 50%);}
.red_line.active{background-position: -100% 1.7em;}


/* PageB 內容設定*/
section#PageB{ position: relative;}
section#PageB div.content{ margin: 20px auto 0;}

.pageB_btn_all{display: flex;justify-content: space-between;margin: 15px 0 0;}
.pageB_btn{width: 100%;height: 40px;border-radius: 20px 20px 0 0;text-align: center;font-weight: 800;cursor: pointer;transition: all .1s linear;border-bottom:1px solid rgba(199, 199, 199, 0.6) ;font-size: 1rem;}
.pageB_btn p{font-weight: 800;line-height: 40px;color:#000;transition: all .3s linear;}
.pageB_btn:hover{border-bottom:3px solid rgb(197, 197, 197);font-size: 1.1rem;}
.pageB_btn:hover p{color:rgb(61, 61, 61);}
.pageB_btn:active{border-bottom:3px solid rgb(151, 151, 151);}
.pageB_btn.active{border-bottom:3px solid #ff6a6a;}

.pageB_box{position: relative;width: 100%;height: 300PX;}
.pageB_content{position: absolute;top:0;left: 0;padding: 20px;opacity: 0;transition: all .5s linear;display: flex;width: 100%;justify-content: space-around;}

.pageB_content.active{opacity: 1;}
.pageB_content_text{width: 60%;}
.pageB_content_img{width: 20%;margin: 20px 0 0;}
.pageB_content_img img{width: 100%;}

.pageB_content_text p{  font-size:1.25rem ;}

/* 海浪 */
/* .waveall.delighter { transition: all 2s ease-out; opacity: 0; }
.waveall.delighter.started { opacity: 1; } */

.c-wave { position: relative; width: 100%; z-index: 50; margin: 100px 0 0;}
.c-wave .c-wave_wrapper { position: relative; width: 100%; height: 100px; margin-bottom: 0; }
.c-wave .c-wave_wrapper .c-wave_item { width: 100%; height: 100%; background-image: url(../images/bg-wave.png); position: absolute; background-size: 1000px 100px; left: 0; bottom: 0; }
.c-wave .c-wave_wrapper .c-wave_item:nth-of-type(1) {
    -webkit-animation: moving_wave01 10s cubic-bezier(.55,.5,.45,.5) infinite;
    animation: moving_wave01 10s cubic-bezier(.55,.5,.45,.5) infinite;
    z-index: 40;
    opacity: .7;
    animation-delay: -2s;
}
.c-wave .c-wave_wrapper .c-wave_item:nth-of-type(2) {
    -webkit-animation: moving_wave02 10s cubic-bezier(.55,.5,.45,.5) infinite;
    animation: moving_wave02 10s cubic-bezier(.55,.5,.45,.5) infinite;
    z-index: 30;
    opacity: .5;
    animation-delay: -2s;
}
.c-wave .c-wave_wrapper .c-wave_item:nth-of-type(3) {
    -webkit-animation: moving_wave03 10s cubic-bezier(.55,.5,.45,.5) infinite;
    animation: moving_wave03 10s cubic-bezier(.55,.5,.45,.5) infinite;
    z-index: 20;
    opacity: .5;
    animation-delay: -2s;
    bottom: 20px;
}
.c-wave .c-wave_wrapper .c-wave_item:nth-of-type(4) {
    -webkit-animation: moving_wave04 10s cubic-bezier(.55,.5,.45,.5) infinite;
    animation: moving_wave04 10s cubic-bezier(.55,.5,.45,.5) infinite;
    opacity: .3;
    -webkit-animation-delay: -4s;
    animation-delay: -4s;
    bottom: 10px;
    z-index: 20;
}
@keyframes moving_wave01{
0% {
    background-position-x: 0;
}
100% {
    background-position-x: -1000px;
}
}

@keyframes moving_wave02{
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: 1000px;
    }
}

@keyframes moving_wave03{
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: -1000px;
    }
}
@keyframes moving_wave04{
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: -1000px;
    }
}
@keyframes moving_wave05{
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: 1000px;
    }
}

/* PageC 內容設定*/
section#PageC{ position: relative; z-index: 99;background: url("../images/master_bg2.jpg") repeat-y;}
section#PageC .page_title{padding: 20px 0 0;}
.pageC_box{position: relative;width: 100%;border:20px solid #D1E5E5;background-color: rgba(255, 255, 255, 0.8);padding: 20px;margin: 20px 0;}
.pageC_box h4{text-align: center;}

ul.lesson , ul.lesson li{margin: 0;padding: 0;}

ul.lesson li{padding: 10px 10%;transition: all .3s linear;}
ul.lesson li:nth-child(odd){background-color: #e2f1f6;}

ul.lesson h5{text-align: center;}
.lesson_p{margin: 5px 0;transition: all .3s linear;}
.lesson_p:hover{color:rgb(97, 97, 97);}

/* ul.lesson li:hover{background-color: rgba(255, 243, 235, 0.5);} */
.lesson_span{width: 100px;text-align: center;  border-radius:2px;margin:0px 10px 0 0;background-color: #FFA466;padding: 1px 4px;font-size: small;color:#fff;float: left;}
.lesson_span2{width: 100px;text-align: center;    border-radius:2px;margin:0px 10px 0 0;background-color:#bbbab5;padding: 1px 4px;font-size: small;color:#fff;float: left;}
.red_text{color:red;padding: 0 2px;font-weight: 800;text-decoration: none;}
.arrow{width: 5%;margin: 0px auto;}

/* .pageC_icon{width: 400px; height: 400px; background: url("../images/pageC_icon.png")  0 0 no-repeat;animation: play .3s steps(4) infinite alternate;overflow: hidden;border:1px solid red;background-size: cover;}

@keyframes play {
    from { background-position:    0px; }
      to { background-position: -1592px; }
 } */

.pageC_icon{width: 80%;margin: 0 auto;}
.btn_text_content h2{margin: 20px 0 100px;}

.btn_text{color:#007f95;text-decoration:underline;transition: all .3s linear;}
.btn_text:hover {color:#26A8C0;text-decoration:underline;}


/* 船 */
.boat_1{width: 400px; height: 200px; background: url("../images/boat_1.png")  0 0 no-repeat;animation: boat_1 .8s steps(4) infinite alternate;overflow: hidden;background-size: cover;position: absolute;top:-100px;}
@keyframes boat_1 {
    from { background-position:    0px; }
      to { background-position: -1600px; }
 }
.boat_2{width: 400px; height: 200px; background: url("../images/boat_2.png")  0 0 no-repeat;animation: boat_2 3s steps(4) infinite alternate;overflow: hidden;background-size: cover;position: absolute;top:35%;right:-50px;}
@keyframes boat_2 {
    from { background-position:    0px; }
      to { background-position: -1600px; }
 }
 .boat_3{width: 400px; height: 200px; background: url("../images/boat_3.png")  0 0 no-repeat;animation: boat_3 3s steps(4) infinite alternate;overflow: hidden;background-size: cover;position: absolute;top:60%;left:-20px;}
 @keyframes boat_3 {
     from { background-position:    0px; }
       to { background-position: -1600px; }
  }
 


/* PageD 內容設定*/
section#PageD{ position: relative; z-index: 99;background: url("../images/master_bg2.jpg") repeat-y;}













.discount-con {background-color: #20a3a5;padding: 30px;border-radius: 5px;margin: 60px auto;}
.discount-con h3 {text-align: center;color: #fff;font-size: 2rem;margin-bottom: 30px;border-radius: 5px;display: block;}
.discount-con .discount-con-flex {display: flex;justify-content: space-between;align-items: center;} 


.discount-con .discount-con-flex h4 {background-color: #fff;padding: 5px 15px;cursor: pointer;color: #007f95;transition: all .3s ease-in;}
.discount-con .discount-con-flex a:hover h4 {color: #32a9ab;}
.discount-con .discount-con-flex ul {list-style: disc;}
.discount-con .discount-con-flex ul li{font-weight: 600;}
.discount-con .discount-con-flex .text {color: #fff;width: 70%;}
.discount-con .discount-con-flex .text p{font-weight: 600;}
.discount-con .discount-con-flex .text span {color: #fff896;}
.discount-con .discount-con-flex .photo {width: 250px;}
.discount-con .discount-con-flex .photo img{width: 100%;}











/* RWD Setting */
    @media (max-width: 1440px) {
       /* RWD 整體寬度調整*/

        div.content { width: 1100px; margin: 0 auto;}
      
        /* 主視覺 */ 
        .master{width: 80%;}
        .master_subtitle2{height: 280px;width: 100%;}
    }

    @media (max-width: 1199px) {
        /* RWD 整體寬度調整*/
        div.content { width: 96%; margin: 0 auto;}

        /* 主視覺 */
        .master{width: 90%;margin: 0 auto;}
        .master_subtitle2{height: 280px;width: 100%;}
        /* PageA 內容設定*/
 
        /* PageB 內容設定*/
        .pageB_btn_all {display: block;margin: 15px 0 0;}
        .pageB_btn { height: 60px; font-size: 1.4rem; }
        .pageB_btn p { line-height: 60px; }





        /* PageD 內容設定*/
        .table tr td b{width: 100%;}
        .table-l tr:first-child td {border-top: 1px solid #dee2e6;}
        .table tr td { height: auto; }
    }

    @media (max-width:991px) {
        /* RWD 整體寬度調整*/
        div.content { width:100%;padding: 15px;}

        /* 主視覺 */
        .master_subtitle2{height: 220px;width: 100%;}
        .master > .master_subtitle::before {top:18%;left:0;width:35%;height:12px;}
        .master > .master_subtitle::after {top:18%;right:0;width:35%;height:12px;}
        /* PageA 內容設定*/
        .pageA_btn{width: 30%;}
        .pageA_btn p{font-size: 1.1rem;}

        /* PageB 內容設定*/
         section#PageB .page_title ul > li { margin: 5px 0; }
         
       
     
        /* 船 */
        .boat_1{top:-50px;left:-230px;}
        .boat_2{top:57%;left:60%}
        .boat_3{display: none;}

    }

    @media (max-width: 768px) {
         /* RWD 整體寬度調整*/
     
   
        /*主視覺*/
        .master_subtitle2{height: 160px;width: 100%;}
        .master > .master_subtitle::before {top:15%;left:0;width:30%;height:12px;}
        .master > .master_subtitle::after {top:15%;right:0;width:30%;height:12px;}
        .master > .master_title {  margin: -25px 0 0; }
        section .page_title .title_icon { width: 10%; }
        /* PageA 內容設定*/
        .pageA_btn{width: 50%;}
        .pageA_btn p{font-size: 1.3rem;}


        /* PageB 內容設定*/
    
        .winner_people{width: 40%;margin: 0 auto;}
        .pageB_btn p { line-height: 60px; font-size:1.1rem; }
        .pageB_content {  display: flex; width: 100%; justify-content: space-around; }
        .pageB_content_text { width: 80%; }
      
        .pageB_box { height: 140px; }

        /* PageC 內容設定*/
        .pageC_box { position: relative; width: 100%; border: 20px solid #D1E5E5; background-color: rgba(255, 255, 255, 0.8); padding: 20px; min-height: auto; margin: 20px 0; }
        /* 船 */
        .boat_1{top:-50px;left:-230px;}
        .boat_2{top:57%;left:60%}
        .boat_3{display: none;}









        .discount-con {
            background-color: #20a3a5;
            padding: 30px;
            border-radius: 5px;
            margin: 100px auto 60px;
        }
        .discount-con .discount-con-flex {
         flex-direction: column;flex-wrap: wrap;
        }
        .discount-con .discount-con-flex .text {color: #fff;width: 100%;}
        .discount-con .discount-con-flex .photo { width: 200px;margin-top: 20px; }






    }
    
    @media (max-width: 576px) {
        body { margin: 0;}
     
        /*RWD 整體寬度調整*/
        i{margin-right: 5px;}
        h1{font-size: 1.5rem;line-height: 1.9rem;}
        h2{font-size: 1.4rem;line-height: 1.6rem;}
        h4{font-size: 1.1rem;line-height: 1.6rem;}
        h5{font-size: 1rem;line-height: 1.4rem;}
     
        section p,section li,section b{margin-bottom: 0rem;font-size: .9rem;line-height: 1.4rem;}
        table tr td p{font-size: .9rem;line-height: 1.4rem;}
        table tr td a { font-size: .9rem;line-height: 1.4rem;}
       
        section {margin: 0; }
        section h1 { font-size: 1.3em; line-height: 0.8; }
        dl, ol, ul { padding:0 10px; }
        section .content .title {text-align: center;}
        .title_icon { width: 80px; margin: 5px auto; }

        /* 主視覺 */
        .master > .master_subtitle::before {top:12%;left:0;width:30%;height:12px;}
        .master > .master_subtitle::after {top:12%;right:0;width:30%;height:12px;}
        .master_subtitle2{height:100px;width: 100%;margin: 0 auto;}
        .master{width: 100%;margin: 0 auto;}
        section .page_title .title_icon { width: 15%; }
        /* PageA 內容設定*/
  
        .pageA_btn_all {
            display: block;
            justify-content: flex-end;
            margin: 15px 0 0;
        }
        .pageA_btn{width: 100%;border-radius: 0;}
        .pageA_content.active { opacity: 1; }
        .winner_people{width: 40%;margin: 0 auto;}
        .pageA_content { position: relative; display: none; }
        .pageA_content.active { display: block; }
        .pageA_btn p { font-size: 1.1rem; }


        /* PageB 內容設定*/
        .magnifier{width: 30%;margin:0px auto 10px;}
        .magnifier img{width: 100%;}
        .pageA_box { border: 10px solid #D1E5E5;}
        .pageA_content { padding: 15px; }
        section#PageB .page_title h3 i{margin: 8px 0 0;}
        .pageB_btn p {
   
            line-height: 1.6rem;
            font-size:1rem;
        }
        .pageB_content_text {
            width: 80%;
        }
    
        /* PageC 內容設定*/
        .button{ font-size: 1rem;}
        .pageC_box { border: 10px solid #D1E5E5; margin: 20px 0; }
               /* PageC內容設定*/
               .lesson_span {
                width: 80px;
                text-align: center;
                border-radius: 2px;
                margin: 0px 10px 0 0;
                background-color: #FFA466;
                padding: 1px 4px;
                font-size: small;
                color: #fff;
                float: none;
            }

            .lesson_span2 {
                width: 80px;
                text-align: center;
                border-radius: 2px;
                margin: 0px 10px 0 0;
                background-color: #bbbab5;
                padding: 1px 4px;
                font-size: small;
                color: #fff;
                float: none;
            }
            .arrow { width: 15%; }
            .pageC_box { padding: 15px; }
        /* 船 */
        .boat_1{width: 200px; height: 100px; background: url("../images/boat_1_m.png")  0 0 no-repeat;top:-50px;}
        @keyframes boat_1 {
            from { background-position:    0px; }
            to { background-position: -800px; }
        }

        .boat_2{display: none;}

        .boat_3{width: 200px; height: 100px; background: url("../images/boat_3_m.png")  0 0 no-repeat;top:59%;left:-20px;display: block;}
        @keyframes boat_3 {
            from { background-position:    0px; }
            to { background-position: -800px; }
        }






    }



    @media (max-width: 320px) {

        /* PageA 內容設定*/
        .master_subtitle2 { height:50px;}

        /* PageB 內容設定*/
        section#PageB div.content { margin: 0 auto; }

 
    }