/*通用設定=========================================================================*/
:root {
    --txt_bold: bold;
    --txt_blue: #2aabbc;
    --txt_orange: #f88745;
    --border_blue: #2aabbc solid 3px;
    --border_radius: 40px;
}

.switch_show {
    /*手機版切桌機版時消失*/
    display: none;
}

.switch_hide {
    /*手機版切桌機版時顯示*/
    display: block;
}


#product_page {
    margin: 0 auto;
    left: 0;
    right: 0;
    max-width: 1000px;
    vertical-align: bottom;
    overflow: hidden;
}

#product_page img {
    vertical-align: bottom;
}

.font_NS {
    font-family: 'Noto Sans TC', sans-serif;
}

.txt_content {
    text-align: justify;
    margin: 0 4%;
}

.txtp {
    font-size: 22px;
    line-height: 1.8em !important;
}


.all_title {
    color: var(--txt_blue);
    font-size: min(max(6.4vw, 24px), 64px);
    left: 0;
    right: 0;
    text-align: center;
    margin-top: 13%;
    margin-bottom: 4%;
    font-style: italic;
    letter-spacing: .05em;
    font-family: 'Noto Sans TC', sans-serif;
    line-height: 1.5em;
}

.all_title span {
    background: linear-gradient(to top, #faaa7c00 10%, #ffb488 10%, #ffb488 25%, #ffffff00 25%);
}

.all_title_s {
    color: var(--txt_blue);
    font-size: min(max(4vw, 18px), 40px);
    left: 0;
    right: 0;
    text-align: center;
    font-style: italic;
    letter-spacing: .05em;
    line-height: 1.5em;
}

.all_txt_m {
    font-size: min(max(3vw, 17px), 30px);
    line-height: 1.9em;
    padding-bottom: 6%;
    text-align: center;
}

.txt_orange {
    color: var(--txt_orange);
    font-family: 'Noto Sans TC', sans-serif;
}

.txt_bold {
    font-weight: 500;
    font-family: 'Noto Sans TC', sans-serif;
}

.line_orange {
    background: linear-gradient(to top, #faaa7c00 0%, #f88745 0%, #f88745 15%, #ffffff00 15%);
    font-family: 'Noto Sans TC', sans-serif;
}


.layer_bottom {
    position: relative;
}

.layer {
    position: absolute;
    z-index: 2;
}

.clear {
    clear: both;
}

.margin_center {
    left: 0;
    right: 0;
    margin: 0 auto;
}

.bd {
    border: red solid thin;
}


/*section1=============================================================================*/
#section1 {
    margin-bottom: -1px;
}

#s1_award {
    text-align: center;
    font-weight: 500;
    font-size: min(5vw, 50px);
    letter-spacing: .05em;
    color: var(--txt_blue);
    margin: 6% 0 -3% 0;
}

#s1_award_gold {
    background: linear-gradient(-44deg, #eb732c 0%, #f0a340 16%, #eb732c 34%, #eb732c 64%, #f0a340 85%, #eb732c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: min(8vw, 80px);
    font-weight: 900;
    margin: 0 .1em;
    display: inline-block;
}


#s1_title {
    color: var(--txt_blue);
    font-weight: 700;
    font-size: min(9.1vw, 91px);
    text-align: center;
    letter-spacing: .05em;
    margin: 5% 0 4% 0;
}

#s1_title_pic {
    width: 7%;
    height: auto;
    margin-top: 8%;
    margin-left: 40%;
}

#s1_subtitle1 {
    top: 42.2%;
    left: 7.4%;
    font-size: min(6.4vw, 64px);
    font-weight: var(--txt_bold);
    line-height: 1.15em;
    letter-spacing: .1em;
    color: white;
}

#s1_title_b {
    letter-spacing: .2em;
}

#s1_subtitle2 {
    text-align: justify;
    top: 42.3%;
    left: 68.8%;
    font-size: min(3vw, 30px);
    letter-spacing: .2em;
    color: white;
}

#s1_txt {
    bottom: 9%;
    left: 69%;
    font-size: min(2.7vw, 27px);
    ;
    letter-spacing: .1em;
    line-height: 1.6em;
    color: white;
}


/*section2=============================================================================*/
#section2 {
    margin-bottom: 10%;
}

#section2 .all_title {
    margin: 0;
}

