/*1000px=========================================================*/
@media screen and (max-width: 1000px){
    /*section4=======================*/
    #s4_picbox{
        background-size: 140% auto;
    }
    /*section6=======================*/
    #s6_pic1{
        width: 220%;
        margin-left: -43%;
        margin-top: 0%;
    }
    #s6_pic2{
        width: 180%;
        margin-left: -45%;
        margin-top: 0%;
    }
    /*section11=======================*/
    .s11_box{
        margin-bottom: 8%;
    }
    .s11_box1{
        margin-bottom: 8%;
    }
}


/*850px=========================================================*/
@media screen and (max-width: 850px){
    /*section3=======================*/
    .s3_txt1{
        width: 100%;
        float: right;
    }
    #s3_pic2{
        width: 30%;
        left: 9%;
    }
    /*section4=======================*/
    .s4_pic1, #s4_pic2{
        width: 40%;
        height: 30vw;
        overflow: hidden;
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        -o-border-radius: 20px;
    }
    #s4_img2{
        width: 280%;
        height: auto;
        margin-left: -150%;
        margin-top: -35%;
    }
    #s4_picbox{
        background-position: right bottom;
        background-size: 140% auto;
    }
    /*section6=======================*/
    #s6_pic2{
        width: 185%;
        margin-left: -45%;
        margin-top: 0%;
    }
}


/*800px=========================================================*/
@media screen and (max-width: 800px){
    /* 通用設定=======================*/
    .txtp{
        font-size: 20px;
    }
    /*section6=======================*/
    #s6_pic2{
        width: 206%;
        margin-left: -52%;
        margin-top: 0%;
    }
} 


/*700px=========================================================*/
@media screen and (max-width: 700px){
    /*通用設定=========================================================================*/
    :root{
        --txt_bold: bold;
        --border_blue: #2aabbc solid 2px;
        --border_radius: 30px;
    }
    .s6_border0, .s6_border1, .s6_border2, .s6_border3, .s8_txtbox{
        border-width: .2em;
    }
    /*section3=======================*/
    #s3_box1{
        margin: 5% 7% 0% 7%;
    }
    .s3_txt3{
        width: 100%;
    }
    #s3_pic1, #s3_pic2{
        position: static;
        width: 50%;
        left: 0;
        right: 0;
        margin: auto;
    }
    .s3_box2{
        margin: 5% 7% 0% 7%;
    }
    .s3_txt2{
        width: 100%;
        float: right;
    }
    /*section6=======================*/
    #section6 .switch_show{/*手機版切桌機版時顯示*/
        display: block;
    }
    .s6_txtbox{
        margin: 0 5%;
    }
    #section6 .s6_right, #section6 .s6_left{
        float: unset;
    }
    .s6_title{
        font-size: max(5.3vw, 20px);
        width: 90%;
        margin-left: 5%;
        padding: 2% 0;
    }
    .s6_subtitle{
        width: 100%;
        font-size: max(4vw, 20px);
        padding: 8% 0 0 0% !important;
    }
    .s6_boxspace{
        padding-bottom: 12%;
    }
    .s6_txt1, .s6_txt2, .s6_txt3, .s6_txt4{
        width: 100%;
        background: linear-gradient(to bottom, white 85%, rgba(255, 255, 255, 0) 100%);
        margin: 0 0 45% 0;
    }
    .s6_txt1{
        padding: 3% 3% 12% 3%;
    }
    .s6_txt2{
        padding: 3% 3% 12% 3%;
    }
    .s6_txt3, .s6_txt4{
        padding: 5% 3% 12% 3%;
    }
    #s6_pic1{
        width: 230%;
        margin-left: -20%;
        margin-top: -53%;
    }
    #s6_pic2{
        width: 160%;
        margin-left: -20%;
        margin-top: -53%;
    }
    #s6_pic3{
        width: 100%;
        margin-left: 0%;
        margin-top: -54%;
    }
    .s6_pic4{
        width: 100%;
        margin-top: -150%;
    }
    #s6_pic5{
        width: 120%;
        margin-left: -2%;
        margin-top: -56%;
    }
    #s6_pic6{
        width: 3%;
        margin-right: 3%;
        margin-bottom: 4.5%;
    }
    /*section11=======================*/
    #section11 .switch_show{/*手機版切桌機版時顯示*/
        display: block;
    }
    #section11 .switch_hide{/*手機版切桌機版時顯示*/
        display: none;
    }
    #s11_title{
        background-image: url(../img/b_04_bg.png);
    }
    .s11_box{
        display: block;
        margin-top: 4%;
        margin-bottom: 0;
    }
    .s11_box1{
        margin-bottom: 10%;
    }
    .s11_txtbox{
        width: 100%;
    }
    .s11_right, .s11_left{
        padding: 8% 5% 5% 5%;
        margin: 0;
    }
    .s11_subtitle1, .s11_subtitle2{
        width: 80%;
        margin: 0 auto;
        top: -5%;
        font-size: 30px;
        padding: 2% 4%;
    }
    .s11_pic{
        left: 0;
        right: 0;
        margin: 5% auto;
        position: static;
        width: 80%;
        height: 50vw;
    }
    .s11_pic1 img{
        width: 100%;
        height: auto;
        margin-left: 0%;
        margin-top: -10%;
    }
    .s11_pic2 img{
        width: 165%;
        height: auto;
        margin-left: -40%;
        margin-top: -7%;
    }
}


