@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');


.hs_box * { line-height:150%; font-size:15px; border:0; outline:none; text-decoration:none; padding:0; margin:0; list-style:none; box-sizing:border-box; max-width:100%; font-family: 'Noto Sans TC'; 
-webkit-transition: ease .4s; -moz-transition: ease .4s; -ms-transition: ease .4s; -o-transition: ease .4s; transition: ease .4s;}
.hs_box{overflow: hidden;scroll-behavior: smooth;background-color: #ffffff00;max-width: 2000px;margin: auto;}
.hs_box sub, .hs_box sup{vertical-align: unset;}
.hs_box i, .hs_box em , .hs_box dfn , .hs_box var{font-style: normal;line-height: 0px;}/*斜線標籤轉正*/
.hs_box table{border-spacing: 0px;border-collapse: collapse;}
.hs_box table td{border: 1px solid #000;}
.hs_box img { max-width:100%;line-height: 0px;}
.hs_clear::before, .hs_clear::after { content:''; display: table; }
.hs_clear::after { clear: both;}
.hs_clear { zoom: 1; }

/*Animations*/
[data-animate-in] { opacity: 0; transition: transform 1.6s ease, opacity 1.6s ease;}
[data-animate-in="up"] { transform: translate3d(0, 10px, 0);}/*由下往上*/
[data-animate-in="left"] { transform: translate3d(-5%, 0, 0);}/*由左往右*/
[data-animate-in="right"] { transform: translate3d(5%, 0, 0);}/*由右往左*/
[data-animate-in="down"] { transform: translate3d(0, -10%, 0);}/*由上往下*/
[data-animate-in="fadeIn"] { transform: translate3d(0, 0, 0);}/*淡入*/
[data-animate-in="scaleIn"] {transform: scale(.3);}/*放大淡入*/
[data-animate-in="rotateIn"] {transform: scale(.3) rotate(-10deg);}/*放大淡入*/
[data-animate-in].in-view { opacity: 1; transform:translate3d(0,0,0) rotate(0deg); -webkit-transform:translate3d(0,0,0) rotate(0); transition: transform .8s ease, opacity .8s ease;}
.fade-in { opacity: 0; transition: opacity .5s ease; }
/*Animations-end*/

/*關鍵字*/
.key_words{height: 0; max-height: 0; overflow: hidden;}
.key_words h2, .key_words h3, .key_words h4, .key_words h5, .key_words h6{color: rgba(255,255,255,.0);}

    html{
        scroll-behavior: smooth;
    }
    .edit_part {
        max-width: 100%;
        margin: auto;
        padding: 0;
    }
    .content_flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .more_content{display: none;}

    .hs_box{
        --f50:50px;
        --f45:45px;
        --f40:40px;
        --f30:30px;
        --f28:28px;
        --f25:25px;
        --f22:22px;
        --f20:20px;
        --f17:17px;
        --f15:15px;
    }

    .yu_link{
        position: absolute;
        top: -18vw;
        left: 0px;
        opacity: 0;
        z-index: -1;
    }


    /*首頁*/
    .yui_main,
    .yu_main{
        padding: 0 0 18vw;
        background: url(../images/all_bg.png) bottom center no-repeat;
        background-size: 100%;
    }
    .yui_a{
        overflow: hidden;
        padding: 0 5%;
        position: relative;
        z-index: 1;
    }
    .yui_a::after{
        content: '';
        background: url(../images/yui_bg01.png);
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 46px;
        position: absolute;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);
    }
    .yui_a::before{
        content: '';
        background: url(../images/yui_bg02.png);
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 83px;
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 5;
    }
    .yui_a01{
        max-width: 1575px;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: stretch;
        min-height: 500px;
    }
    @keyframes downmove {
        0%{background-position-y: 0px;}
        0%{background-position-y: 3700px;}
    }
    @keyframes upmove {
        0%{background-position-y: 0px;}
        0%{background-position-y: -3700px;}
    }
    .yui_a01 > i{
        display: block;
        width: 440px;
        background: url(../images/yui_img01.png);
        background-size: cover;
        animation: downmove 180s infinite linear;
    }
    .yui_a01 > s{
        display: block;
        width: 440px;
        background: url(../images/yui_img02.png);
        background-size: cover;
        animation: upmove 180s infinite linear;
    }
    .yui_a01 section{
        padding: 200px 0;
        margin: 0 5%;
        width: 580px;
        text-align: center;
    }
    .yui_a01 section b{
        display: block;
        font-size: var(--f15);
        color: #D25938;
        line-height: 120%;
        letter-spacing: 0.1em;
        font-family: 'Arial';
    }
    .yui_a01 section h4{
        font-size: var(--f45);
        color: #D25938;
        line-height: 120%;
        margin: 20px 0 0;
    }
    .yui_a01 section h4 s{
        font-size: var(--f45);
        color: #47ACD2;
        line-height: 120%;
    }
    .yui_a01 section h4 i{
        font-size: var(--f45);
        color: #3A7A39;
        line-height: 120%;
    }
    .yui_a01 section h5{
        font-size: var(--f40);
        color: #72482D;
        line-height: 120%;
    }
    .yui_a01 section p{
        font-size: var(--f17);
        color: #72482D;
        line-height: 220%;
        margin: 50px 0;
    }
    .yui_a01 section a{
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 300px;
        margin: auto;
        border-radius: 20px;
        background-color: #F0BF57;
        box-shadow: 8px 8px 1px #FDEBC3;
        font-size: var(--f17);
        color: #72482D;
        font-weight: bold;
        line-height: 220%;
        padding: 20px 15px;
        position: relative;
        z-index: 5;
    }
    .yui_a01 section a i{
        display: block;
        min-width: fit-content;
        margin: 0 10px 0 0;
    }
    .yui_a01 section a:hover{
        box-shadow: 0px 0px 0px #FDEBC3;
        letter-spacing: 0.1em;
    }
    .yui_a01 section em{
        display: block;
        margin: -3vw 0 0;
    }

    .yui_b{
        padding: 70px 5% 0;
        background: url(../images/yui_bg03.jpg);
        background-position: center bottom;
        background-size: cover;
    }
    .yui_b section{
        text-align: center;
    }
    .yui_b section b{
        display: block;
        font-size: var(--f15);
        color: #D25938;
        line-height: 120%;
        letter-spacing: 0.1em;
        font-family: 'Arial';
    }
    .yui_b section h4{
        margin: 15px 0;
        font-size: var(--f45);
        color: #333;
        line-height: 180%;
    }
    .yui_b section p{
        font-size: var(--f17);
        color: #333;
        line-height: 220%;
    }
    .yui_b ul{
        max-width: 1400px;
        margin: 100px auto 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 20px;
        row-gap: 30px;
    }
    .yui_b ul li{
        background-color: #fff;
        border: 10px solid #C4E3F0;
        border-radius: 30px;
        padding: 15px;
    }
    .yui_b ul li dl{
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 0 15px 0;
    }
    .yui_b ul li dl dt{
        min-width: fit-content;
        margin: 0 15px 0 0;
        line-height: 0px;
        transform: translateY(-20px);
    }
    .yui_b ul li dl dd{
        width: 170px;
        padding: 15px 0 0;
    }
    .yui_b ul li dl dd h4{
        font-size: var(--f20);
        color: #333;
        line-height: 180%;
    }
    .yui_b ul li dl dd p{
        font-size: var(--f15);
        color: #777;
        line-height: 180%;
        margin: 5px 0 0;
    }
    .yui_b ul li:nth-of-type(odd){
        transform: translateY(-70px);
    }
    .yui_c{
        background: url(../images/yui_bg04.jpg);
        background-position: top center;
        background-size: cover;
        padding: 210px 5%;
    }
    .yui_c01{
        max-width: 930px;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .yui_c01 section{
        min-width: fit-content;
        margin: 0 5% 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .yui_c01 section h4{
        writing-mode: vertical-lr;
        font-size: var(--f45);
        color: #72482D;
        line-height: 180%;
        letter-spacing: 0.07em;
        margin: 15px 0 0;
        position: relative;
        z-index: 1;
    }
    .yui_c01 section h4::after{
        content: 'FEATURE';
        font-size: var(--f15);
        color: #D25938;
        line-height: 120%;
        letter-spacing: 0.1em;
        font-family: 'Arial';
        writing-mode: vertical-lr;
        position: absolute;
        top: 5px;
        right: -10px;
    }
    .yui_c01 ul{
        width: 670px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        row-gap: 20px;
    }
    .yui_c01 ul li div{
        text-align: center;
        padding: 0 0 15px;
        margin: 0 0 15px;
        border-bottom: 3px dashed #E9DEBC;
    }
    .yui_c01 ul li div h4{
        font-size: var(--f28);
        color: #333;
        line-height: 180%;
        letter-spacing: 0.07em;
    }
    .yui_c01 ul li dl{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 15px 0 0;
    }
    .yui_c01 ul li dl dt{
        min-width: fit-content;
        margin: 0 15px 0 0;
    }
    .yui_c01 ul li dl dd{
        max-width: 165px;
        width: 100%;
    }
    .yui_c01 ul li dl dd h4{
        font-size: var(--f20);
        color: #D25938;
        line-height: 160%;
    }
    .yui_c01 ul li dl dd p{
        font-size: var(--f17);
        color: #333;
        line-height: 130%;
        margin: 5px 0 0;
    }
    .yui_d{
        padding: 70px 0;
    }
    @keyframes cmove {
        0%{background-position: 0px;}
        100%{background-position: -2650px;}
    }
    .yui_d > i{
        display: block;
        height: 320px;
        background: url(../images/yui_img15.png);
        background-size: cover;
        animation: cmove 120s infinite linear;
    }
    .yui_e{
        padding: 30px 5%;
    }
    .yui_e dl{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .yui_e dl dt{
        display: block;
        min-width: fit-content;
        margin: 0 5% 0 0;
    }
    .yui_e dl dd{
        width: 500px;
    }
    .yui_e dl dd h4{
        font-size: var(--f30);
        color: #49ADD3;
        line-height: 160%;
        margin: 0 0 30px;
    }
    .yui_e dl dd a{
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 300px;
        border-radius: 20px;
        background-color: #D25938;
        box-shadow: 8px 8px 1px #FDEBC3;
        font-size: var(--f17);
        color: #fff;
        font-weight: bold;
        line-height: 220%;
        padding: 10px 15px;
    }
    .yui_e dl dd a i{
        display: block;
        min-width: fit-content;
        margin: 0 10px 0 0;
        filter: grayscale(100) brightness(100);
        -webkit-filter: grayscale(100) brightness(100);
    }
    .yui_e dl dd a:hover{
        box-shadow: 0px 0px 0px #FDEBC3;
        letter-spacing: 0.1em;
    }
    /*首頁 end*/

    /*營地須知*/
    .yun1_banner{
        background: url(../images/yun_banner.jpg);
        background-size: cover;
    }
    .yun1_a{
        padding: 70px 5% 50px;
    }
    .yun1_a01{
        max-width: 1200px;
        margin: auto;
        padding: 2%;
        border-radius: 20px;
        background-color: #EEF7FB;
    }
    .yun1_a01 section{
        border-radius: 16px;
        text-align: center;
        background-color: #fff;
        padding: 30px 5%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        column-gap: 20px;
        row-gap: 30px;
    }
    .yun1_a01 section a{
        display: block;
        position: relative;
        z-index: 1;
        font-size: var(--f17);
        color: #333;
        line-height: 180%;
        font-weight: bold;
    }
    .yun1_a01 section a::after{
        content: '';
        width: 0px;
        height: 0px;
        background-color: #EEF7FB;
        z-index: -1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        opacity: 0;
        transition: all .4s;
        border-radius: 50%;
    }
    .yun1_a01 section a:hover{
        color: #D25938;
    }
    .yun1_a01 section a:hover::after{
        width: 40px;
        height: 40px;
        opacity: 1;
        transition: all .4s;
    }
    .yun1_a02{
        max-width: 1200px;
        margin: 50px auto 0;
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 50px;
        position: relative;
        z-index: 1;
    }
    .yun1_a02_a{
        padding: 2%;
        border-radius: 20px;
        background-color: #EEF7FB;
    }
    .yuni_num{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--f50);
        color: #A6D8F2;
        line-height: 120%;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0px;
        right: 0px;
        background-color: #EEF7FB;
        border-radius: 20px;
    }
    .yun1_a02_a dl{
        border-radius: 16px;
        background-color: #fff;
        padding: 50px 5%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .yun1_a02_a dl dd{
        margin: 0 0 0 3%;
    }
    .yun1_a02_a dl dd h4{
        font-size: var(--f28);
        color: #333;
        line-height: 180%;
        margin: 0 0 20px;
    }
    .yun1_a02_a dl dd p{
        font-size: var(--f17);
        color: #333;
        line-height: 200%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .yun1_a02_a dl dd p::before{
        content: '●';
        color: #8FCBE4;
        font-size: var(--f17);
        line-height: 200%;
        margin: 0 10px 0 0;
    }
    .yun1_a02_b{
        padding: 2%;
        border-radius: 20px;
        background-color: #EEF7FB;
        position: relative;
        z-index: 1;
    }
    .yun1_a02_b dl{
        border-radius: 16px;
        background-color: #fff;
        padding: 50px 5%;
    }
    .yun1_a02_b dl dd h4{
        font-size: var(--f28);
        color: #333;
        line-height: 180%;
        margin: 0 0 30px;
    }
    .yun1_a02_b dl dt table{
        width: 100%;
    }
    .yun1_a02_b dl dt table tr th{
        text-align: left;
        background-color: #A6D8F2;
        padding: 15px 5%;
        border: unset;
        border-bottom: 1px solid #EAEAEA;
        font-size: var(--f20);
        color: #333;
        line-height: 180%;
    }
    .yun1_a02_b dl dt table tr th:nth-of-type(1){
        border-top-left-radius: 10px;
        width: 24%;
    }
    .yun1_a02_b dl dt table tr th:nth-of-type(2){
        width: 23%;
    }
    .yun1_a02_b dl dt table tr th:nth-of-type(3){
        width: 23%;
    }
    .yun1_a02_b dl dt table tr th:nth-of-type(4){
        border-top-right-radius: 10px;
        width: 30%;
    }
    .yun1_a02_b dl dt table tr td{
        padding: 10px 5%;
        border: unset;
        border-bottom: 1px solid #EAEAEA;
        font-size: var(--f17);
        color: #333;
        line-height: 180%;
        text-align: left;
    }
    .yun1_a02_b dl dt table tr td s{
        display: inline-block;
        font-size: var(--f17);
        color: #333;
        line-height: 180%;
    }

    .yun1_b{
        padding: 130px 5% 70px;
        background: url(../images/yun_bg02.jpg);
        background-position: top center;
        background-size: cover;
        position: relative;
        z-index: 1;
    }
    .yun1_b > i{
        position: absolute;
        top: -12vw;
        left: 0px;
    }
    .yun1_b > section{
        text-align: center;
    }
    .yun1_b > section h4{
        font-size: var(--f40);
        color: #333;
        line-height: 180%;
    }
    .yun1_b01{
        max-width: 1200px;
        margin: 50px auto 0;
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 50px;
    }
    .yun1_b01_a{
        padding: 2%;
        border-radius: 20px;
        background-color: #EEF7FB;
        position: relative;
        z-index: 1;
    }
    .yun1_b01_a section{
        border-radius: 16px;
        background-color: #fff;
        padding: 50px 5%;
    }
    .yun1_b01_a section h4{
        font-size: var(--f28);
        color: #333;
        line-height: 180%;
        margin: 0 0 30px;
    }
    .yun1_b01_a section dl{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .yun1_b01_a section dl dd{
        width: 100%;
        max-width: 600px;
        margin: 0 30px 0 0;
    }
    .yun1_b01_a section dl dd p{
        font-size: var(--f17);
        color: #333;
        line-height: 200%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin:0 0 10px 0;
    }
    .yun1_b01_a section dl dd p::before{
        content: '●';
        color: #8FCBE4;
        font-size: var(--f17);
        line-height: 200%;
        margin: 0 10px 0 0;
    }
    .yun1_b01_a section dl dd em{
        display: block;
        margin: 15px 0 0;
        padding: 5px 15px;
        background-color: #FDEBC3;
        border-radius: 10px;
        font-size: var(--f17);
        color: #333;
        line-height: 180%;
    }
    .yun1_b01_a section dl dt{
        width: 100%;
        max-width: 320px;
    }
    .yun1_b01_a section dl dt h5{
        font-size: var(--f25);
        color: #333;
        line-height: 180%;
        padding: 0 0 15px;
        border-bottom: 4px dashed #bbb;
    }
    .yun1_b01_a section dl dt p{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 20px 0 0;
        font-size: var(--f17);
        color: #333;
        line-height: 120%;
    }
    .yun1_b01_a section dl dt p s{
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 50px;
        height: 40px;
        border-radius: 500px;
        background-color: #B0DAEC;
        margin: 0 10px 0 0;
        font-size: var(--f20);
        color: #333;
        line-height: 120%;
        font-weight: bold;
    }
    .yun1_b01_b{
        padding: 2%;
        border-radius: 20px;
        background-color: #EEF7FB;
        position: relative;
        z-index: 1;
    }
    .yun1_b01_b dl{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-radius: 16px;
        background-color: #fff;
        padding: 70px 5% 50px;
    }
    .yun1_b01_b dl dd{
        width: 100%;
        max-width: 600px;
        margin: 0 30px 0 0;
    }
    .yun1_b01_b dl dd h4{
        font-size: var(--f28);
        color: #333;
        line-height: 180%;
    }
    .yun1_b01_b dl dd em{
        display: block;
        margin: 30px 0 20px;
        padding: 5px 15px;
        background-color: #FDEBC3;
        border-radius: 10px;
        font-size: var(--f17);
        color: #333;
        line-height: 180%;
    }
    .yun1_b01_b dl dd p{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 10px 0 0;
        font-size: var(--f17);
        color: #333;
        line-height: 120%;
    }
    .yun1_b01_b dl dd p::before{
        content: '●';
        color: #8FCBE4;
        font-size: var(--f17);
        line-height: 120%;
        margin: 0 10px 0 0;
    }
    .yun1_b01_b dl dd p s{
        font-size: var(--f17);
        color: #D90000;
        line-height: 120%;
    }
    .yun1_b01_c{
        padding: 2%;
        border-radius: 20px;
        background-color: #EEF7FB;
        position: relative;
        z-index: 1;
    }
    .yun1_b01_c section{
        border-radius: 16px;
        background-color: #fff;
        padding: 50px 5%;
    }
    .yun1_b01_c section h4{
        font-size: var(--f28);
        color: #333;
        line-height: 180%;
        margin: 0 0 30px;
    }
    .yun1_b01_c section p{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 10px 0 0;
        font-size: var(--f17);
        color: #333;
        line-height: 120%;
    }
    .yun1_b01_c section p::before{
        content: '●';
        color: #8FCBE4;
        font-size: var(--f17);
        line-height: 120%;
        margin: 0 10px 0 0;
    }

    .yun1_c{
        padding: 200px 5%;
        background: url(../images/yun_bg03.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
        z-index: 1;
    }
    .yun1_c > h4{
        max-width: 995px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .yun1_c > h4 s{
        font-size: var(--f28);
        color: #fff;
        display: block;
        margin: 0 5%;
        min-width: fit-content;
        text-align: center;
    }
    .yun1_c > h4::after,
    .yun1_c > h4::before{
        content: '';
        width: 100%;
        height: 1px;
        background-color: #fff;
    }
    .yun1_c > p{
        font-size: var(--f17);
        color: #fff;
        max-width: 700px;
        margin: 70px auto;
        line-height: 160%;
        text-align: center;
    }
    .yun1_c ul{
        max-width: 635px;
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 30px;
        row-gap: 15px;
    }
    .yun1_c ul li{
        background-color: #fff;
        border-radius: 15px;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .yun1_c ul li s{
        border-radius: 15px;
        min-width: 100px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 5px;
        background-color: #A6D8F2;
        font-size: var(--f17);
        color: #333;
    }
    .yun1_c ul li p{
        font-size: var(--f17);
        color: #333;
        padding: 8px 15px;
    }

    .yun1_d{
        padding: 30px 5% 0;
        position: relative;
        z-index: 1;
    }
    .yun1_d > section{
        text-align: center;
    }
    .yun1_d > section h4{
        font-size: var(--f40);
        color: #333;
        line-height: 180%;
    }
    .yun1_d01{
        max-width: 1200px;
        margin: 50px auto;
        padding: 2%;
        border-radius: 20px;
        background-color: #EEF7FB;
        position: relative;
        z-index: 1;
    }
    .yun1_d01 section{
        border-radius: 16px;
        background-color: #fff;
        padding: 50px 5%;
    }
    .yun1_d01 section h4{
        font-size: var(--f28);
        color: #333;
        line-height: 180%;
        margin: 0 0 30px;
    }
    .yun1_d01 section > s{
        display: block;
        font-size: var(--f17);
        color: #333;
        line-height: 120%;
        margin: 0 0 20px;
    }
    .yun1_d01 section p{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 10px 0 0;
        font-size: var(--f17);
        color: #333;
        line-height: 120%;
    }
    .yun1_d01 section p::before{
        content: '●';
        color: #8FCBE4;
        font-size: var(--f17);
        line-height: 120%;
        margin: 0 10px 0 0;
    }
    .yun1_d01 section em{
        display: block;
        margin: 30px 0;
        padding: 5px 15px;
        background-color: #FDEBC3;
        border-radius: 10px;
        font-size: var(--f17);
        color: #333;
        line-height: 180%;
    }
    .yun1_d02{
        max-width: 910px;
        margin: auto;
        text-align: center;
        position: relative;
        z-index: 1;
    }
    .yun1_d02 > img{
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
    .yun1_d02 > h4{
        font-size: var(--f40);
        color: #87C5B8;
        line-height: 140%;
    }
    .yun1_d02 > p{
        margin: 50px 0 30px;
        font-size: var(--f28);
        color: #333;
        line-height: 140%;
        letter-spacing: 0.07em;
    }
    .yun1_d02 > p b{
        font-size: var(--f28);
        color: #D25938;
        line-height: 140%;
        letter-spacing: 0.07em;
        text-decoration: underline;
        text-underline-offset: -5px;
        text-decoration-thickness: 15px;
        text-decoration-color: #d1fff5;
        text-decoration-skip-ink:none;
    }
    .yun1_d02 > a{
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 500px;
        border-radius: 20px;
        background-color: #D25938;
        box-shadow: 8px 8px 1px #FDEBC3;
        font-size: var(--f22);
        color: #fff;
        font-weight: bold;
        line-height: 220%;
        padding: 15px;
        margin: auto;
    }
    .yun1_d02 > a i{
        display: block;
        min-width: fit-content;
        margin: 0 10px 0 0;
        filter: grayscale(100) brightness(100);
        -webkit-filter: grayscale(100) brightness(100);
    }
    .yun1_d02 > a:hover{
        box-shadow: 0px 0px 0px #FDEBC3;
        letter-spacing: 0.1em;
    }
    /*營地須知 end*/

    /*注意事項*/
    .yun2_banner{
        background: url(../images/yun2_banner.jpg);
        background-size: cover;
    }
    .yun2_a{
        padding: 70px 5% 100px;
    }
    .yun2_a01{
        max-width: 1200px;
        margin: auto;
        padding: 2%;
        border-radius: 20px;
        background-color: #EEF7FB;
    }
    .yun2_a01 dl{
        border-radius: 16px;
        text-align: center;
        background-color: #fff;
        padding: 30px 5%;
    }
    .yun2_a01 dl dd{
        max-width: 505px;
        margin: auto;
        display: grid;
        grid-template-columns: 1.3fr 1fr 1fr;
        column-gap: 20px;
        row-gap: 30px;
    }
    .yun2_a01 dl dd a{
        display: block;
        position: relative;
        z-index: 1;
        font-size: var(--f17);
        color: #333;
        line-height: 180%;
        font-weight: bold;
    }
    .yun2_a01 dl dd a::after{
        content: '';
        width: 0px;
        height: 0px;
        background-color: #EEF7FB;
        z-index: -1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        opacity: 0;
        transition: all .4s;
        border-radius: 50%;
    }
    .yun2_a01 dl dd a:hover{
        color: #D25938;
    }
    .yun2_a01 dl dd a:hover::after{
        width: 40px;
        height: 40px;
        opacity: 1;
        transition: all .4s;
    }
    .yun2_a02{
        margin: 70px auto 100px;
        position: relative;
        z-index: 1;
    }
    .yun2_a02 > section{
        text-align: center;
    }
    .yun2_a02 > section h4{
        font-size: var(--f40);
        color: #333;
        line-height: 180%;
    }
    .yun2_a02 > ul{
        max-width: 1200px;
        margin: 50px auto 0;
        padding: 2%;
        border-radius: 20px;
        background-color: #EEF7FB;
        position: relative;
        z-index: 1;
    }
    .yun2_a02 > ul > li{
        border-radius: 16px;
        background-color: #fff;
        padding: 30px 5% 50px;
    }

    .yun2_a03{
        max-width: 1200px;
        margin: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        z-index: 1;
    }
    .yun2_a03 section{
        width: 100%;
        max-width: 340px;
        margin: 0 0 0 5%;
    }
    .yun2_a03 section h4{
        font-size: var(--f40);
        color: #333;
        line-height: 180%;
    }
    .yun2_a03 section em{
        display: block;
        margin: 10px 0 40px;
    }
    .yun2_a03 section p{
        margin: 15px 0 0;
        font-size: var(--f17);
        color: #333;
        line-height: 120%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .yun2_a03 section p i{
        display: block;
        min-width: fit-content;
        margin: 0 15px 0 0;
    }

    .yun2_b{
        position: relative;
        z-index: 1;
        padding: 100px 5%;
        background: url(../images/yun_bg04.jpg)#faf9f4 no-repeat;
        background-position: center;
    }
    .yun2_b::before{
        content: '';
        background: url(../images/yun_bg05.jpg);
        background-position: center;
        height: 83px;
        width: 100%;
        position: absolute;
        top: -40px;
        left: 0px;
    }
    .yun2_b::after{
        content: '';
        background: url(../images/yun_bg06.jpg) ;
        background-position: center;
        height: 83px;
        width: 100%;
        position: absolute;
        bottom: -40px;
        left: 0px;
    }
    .yun2_b > section{
        text-align: center;
    }
    .yun2_b > section h4{
        font-size: var(--f40);
        color: #333;
        line-height: 180%;
        margin: 15px 0;
    }
    .yun2_b > section p{
        font-size: var(--f17);
        color: #333;
        line-height: 120%;
        max-width: 700px;
        margin: 50px auto;
    }
    .yun2_b > dl{
        max-width: 1200px;
        margin: auto;
        padding: 2%;
        border-radius: 20px;
        background-color: #EEF7FB;
        position: relative;
        z-index: 1;
    }
    .yun2_b > dl dd{
        border-radius: 16px;
        background-color: #fff;
        padding: 20px 4%;
    }
    .yun2_b > dl dd p{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: var(--f17);
        color: #333;
        line-height: 180%;
        margin: 10px 0;
    }
    .yun2_b > dl dd p::before{
        content: '●';
        color: #8FCBE4;
        font-size: var(--f17);
        line-height: 180%;
        margin: 0 10px 0 0;
    }
    .yun2_c{
        padding: 150px 5% 0;
    }
    /*注意事項 end*/

    /*營區注意事項*/
    .yun_a{
        max-width: 1250px;
        margin: auto;
    }
    .yun_a h4{
        max-width: fit-content;
        text-align: center;
        padding: 5px 3%;
        border-radius: 5px;
        background-color: #49ADD3;
        font-size: var(--f25);
        margin: 40px 0 20px;
        color: #fff;
    }
    .yun_a > i{
        display: block;
        border-bottom: 3px dashed #49ADD3;
        margin: 40px 0 0;
    }
    .yun_a01 p{
        font-size: var(--f17);
        color: #333;
        line-height: 160%;
        letter-spacing: 0.1em;
    }
    .yun_a02 > p{
        font-size: var(--f17);
        color: #333;
        line-height: 160%;
        letter-spacing: 0.1em;
    }
    .yun_a02 > h5{
        font-size: var(--f17);
        color: #D25938;
        line-height: 160%;
        letter-spacing: 0.1em;
        margin: 10px 0 0;
    }
    .yun_a03 > p{
        font-size: var(--f17);
        color: #333;
        line-height: 160%;
        letter-spacing: 0.1em;
    }
    .yun_a04 > p{
        font-size: var(--f17);
        color: #333;
        line-height: 160%;
        letter-spacing: 0.1em;
    }
    .yun_a04 > h5{
        font-size: var(--f17);
        color: #D25938;
        line-height: 160%;
        letter-spacing: 0.1em;
        margin: 10px 0;
    }
    .yun_a05 section{
        max-width: 1000px;
        margin: 20px 0;
    }
    .yun_a05 section table{
        width: 100%;
        
    }
    .yun_a05 section table tr th{
        background-color: #A6D8F2;
        border: 1px solid #A6D8F200;
        text-align: center;
        font-size: var(--f17);
        color: #333;
        line-height: 120%;
        font-weight: normal;
        padding: 10px;
    }
    .yun_a05 section table tr th:nth-of-type(1){
        border-top-left-radius: 15px;
        width: 20%;
    }
    .yun_a05 section table tr th:nth-of-type(2){
        width: 35%;
    }
    .yun_a05 section table tr th:nth-of-type(3){
        border-top-right-radius: 15px;
        width: 45%;
    }
    .yun_a05 section table tr th ul{
        max-width: 215px;
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
        row-gap: 10px;
    }
    .yun_a05 section table tr th ul li{
        font-size: var(--f17);
        color: #333;
        line-height: 120%;
        font-weight: normal;
    }
    .yun_a05 section table tr th ul li s{
        font-size: var(--f17);
        color: #fff;
        line-height: 120%;
        font-weight: normal;
    }
    .yun_a05 section table tr td{
        padding: 15px 10px;
        text-align: center;
        border: 1px solid #EAEAEA;
        font-size: var(--f17);
        color: #333;
        font-weight: normal;
    }
    .yun_a05 section table tr td p{
        font-size: var(--f17);
        color: #49ADD3;
        font-weight: normal;
        line-height: 140%;
    }
    .yun_a05 section table tr td p s{
        font-size: var(--f17);
        color: #338B91;
        font-weight: normal;
        line-height: 140%;
    }
    .yun_a05 section table tr td b{
        font-size: var(--f17);
        color: #D25938;
        line-height: 180%;
    }
    .yun_a05 h6{
        padding: 10px 3%;
        border-radius: 5px;
        text-align: center;
        font-size: var(--f17);
        color: #333;
        line-height: 180%;
        max-width: fit-content;
        background-color: #FDEBC3;
        margin: 40px 0 20px;
        font-weight: normal;
    }
    .yun_a05 dl dd{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        color: #333;
        font-size: var(--f17);
        line-height: 180%;
    }
    .yun_a05 dl dd::before{
        content: '●';
        color: #8FCBE4;
        font-size: var(--f17);
        line-height: 180%;
        margin: 0 10px 0 0;
    }
    .yun_a05 dl dt{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        color: #D25938;
        font-size: var(--f17);
        line-height: 180%;
        font-weight: 500;
    }
    .yun_a05 dl dt::before{
        content: '●';
        color: #D25938;
        font-size: var(--f17);
        line-height: 180%;
        margin: 0 10px 0 0;
    }
    .yun_a06{
        margin: 50px auto 30px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 20px;
        row-gap: 30px;
    }
    .yun_a06 > a{
        display: block;
        position: relative;
        z-index: 1;
        line-height: 0px;
    }
    .yun_a06 > a h6{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 5%;
        border-radius: 10px;
        background-color: #49ADD3;
        font-size: var(--f20);
        color: #fff;
        font-weight: 500;
        position: relative;
        z-index: 5;
    }
    .yun_a06 > a h6::after{
        content: '+';
        font-size: var(--f20);
        color: #fff;
        font-weight: 500;
        margin: 0 0 0 10px;
    }
    .yun_a06 > a::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0px;
        right: 0px;
        opacity: 0;
        border-radius: 10px;
        background-color: #F0BF57;
        z-index: -1;
        transition: all .4s;
    }
    .yun_a06 > a:hover h6{
        background-color: #D25938;
    }
    .yun_a06 > a:hover::before{
        opacity: 1;
        bottom: -8px;
        right: -8px;
        transition: all .4s;
    }
    /*營區注意事項 end*/


    @media (max-width: 1360px) {
        .hs_box{
            --f50:45px;
            --f45:40px;
            --f40:35px;
            --f30:28px;
            --f28:25px;
            --f25:22px;
            --f22:20px;
            --f20:20px;
            --f17:17px;
            --f15:15px;
        }

        /*首頁*/
        .yui_b ul{grid-template-columns: 1fr 1fr;max-width: 700px;}
        /*首頁 end*/
    }
    @media (max-width: 1200px) {
        /*營地須知*/
        .yun1_a01 section{padding: 30px 2%;}
        .yun1_c{padding: 150px 5%;}
        /*營地須知 end*/
    }
    @media (max-width: 1024px) {
        /*首頁*/
        .yui_a{padding: 70px 5% 50px;}
        .yui_a01{flex-wrap: wrap;justify-content: space-between;}
        .yui_a01 section{order: 1;width: 100%;padding: 0 0 30px;}
        .yui_a01>i{order: 2;width: 49%;height: 600px;}
        .yui_a01>s{order: 3;width: 49%;height: 600px;}
        .yui_d > i{height: 260px;}
        .yui_e dl dt img{width: 200px;}
        /*首頁 end*/

        /*營地須知*/
        .yun1_a01 section{padding: 30px 15px;grid-template-columns: 1fr 1fr 1fr 1fr;}
        .yuni_num{width: 70px;height: 70px;}
        .yun1_b{padding: 70px 5%;}
        .yun1_c{padding: 100px 5%;}
        /*營地須知 end*/

        /*營區注意事項*/
            .yun_a06{grid-template-columns: 1fr 1fr;max-width: 500px;margin: 50px 0 30px;}
        /*營區注意事項 end*/
    }
    @media (max-width: 968px) {
        .hs_box{
            --f50:40px;
            --f45:35px;
            --f40:30px;
            --f30:25px;
            --f28:22px;
            --f25:20px;
            --f22:20px;
            --f20:18px;
            --f17:16px;
            --f15:14px;
        }

        /*營地須知*/
        .yun1_b01_a section dl{flex-direction: column;}
        .yun1_b01_a section dl dd{max-width: unset;margin: 0 0 30px;}
        /*營地須知 end*/

    }
    @media (max-width: 768px) {
        /*首頁*/
        .yui_a01>i,
        .yui_a01>s{height: 400px;}
        .yui_b ul li dl{flex-direction: column;align-items: center;transform: translateY(-15px);}
        .yui_b ul li dl dd{padding: 10px 0 0;text-align: center;}
        .yui_b ul li dl dt{transform: unset;margin: unset;}
        .yui_c{padding: 150px 5%;}
        .yui_c01{flex-direction: column;align-items: center;}
        .yui_c01 section{margin: 0 0 30px;}
        .yui_d > i{height: 200px;}
        .yui_e dl dt img{width: 150px;}
        /*首頁 end*/

        /*營地須知*/
        .yun1_a02_a dl{flex-direction: column;align-items: center;}
        .yun1_a02_a dl dd{margin: 30px 0 0;}
        .yun1_a02_a dl dd h4{text-align: center;}
        .yun1_a02_b dl dt table tr td,
        .yun1_a02_b dl dt table tr th{padding: 10px 5px;}
        .yun1_b01_b dl{flex-direction: column-reverse;align-items: center;}
        .yun1_b01_b dl dd{margin: 30px 0 0;}
        .yun1_b01_b dl dd h4{text-align: center;}
        /*營地須知 end*/

        /*注意事項*/
        .yun2_a03{flex-direction: column;}
        .yun2_a03 section{margin: 30px 0 0;}
        /*注意事項 end*/
    }
    @media (max-width: 572px) {
        .hs_box{
            --f50:35px;
            --f45:30px;
            --f40:24px;
            --f30:22px;
            --f28:20px;
            --f25:18px;
            --f22:17px;
            --f20:16px;
            --f17:14px;
            --f15:13px;
        }

        /*首頁*/
        .yui_a{padding: 70px 5% 30px;}
        .yui_a::before{height: 50px;}
        .yui_a01>i,
        .yui_a01>s{height: 300px;}
        .yui_b ul{grid-template-columns: 1fr;max-width: 320px;margin: 50px auto 0;}
        .yui_b ul li:nth-of-type(odd){transform: unset;}
        .yui_c{padding: 100px 5%;}
        .yui_c01 ul{grid-template-columns: 1fr;row-gap: 40px;}
        .yui_c01 ul li dl dt img{width: 70px;}
        .yui_c01 ul li dl dd{max-width: 180px;}
        .yui_d > i{height: 150px;}
        .yui_e dl{flex-direction: column;}
        .yui_e dl dt{margin: 0 0 30px;}
        .yui_e dl dd{width: unset;text-align: center;}
        .yui_e dl dd a{margin: auto;}
        /*首頁 end*/

        /*營地須知*/
        .yun1_a01 section{grid-template-columns: 1fr 1fr 1fr;}
        .yuni_num{width: 50px;height: 50px;border-radius: 10px;}
        .yun1_a02_b dl dt table tr td,
        .yun1_a02_b dl dt table tr th{text-align: center;}
        .yun1_a02_b dl dt table tr td s{display: block;}
        .yun1_c ul{grid-template-columns: 1fr;max-width: 200px;}
        .yun1_c ul li s{min-width: 70px;}
        /*營地須知 end*/
    }
    @media (max-width: 455px) {
        /*首頁*/
        .yui_a01 section p br{display: none;}
        /*首頁 end*/

        /*營地須知*/
        .yun1_a01 section{grid-template-columns: 1fr 1fr;}
        .yun1_a02_b dl dt table tr th:nth-of-type(1){width: 34%;}
        .yun1_a02_b dl dt table tr th:nth-of-type(2){width: 18%;}
        .yun1_a02_b dl dt table tr th:nth-of-type(3){width: 18%;}
        /*營地須知 end*/

        /*營區注意事項*/
            .yun_a05 section{overflow: scroll;}
            .yun_a05 section table tr th:nth-of-type(1){min-width: 100px;}
            .yun_a05 section table tr th:nth-of-type(2){min-width: 200px;}
            .yun_a05 section table tr th:nth-of-type(3){min-width: 200px;}
            .yun_a06{grid-template-columns: 1fr;max-width: 200px;row-gap: 20px;}
        /*營區注意事項 end*/
    }
    @media (max-width: 375px) {}