.s2_subtitle {
    color: var(--txt_blue);
    bottom: 1%;
    left: 0;
    right: 0;
    font-size: min(max(4.6vw, 19px), 46px);
    letter-spacing: .05em;
    text-align: center;
    font-style: italic;
    margin: 0;
}


/*section3=============================================================================*/
#section3 {
    margin-top: 5%;
    background-image: url(../img/b_03_btnbg.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    padding-bottom: 44%;
}

#section3 .all_title {
    top: -50%;
}

#s3_title {
    margin-bottom: 9%;
}

.s3_subtitle {
    color: var(--txt_blue);
    font-size: min(max(4.3vw, 24px), 43px);
    letter-spacing: .05em;
    text-align: justify;
    margin-bottom: 5%;
    width: 90%;
    float: left;
}

.s3_number {
    color: white;
    font-weight: var(--txt_bold);
    font-size: min(max(3.4vw, 17px), 35px);
    background-image: url(../img/b_dot.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 8%;
    padding: .5%;
    margin-right: 2%;
    float: left;
    text-align: center;
    margin-top: .5%;
}

.s3_txtbox {
    border: var(--border_blue);
    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);
    margin-top: 5%;
    background-color: white;
}

#s3_box1 {
    margin: 5% 4% 3% 7%;
}

.s3_txt3 {
    width: 56%;
}

#s3_pic1 {
    width: 34%;
    height: auto;
    right: 3%;
    bottom: 0;
    position: absolute;
}

.s3_box2 {
    margin: 5% 7% 3% 7%;
}

.s3_txt1 {
    width: 56%;
    float: right;
}

.s3_txt2 {
    width: 56%;
    float: right;
}

#s3_pic2 {
    width: 33%;
    height: auto;
    left: 6%;
    bottom: 0;
    position: absolute;
}

#s3_box3 {
    margin: 5% 7% 3% 7%;
    float: left;
}

#s3_btn {
    width: 30%;
    height: auto;
    margin-top: 32%;
    margin-left: 25%;
}


/*section4=============================================================================*/
#section4 .all_title {
    background-image: url(../img/b_04_bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding-bottom: 4%;
    width: 100%;
    background-position: center;
}

.s4_txtbox {
    display: flex;
    align-items: center;
    margin-top: 4%;
    width: 80%;
    margin-left: 10%;
}

.s4_txt1 {
    width: 55%;
    margin-left: 5%;
    margin-bottom: 0;
    right: 0;
    float: right;
}

.s4_txt2 {
    margin-right: 5%;
    margin-bottom: 0;
    float: left;
    width: 55%;
}

.s4_pic1,
#s4_pic2 {
    width: 40%;
    height: min(25vw, 250px);
    overflow: hidden;
    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);
}

#s4_img1 {
    width: 141%;
    height: auto;
    max-width: unset;
    margin-bottom: 0%;
}

#s4_img2 {
    width: 280%;
    height: auto;
    margin-left: -150%;
    margin-top: -20%;
    max-width: unset;
}


#s4_picbox {
    background-image: url(../img/b_04_4.jpg);
    background-position: right 160%;
    background-repeat: no-repeat;
    padding-bottom: 5%;
    background-size: 125% auto;
}

#s4_picbox1 .row {
    width: 100%;
    margin: 0;
}

.s4_subtitle {
    font-size: min(3.8vw, 38px);
    font-style: italic;
    color: white;
    background-color: var(--txt_blue);
    text-align: center;
    border-radius: 1000px;
    -webkit-border-radius: 1000px;
    -moz-border-radius: 1000px;
    -ms-border-radius: 1000px;
    -o-border-radius: 1000px;
    line-height: 1.3em;
    letter-spacing: .05em;
    padding: 1% 0;
    margin: 33% 2% 0 2%;
}

#s4_picbox2 {
    width: 47%;
    text-align: center;
}

.s4_subtitle2 {
    font-size: min(3.8vw, 38px);
    font-style: italic;
    color: white;
    background-color: var(--txt_blue);
    text-align: center;
    border-radius: 1000px;
    -webkit-border-radius: 1000px;
    -moz-border-radius: 1000px;
    -ms-border-radius: 1000px;
    -o-border-radius: 1000px;
    line-height: 1.3em;
    letter-spacing: .05em;
    padding: 2% 5%;
    width: 80%;
    margin: 5% 12% 5% 10%;
}