/*650px=========================================================*/
@media screen and (max-width: 650px){
    /* 通用設定=======================*/
    .txtp{
        font-size: 17px;
    }
    /*section4=======================*/
    .s4_txtbox{
        margin-top: 6%;
        width: 92%;
        margin-left: 4%;
    }
    /*section11=======================*/
    .s11_subtitle1, .s11_subtitle2{
        font-size: 25px;
    }
}


/*550px=========================================================*/
@media screen and (max-width: 560px){
    /*section4=======================*/
    #s4_picbox2 .switch_hide{/*手機版切桌機版時顯示*/
        display: none;
    }
    #s4_picbox2 .switch_show{/*手機版切桌機版時顯示*/
        display: block;
    }
    #s4_picbox{
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 55%, #f2eae4 70%) ,url(../img/b_04_4.jpg);
        background-position: 85% 35%;
        background-repeat: no-repeat;
        padding-bottom: 5%;
        background-size: 160% auto;
        padding-bottom: 5%;
    }
    #s4_picbox2{
        width: unset;
        margin-top:7%
    }
    .s4_subtitle2{
        font-size: max(4.8vw,19px);
        width: 40%;
        padding: 2% 4%;
        margin: 2% 5%;
    }
    .s4_txt3{
        margin-top: 7%;
        text-align: justify;
        background-color: rgba(255, 255, 255, 0.729);
        padding: 5%;
        border-radius: var(--border_radius);
        -webkit-border-radius: var(--border_radius);
        -moz-border-radius: var(--border_radius);
        -ms-border-radius: var(--border_radius);
        -o-border-radius: var(--border_radius);
}
}