.s4_txt3 {
    text-align: justify;
    text-shadow: 0 0 20px white;
}


/*section5=============================================================================*/
#s5_0 {
    color: white;
    text-align: center;
    font-style: italic;
    letter-spacing: .15em;
}

#s5_0 .all_title {
    color: white;
    width: 100%;
    text-align: center;
    margin-top: 0;
}

#s5_0 span {
    background: linear-gradient(to top, #faaa7c00 10%, #f88745 10%, #f88745 25%, #ffffff00 25%);
}

#s5_0 .s5_subtitle {
    margin-top: 8.5%;
    margin-bottom: 1%;
    color: white;
}

#s5_2 {
    bottom: -18%;
}

#s5_3 {
    background-image: url(../img/b_05_2.jpg);
    background-position: top;
    background-size: 100% auto;
    background-repeat: no-repeat;
    padding-top: 22%;
}

#s5_3 .all_title {
    margin-top: 0;
    padding-top: 28%;
    z-index: 2;
}

#s5_subtitle2 {
    margin-top: -2.7%;
    z-index: 0;
}

#s5_subtitle2 .all_title {
    margin-top: -14%;
    margin-right: -57%;
    font-size: min(max(6.4vw, 23px), 64px);
}

#s5_subtitle3 .all_title {
    margin-top: -30%;
    margin-left: -60%;
    font-size: min(max(6.4vw, 23px), 64px);
}

/*section6=============================================================================*/
#section6 {
    background-position: bottom;
    background-repeat: no-repeat;
}

#s6_whitebox {
    background-color: white;
    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);
    padding: 10% 0 5% 0;
    margin-top: -1px;
}

.s6_txtbox {
    margin: 0 7%;
}

.s6_right {
    float: right;
}

.s6_left {
    float: left;
}

.s6_border0 {
    border-right: #2aabbc dotted .25em;
    height: min(9vw, 90px);
    position: absolute;
    margin-top: -10.4%;
    margin-left: 80.7%;
}

.s6_border1,
.s6_border2,
.s6_border3 {
    border-top: #2aabbc dotted .25em;
    padding: 10px;
}

.s6_border1 {
    border-left: #2aabbc dotted .25em;
}

.s6_border2 {
    border-right: #2aabbc dotted .25em;
}

.s6_border3 {
    border-left: #2aabbc dotted .25em;
    border-bottom: #2aabbc dotted .25em;
}

.s6_title {
    background-color: var(--txt_orange);
    color: white;
    font-size: min(4vw, 40px);
    letter-spacing: .1em;
    text-align: center;
    width: 60%;
    margin-left: 20%;
    padding: 4% 0;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border: white solid .2em;
    margin-top: -7%;
    z-index: 10;
    font-weight: bold;
}

.s6_subtitle {
    color: var(--txt_orange);
    font-size: min(3.1vw, 31px);
    letter-spacing: .1em;
    z-index: 2;
    padding: 10% 0 2% 10% !important;
    margin: 0 !important;
    text-align: center;
}

.s6_txt1 {
    width: 60%;
    padding: 0% 0% 7% 10%;
    z-index: 2;
    margin: 0;
    background: linear-gradient(to left, white 90%, rgba(255, 255, 255, 0) 100%);
}

.s6_txt2 {
    width: 60%;
    padding: 7% 10% 12% 0%;
    background: linear-gradient(to right, white 90%, rgba(255, 255, 255, 0) 100%);
    margin: 0;
    z-index: 2;
}

.s6_txt3 {
    width: 60%;
    padding: 7% 10% 7% 0%;
    background: linear-gradient(to right, white 90%, rgba(255, 255, 255, 0) 100%);
    margin: 0;
    z-index: 2;
}

.s6_txt4 {
    width: 60%;
    padding: 7% 0% 7% 10%;
    z-index: 2;
    background: linear-gradient(to left, white 90%, rgba(255, 255, 255, 0) 100%);
    margin: 0;
}

.s6_pic {
    overflow: hidden;
}

#s6_pic1 {
    width: 170%;
    height: auto;
    z-index: 0;
    margin-left: -30%;
    margin-top: 0%;
    position: absolute;
    max-width: unset;
}

#s6_pic2 {
    width: 140%;
    height: auto;
    z-index: 0;
    margin-left: -30%;
    margin-top: -4%;
    position: absolute;
    max-width: unset;
}

#s6_pic3 {
    width: 120%;
    height: auto;
    z-index: 0;
    margin-left: -38%;
    margin-top: -7%;
    position: absolute;
    max-width: unset;
}

.s6_pic4 {
    width: 100%;
    height: auto;
    z-index: 0;
    right: 0%;
    margin-top: 0%;
    position: absolute;
    max-width: unset;
}

#s6_pic5 {
    width: 100%;
    height: auto;
    z-index: 0;
    margin-left: -23%;
    margin-top: -3%;
    position: absolute;
    max-width: unset;
}

#s6_pic6 {
    width: 4%;
    height: auto;
    bottom: 0;
    right: 0;
    margin-right: 2.5%;
    margin-bottom: 4%;
    max-width: unset;
}


/*section7=============================================================================*/
#section7 {
    text-align: center;
}

#section7 .all_title {
    background-image: url(../img/b_04_bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding-bottom: 4%;
}

.s7_txt1,
.s7_txt2 {
    width: 50%;
    float: left;
    padding: 0 5%;
    text-align: center;
    margin-bottom: 5%;
}

.s7_txt2 {
    color: white;
}

.s7_pic {
    width: 100%;
    height: auto;
    max-width: 916px;
}

.s7_picbg {
    background-repeat: no-repeat;
}

#s7_pic1 {
    background-image: url(../img/b_07_bg_1.jpg);
    background-size: cover;
    background-position: center;
}

#s7_pic2 {
    background-image: url(../img/b_07_bg_2.jpg);
    background-size: cover;
    background-position: center;
    margin: 0;
}

#s7_pic3 {
    background-image: url(../img/b_07_bg_3.jpg);
    background-size: cover;
    background-position: center bottom;
}

#s7_pic4 {
    background-image: url(../img/b_07_bg_4.jpg);
    background-size: cover;
    background-position: center bottom;
    margin-bottom: 7%;
}

#s7_last_title {
    margin-top: 0;
}

/*section8=============================================================================*/
#section8 {
    background-color: #2aabbc;
    background-image: url(../img/b_08_bg_2.jpg);
    background-position: bottom;
    background-size: 100% auto;
    padding-top: 1%;
    padding-bottom: 13%;
    background-repeat: no-repeat;
}

.s8_title {
    background-image: url(../img/b_08_bg_1.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin-top: 10%;
}

#s8_title1 {
    padding-bottom: 0 !important;
}

#section8 .all_title {
    color: white;
    margin-top: 0;
    padding-bottom: 4%;
}

#section8 .all_title span {
    background: linear-gradient(to top, #faaa7c00 10%, #f88745 10%, #f88745 25%, #ffffff00 25%);
}

#section8 .all_title_s {
    background: none;
    color: white;
    margin: 0;
    padding-bottom: 5%;
}

#section8 .all_txt_m {
    color: white;
}

.s8_pic {
    width: 90%;
    height: auto;
}

.s8_pic2 {
    width: 24%;
    height: auto;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: -21%;
}

#section8 .row {
    margin: 0% 10% 13% 10%;
}

#section8 .col {
    text-align: center;
}

.s8_txtbox {
    margin-top: 12%;
    padding-top: 9%;
    border: white solid 3px;
    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);
}

.s8_txt {
    color: white;
    padding-bottom: 3%;
    font-size: min(max(3vw, 17px), 25);
    line-height: 1.8em;
    text-align: center;
}


/*section9=============================================================================*/
.s9_title1 {
    background-image: url(../img/b_03_1.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding-top: 5%;
    font-size: min(max(5.9vw, 29px), 59px);
    background-position: center;
}

.s9_title2 {
    background-image: url(../img/b_03_1.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding-top: 5%;
    padding-bottom: 10%;
    font-size: min(max(6vw, 29px), 60px);
    background-position: center;
}

.s9_title3 {
    background-image: url(../img/b_03_1.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    padding-top: 6%;
    padding-bottom: 10%;
    font-size: min(max(6vw, 29px), 60px);
    line-height: 1.2em;
    margin-bottom: 1%;
}

.s9_title4 {
    background-image: url(../img/b_03_1.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding-top: 5%;
    padding-bottom: 10%;
    font-size: min(max(6vw, 29px), 60px);
    background-position: center;
    margin-bottom: 1%;
    margin-top: 1%;
}

#section9 .all_title_s {
    background: none;
}

#s9_pic_3 {
    margin-top: -6%;
}

.s9_border {
    padding: 0;
}

.s9_border0 {
    border-right: #2aabbc dotted 0.25em;
    height: min(9vw, 90px);
    position: absolute;
    margin-top: -12.7%;
    margin-left: 50%;
}

.s9_txt1,
.s9_txt2 {
    width: 50%;
}

.s9_txt1 {
    text-align: center;
    margin: 6% 0;
}

.s9_txt2 {
    text-align: center;
    margin: 10% 0;
}

#s9_pic1 {
    background-image: url(../img/b_09_4.jpg);
    background-size: auto 130%;
    background-repeat: no-repeat;
    background-position: right 13% top 50%;
}

#s9_pic2 {
    background-image: url(../img/b_09_5.jpg);
    background-size: auto 130%;
    background-repeat: no-repeat;
    background-position: left 16.5% top 50%;
}