/*500px=========================================================*/
@media screen and (max-width: 500px){
    /*通用設定=======================*/
    :root{
        --border_radius: 20px;
    }
    .txt_bold{
        font-weight: bold;
    }
    .all_title{
        font-weight: bold;
    }
    .s6_border0, .s6_border1, .s6_border2, .s6_border3, .s8_txtbox{
        border-width: .15em;
    }
    .switch_show{/*手機版切桌機版時消失*/
        display: inline;
    }
    .switch_hide{/*手機版切桌機版時顯示*/
        display: none;
    }
    /*section3=======================*/
    #s3_title{
        margin-top: 14%;
    }
    .s3_subtitle{
        font-weight: bold;
    }
    /*section4=======================*/
    #section4 .all_title{
        background-image: url(../img/b_03_1.png);
    }
    #section4 .switch_show .all_title{
        display: block;
    }
    .s4_subtitle, .s4_subtitle2{
        font-weight: 500;
    }
    .s4_txtbox .switch_show{
        display: block;
    }
    .s4_txtbox{
        display: block;
    }
    .s4_txt1, .s4_txt2{
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 6%;
        float: left;
    }
    .s4_pic1, #s4_pic2{
        width: 100%;
        height: 30vw;
    }
    #s4_img1{
        width: 100%;
        height: auto;
        margin-top: -15%;
    }
    #s4_img2{
        width: 150%;
        height: auto;
        margin-left: -50%;
        margin-top: -16%;
   
    }
    /*section5=======================*/
    #s5_0{
        bottom: -18%;
        padding-bottom: 7%;
        background-color: #2aabbc;
    }
    #s5_2{
        bottom: -14%;
    }
    /*section6=======================*/
    .s6_subtitle{
        font-weight: bold;
    }
    .s6_txt1, .s6_txt2, .s6_txt3, .s6_txt4{
        width: 100%;
        padding: 5% 3% 20% 3%;
        background: linear-gradient(to bottom, white 85%, rgba(255, 255, 255, 0) 100%);
    }
    #s6_pic1{
        width: 270%;
        margin-left: -20%;
        margin-top: -65%;
    }
    #s6_pic2{
        width: 190%;
        margin-left: -24%;
        margin-top: -61%;
    }
    #s6_pic3{
        width: 130%;
        margin-left: -20%;
        margin-top: -61%;
    }
    /*section7=======================*/
    #section7 .all_title{
        background-image: url(../img/b_03_1.png);
    }
    #section7 .switch_show{
        display: block;
    }
    #section7 .all_txt_m{
        text-align: justify;
    }
    .s7_txt1, .s7_txt2{
        text-align: justify;
        font-size: 15px;
    }
    /*section8=======================*/
    .s8_title{
        background-image: url(../img/b_08_bg_3.png);
    }
    #section8 .switch_show{
        display: block;
    }
    #section8 .all_txt_m{
        text-align: justify;
    }
    #section8 .row{
        margin: 0% 6% 13% 6%;
    }
    #section8 .col{
        padding: 0;
    }
    .s8_pic{
        width: 100%;
    }
    .s8_pic2{
        width: 32%;
        margin-top: -25%;
    }
    .s8_txtbox{
        margin-top: 18%;
    }
    .s8_txt{
        text-align: justify;
    }
    /*section9=======================*/
    #section9 .s9_title1, #section9 .s9_title2, #section9 .s9_title3, #section9 .s9_title4{
        text-align: center !important;
        margin-top: 5%;
    }
    #section9 .switch_show{
        display: block;
        text-align: justify;
    }
    .s9_txt1, .s9_txt2{
        text-align: justify;
        margin-left: 5%;
        margin-right: 5%;
    }
    #s9_pic2 .s9_txt2, #s9_pic4 .s9_txt2, #s9_pic6 .s9_txt2{
        text-align: right !important;
    }
    #s9_pic1{
        background-size: auto 83%;
        background-position: right 7% center;
    }
    #s9_pic2{
        background-size: auto 160%;
        background-position: left 13.5% top 47%;
    }
    #s9_pic3{
        background-size: auto 160%;
        background-position: right 11% top 100%;
    }
    #s9_pic4{
        background-size: auto 110%;
        background-position: left 9% top 0%;
    }
    #section9 .all_txt_m{
        padding-bottom: 1%;
    }
    /*section11=======================*/
    .s11_subtitle1, .s11_subtitle2{
        width: 100%;
        font-size: 22px;
    }
}


/*400px=========================================================*/
@media screen and (max-width: 400px){

    /*section3=======================*/
    #s3_title{
        margin-top: 0%;
        margin-bottom: 0%;
    }
    #section3 .all_title{
        margin-bottom: 100%;
    }
    .s3_txtbox{
        margin-top: 7%;
    }
    /*section4=============================================================================*/
    #section4 .all_title{
        background-image: url(../img/b_03_1.png);
    }
    /*section6=======================*/
    .s6_txt1, .s6_txt2, .s6_txt3, .s6_txt4{
        width: 100%;
        padding: 5% 3% 20% 3%;
        background: linear-gradient(to bottom, white 90%, rgba(255, 255, 255, 0) 100%);
    }
    /*section9=======================*/
    #section9 .s6_txtbox{
        margin: 0;
    }
    /*section11=======================*/
    .s11_subtitle1, .s11_subtitle2{
        font-size: 20px;
    }
}

/*350px=========================================================*/
@media screen and (max-width: 350px){
    /*section3=======================*/
    #s3_title{
        margin-top: 20%;
        margin-bottom: 13%;
    }
    #section3 .all_title{
        top: -102%;
    }
    /*section5=======================*/
    #s5_0{
        padding-bottom: 10%;
    }
    #s5_2{
        bottom: -15%;
    }
}