#s9_pic3 {
    background-image: url(../img/b_09_6.jpg);
    background-size: auto 180%;
    background-repeat: no-repeat;
    background-position: right 16% top 100%;
}

#s9_pic4 {
    background-image: url(../img/b_09_7.jpg);
    background-size: auto 110%;
    background-repeat: no-repeat;
    background-position: left 13% top 0%;
}

#s9_pic5 {
    background-image: url(../img/b_09_8.jpg);
    background-size: auto 110%;
    background-repeat: no-repeat;
    background-position: right 16% top -100%;
}

#s9_pic6 {
    background-image: url(../img/b_09_9.jpg);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left 18% top 0%;
}


/*section10=============================================================================*/
#section10 {
    margin-top: 12%;
}


/*section11=============================================================================*/
#s11_title {
    background-image: url(../img/b_11_bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding-bottom: 4%;
    background-position: center;
}

#s11_title .all_title_s {
    margin-top: 10%;
    margin-bottom: 1%;
}

#s11_title .all_title {
    margin-top: 0;
}

.s11_box {
    align-items: center;
    display: flex;
    margin-top: 4%;
    margin-bottom: 6%;
}

.s11_box1 {
    margin-bottom: 10%;
}

.s11_txtbox {
    border: var(--border_blue);
    border-radius: var(--border_radius);
    width: 80%;
    -webkit-border-radius: var(--border_radius);
    -moz-border-radius: var(--border_radius);
    -ms-border-radius: var(--border_radius);
    -o-border-radius: var(--border_radius);
    z-index: 1;
}

.s11_right {
    margin-left: 20%;
    padding: 8% 7% 5% 26%;
}

.s11_left {
    margin-right: 20%;
    padding: 8% 26% 5% 7%;
}

.s11_subtitle1,
.s11_subtitle2 {
    text-align: center;
    color: white;
    background-color: var(--txt_orange);
    left: 0;
    right: 0;
    padding: 1% 0;
    font-size: 25px;
    letter-spacing: .1em;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    width: 65%;
    margin-top: -14%;
}

.s11_subtitle1 {
    margin-left: 30%;
}

.s11_subtitle2 {
    margin-left: 5%;
}

.s11_pic {
    width: 40%;
    height: min(40vw, 400px);
    overflow: hidden;
    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);
    position: absolute;
    z-index: 3;
}

.s11_pic1 img {
    width: 110%;
    height: auto;
    margin-left: -4%;
    margin-top: -7%;
    max-width: unset;
}

.s11_pic2 {
    right: 0;
}

.s11_pic2 img {
    width: 200%;
    height: auto;
    margin-left: -63%;
    margin-top: -10%;
    max-width: unset;
}


#section12 {
    background-image: url('../img/b_12_bg.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding-bottom: 5vw;
    margin: 10% auto 0;
    top: 0;
    left: 0;
}

#s12_title {
    padding-top: 10%;
    padding-bottom: 5%;
    text-align: center;

}

#s12_title h2 {
    color: white;
    font-weight: 700;
    font-size: min(7.5vw, 75px);
    text-align: center;
    letter-spacing: .05em;
    margin: 5% 0 4% 0;
}

#s12_pic {
    width: 7%;
    height: auto;
    margin-top: 7%;
    margin-left: -3.5%;
}

.s12_btn {
    width: 80%;
    margin: 0 auto;
}

.s12_btn img {
    width: 100%;
}