/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure, mark {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    /*vertical-align: baseline;*/
    background: transparent;
}

body {
    line-height: 1;
    -webkit-text-size-adjust: none;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    /* border-collapse: collapse;*/
    border-spacing: 0;
}

img {
    max-width: 100%;
    image-rendering: -webkit-optimize-contrast;
}

a img {
    border: none;
}

.clean {
    clear: both;
}

a {
    color: #333333;
    text-decoration: none;
    blr: expression(this.onFocus=this.blur());
    outline: none; /* for Firefox */
    hlbr: expression(this.onFocus=this.blur()); /* for IE */
    -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;
}

a:hover {
    text-decoration: none;
}

a:focus {
    -moz-outline-style: none;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
	text-decoration: inherit;
	font: inherit;
	font-weight: inherit;
}

/*wow*/
.wow:first-child {
    visibility: hidden;
}

#dmheader {
    display: none !important;
    visibility: hidden \9;
}

#dmfooter_wrap {
    overflow: hidden;
}


/*PC
-----------------------------------------------------------------*/

.container {
    width: 100%;
    margin: auto;
    clear: both;
    font-family: Verdana,'Microsoft YaHei','Microsoft JhengHei';
}

.block-center {
    width: 100%;
    max-width: 960px;
    margin: auto;
    clear: both;
}

.block-menu {
    width: 100%;
    background: #ffffff;
    clear: both;
    padding: 20px 0;
    box-shadow: 0px 0px 20px rgb(59 59 59 / 30%);
}

.block-menu .block-center {
    display: flex;
    gap: 10px;
    align-items: center;
}

.block-header {
    width: 100%;
    background: url(../images/header_bk.jpg) no-repeat center;
    padding-bottom: 30px;
    display: table;
    position: relative;
}

.block-must {
    width: 100%;
    background: #ececec;
    display: table;
    padding: 50px 0;
}

.block-tour {
    width: 100%;
    background: url(../images/tour_bk.jpg) no-repeat center bottom #ebebeb;
    /* min-height: 890px;
    display: table; */
    
    padding: 50px 0;
}

.block-travel {
    width: 100%;
    background: #fdf3ce;
    /* min-height: 890px;
    display: table; */
    
    padding: 50px 0;
}

.block-list {
    background: #ffc600;
    padding: 50px 0;
}

.block-contact {
    background: #f5f5f5;
    padding: 50px 0;
}

.block-contact .block-center {
    text-align: center;
}

/*導覽列*/
.menu-logo {
    max-width: 167px;
    width: 100%;
    order: 1;
}

    .menu-logo img {
        max-width: 100%;
    }

.menu-but {
    display: inline-flex;
    width: calc(100% - 317px);
    text-align: right;
    order: 2;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: wrap;
}

.menu-but li {
    text-align: center;
    display: flex;
}

.menu-but li a {
    display: inline-block;
    padding: 8px 10px;
    border: 2px solid #ffffff;
    border-radius: 20px;
    font-size: 14px;
    line-height: 20px;
}

.menu-but li a:hover, .menu-but a.active {
    border: 2px solid #ffc600;
}

.menu-language {
    width: 100%;
    max-width: 150px;
    order: 3;
}

#nav .nice-select {
    border: 2px solid #d5d5d5;
    border-radius: 2px;
    height: 26px;
    line-height: 22px;
}

#nav .nice-select .list {
    border-radius: 2px;
}


/*主視覺*/

.header-title {
    margin: 200px auto 0 auto;
    max-width: 654px;
    width: 100%;
    padding: 0 30px;
    
}

.header-title img {
    width: 100%;
}

.header-title-text {
    width: 100%;
    text-align: center;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    letter-spacing: 1px;
}

.header-infor {
    margin: 120px auto 0 auto;
    width: 100%;
    max-width: 520px;
    text-align: center;
    font-size: 18px;
    line-height: 25px;
    color: #ffffff;
}

.header-infor-title strong {
    font-weight: bold;
    display: inline-block;
    font-size: 26px;
    line-height: 20px;
    margin: 0 10px 10px 10px;
    letter-spacing: 2px;
}

.header-infor-title span {
    /* line-height: 20px;
    display: inline-block;
    height: 20px;
    max-width: 100px;
    width: 100%;
    background: url(../images/header_line.png) repeat-x center; */
    display: none;
}

.header-infor-text {
    margin-bottom: 50px;
    line-height: 26px;
    font-size: 18px;
}

.header-go {
    width: 100%;
    clear: both;
    font-size: 18px;
    text-align: center;
    color: #ffffff;
    margin-bottom: 15px;
}

.header-arrow {
    width: 100%;
    text-align: center;
}

.header-arrow img {
    max-width: 100%;
    margin: auto;
    border: 0px;
    animation-name: floating;
    -webkit-animation-name: floating;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0%);
    }

    50% {
        transform: translateY(20%);
    }

    100% {
        transform: translateY(0%);
    }
}

@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%);
    }

    50% {
        -webkit-transform: translateY(20%);
    }

    100% {
        -webkit-transform: translateY(0%);
    }
}

.must-title {
    font-size: 40px;
    font-weight: bold;
    color: #333333;
    text-align: center;
    margin: 0 auto 40px auto;
}

.must-title span ,.must-title h2 {
    display: table;
    margin: auto;
    background: url(../images/white_bk.png) no-repeat left;
    height: 71px;
    line-height: 71px;
    text-align: center;
    font-weight: bold;
    color: #333333;
    font-size: 40px;
    padding: 0 20px;
}

.must-title img {
    max-width: 100%;
    margin: 0 0 -13px 7px;
}

.must-row {
    display: flex;
    width: 100%;
    clear: both;
    align-items: center;
    margin: 20px 0 0 0;
}

.must-box {
    display: table-cell;
    width: 50%;
    vertical-align: top;
}

.must-left, .must-right {
    width: 100%;
    max-width: 460px;
    min-height: 278px;
    padding: 25px 40px 30px 115px;
    border-radius: 2px;
}

.must-left {
    float: left;
    background: url(../images/special_bk1.jpg) no-repeat 0px 13px #ffffff;
}

.must-right {
    float: right;
    background: url(../images/special_bk2.jpg) no-repeat 0px 13px #ffffff;
}

.must-right a {
    display: table;
    line-height: 22px;
    padding: 8px 24px;
    margin: 12px auto 0 auto;
    background: #ffc600;
    color: #333333;
    box-shadow: 0 2px 0 #e69f00;
    min-width: 190px;
    text-align: center;
}

.must-right a:hover {
    background: #ecb800;
}

.must-box-title {
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 10px;
    line-height: 25px;
    color: #333333;
}

.must-box-list li {
    list-style: disc;
    font-size: 15px;
    line-height: 22px;
    margin-left: 20px;
}

.must-link-title {
    display: inline-flex;
    width: 100%;
    max-width: 255px;
    text-align: left;
    padding: 12px 10px 12px 0;
    font-size: 15px;
    font-weight: bold;
    line-height: 22px;
    border-right: 1px solid #ffc600;
    vertical-align: middle;
    flex-wrap: wrap;
}

.must-link-title span {
    font-size: 13px;
    font-weight: normal;
}

.must-link-box {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 10px;
    padding: 0 0 0 10px;
}

.must-link-box a {
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    color: #84329b;
    border-bottom: 1px dashed #84329b;
    line-height: 22px;
    vertical-align: middle;
}

.must-link-box a:hover {
    color: #9d5baf;
    border-bottom: 1px dashed #9d5baf;
}

/*行程*/
.tour-title {
    width: 100%;
}

.tour-title span {
    display: table;
    margin: auto;
    background: url(../images/gray_bk.png) no-repeat left;
    height: 71px;
    line-height: 71px;
    text-align: center;
    font-weight: bold;
    color: #333333;
    font-size: 40px;
    padding: 0 20px;
}

.tour-banner {
    width: 100%;
    clear: both;
    margin: 30px 0;
}

.tour-banner img {
    width: 100%;
}

.tour-all {
    width: 100%;
    clear: both;
    display: grid;
    margin: 20px 0 0 0;
    text-align: left;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    align-items: stretch;
    padding: 20px;
    grid-template-columns: repeat(3,1fr);
}

.tour-two-space .tour-all {
    grid-template-columns: repeat(2,1fr);
    width: 50%;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.tour-cell {
    display: grid;
    width: 100%;
    vertical-align: top;
    align-self: stretch;
    height: 100%;
    align-items: stretch;
    align-content: stretch;
    min-height: 100%;
}

.tour-cell a {
    display: grid;
        min-height: 100%;
        align-items: stretch;
        align-content: stretch;
}

@media all and (-ms-high-contrast:none) {
    *::-ms-backdrop, .tour-cell {
        width: 32.9% !important;
    }
    /* IE11 */
}

@-moz-document url-prefix() {
    .tour-cell {
        width: 32.9% !important;
    }
}

.tour-box {
    display: inline-flex;
    width: 100%;
    margin: auto;
    border-radius: 20px;
    background: #ffffff;
    position: relative;
    height: 100%;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: flex-start;
}

.small-box {
    min-height: 270px;
}

.tour-img {
    width: 100%;
    clear: both;
}

.tour-img img {
    width: 100%;
    max-width: 100%;
    clear: both;
    border: 0px;
}

.tour-box:hover .tour-img {
    opacity: 0.9;
}

.tour-small-box {
    padding: 0 12px;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.tour-cat {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 15px;
    background: #84329b;
    color: #ffffff;
    text-align: center;
    display: table;
    padding: 7px 20px;
}

.tour-name {
    clear: both;
    width: 100%;
    font-size: 15px;
    color: #84329b;
    font-weight: bold;
    text-align: left;
    line-height: 20px;
    padding: 10px 0;
}

.tour-infor {
    clear: both;
    width: 100%;
    font-size: 13px;
    text-align: left;
    margin: 0 0 5px 0;
    padding-bottom: 5px;
    line-height: 18px;
    border-bottom: 1px solid #cccccc;
}

.tour-days {
    text-align: right;
    clear: both;
    width: 100%;
    font-size: 13px;
    line-height: 40px;
    min-height: 40px;
    margin-bottom: 10px;
}

.tour-days img {
    width: 100%;
    max-width: 15px;
    margin: 0 5px -3px 0;
}

.tour-price {
    width: 100%;
    clear: both;
    color: #d6001c;
    font-size: 15px;
    font-weight: bold;
    text-align: right;
    margin-bottom: 10px;
}

.tour-price span {
    font-size: 13px;
}

.tour-gold {
    font-size: 13px;
    color: #333333;
    padding: 2px 5px;
    line-height: 25px;
    font-weight: bold;
    text-align: left;
    margin: 0 0 5px 0;
    border-left: 5px solid #e1c96f;
    display: inline-block;
    position: relative;
    width: 100%;
    background: rgb(243,235,177);
    background: linear-gradient(90deg, rgba(243,235,177,1) 0%, rgba(243,235,177,0.3393732492997199) 100%);
    border-radius: 0 10px 10px 0;
}

#vn .tour-gold {
    line-height: 20px;
}

.tour-gold:last-child {
    margin: 0 0 10px 0;
}

.tour-gold-pic {
    width: 100%;
    display: flex;
    line-height: 0;
    align-items: center;
}

.tour-gold-pic img {
    max-width: 50px;
    image-rendering: -webkit-optimize-contrast;
    margin: 0 10px 5px 0;
}


/*連絡我們*/
.contact-left, .contact-right {
    display: table-cell;
    vertical-align: top;
}

.contact-left a:hover {
    opacity: 0.8;
}

.contact-left img {
    width: 100%;
    max-width: 100%;
}

.contact-right {
    padding-left: 7px;
}

.contact-title {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.contact-title p ,.contact-title h3 {
    padding: 5px 20px 0 20px;
    text-align: center;
}

.contact-title span ,.contact-title h2 {
    display: table;
    margin: auto;
    background: url(../images/white_bk.png) no-repeat left;
    height: 71px;
    line-height: 71px;
    text-align: center;
    font-weight: bold;
    color: #333333;
    font-size: 40px;
    padding: 0 20px;
}

.contact-name {
    font-weight: bold;
    text-align: left;
    font-size: 20px;
    padding-left: 18px;
    
    line-height: 30px;
    text-indent: -36px;
    margin: 0 0 0 36px;
}

.contact-name img {
    margin: 0 7px -6px 0;
}

.contact-infor {
    text-align: left;
    font-size: 15px;
    border-left: 2px solid #ffc600;
    
    line-height: 24px;
    margin: 6px 0 12px 32px;
    padding-left: 12px;
}

.contact-infor:last-child {
    margin-bottom: 0px;
}

.contact-all {
    width: 48%;
    display: inline-flex;
    margin: 0 0 40px 0;
    flex-wrap: wrap;
    flex-direction: column;
}

.contact-add {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 20px 0 0 0;
    border-top: 1px solid #cccccc;
    font-size: 15px;
    line-height: 24px;
}

/*驗證碼*/
.list-captcha {
    width: 50%;
    min-width: 310px;
    clear: both;
    margin-bottom: 20px;
    display: flex;
    margin: 0 auto 10px auto;
    gap: 5px;
}

.list-captcha label {
    display: inline-block;
    width: 48%;
    line-height: 18px;
    min-width: 133px;
    margin: 5px 0 0 0;
    text-align: right;
}

.list-captcha input[type=text] {
    display: inline-block;
    width: 100%;
    height: 32px;
}

.list-captcha-input {
    width: calc(100% - 155px);
    display: inline-flex;
    vertical-align: top;
    gap: 5px;
    align-items: flex-start;
}

.list-captcha-pic {
    max-width: 155px;
    width: 100%;
    display: inline-block;
    vertical-align: top;
}

.list-captcha-pic a {
    color: #00a3e0;
    text-shadow: 0em 0em 0em #00a3e0;
    width: 100%;
    display: inline-block;
    margin: 5px 0 0 0;
}

.list-captcha-pic a:hover {
    color: #005eb8;
    text-shadow: 0em 0em 0em #005eb8;
}

.list-captcha-pic img {
    max-width: initial;
}

.travel-title {
    text-align: center;
    width: 100%;
}


.travel-title span ,.travel-title h2 ,.list-title h2 {
    display: inline-flex;
    margin: auto;
    background: url(../images/white_bk.png) no-repeat left;
    height: 71px;
    line-height: 41px;
    text-align: center;
    font-weight: bold;
    color: #333333;
    font-size: 40px;
    padding: 0 20px;
    justify-content: center;
    align-items: center;
}

/*表單覆蓋*/
.container .list-checkbox-box {
    display: inline-block;
}

.container .list-checkbox-box li, .container .list-checkbox-box label {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    gap: 10px;
}

.container .list-textinfor {
    margin-bottom: 10px;
}

.container .list-date-input {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 40px);
}

.container .list-date-calendar {
    display: inline-block;
}

.container .list-date-calendar:hover {
    cursor: pointer;
    opacity: .9;
}

.container input[type=text] {
    margin: 0 0 5px 0;
}

.container .list-font {
    min-height: 60px;
}

.container input[type="submit"] {
    font-weight: unset;
}

/*日本苗栗商品*/
.block-miaoli-jp {
    width: 100%;
    background: #e7f5fb;
    /* min-height: 890px;
    display: table; */
    padding: 50px 0;
}

.block-miaoli-jp .evaproduct-button {
    text-align:center;
    margin:20px 0 0 0;
}

.block-miaoli-jp .evaproduct-button a {
    display: inline-block;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 2px;
    min-width: 100px;
    text-align: center;
    padding: 8px 16px;
    background: #fc4c02;
    box-shadow: 0 2px 0 #c83d0d;
    color: #ffffff;
    font-size: 16px;
    line-height: 22px;
}

.block-miaoli-jp .travel-title span ,.block-miaoli-jp .travel-title h2 {
    line-height: 48px;
    height: auto;
}

.tour-two-space {
    width: 100%;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin: 40px 0 20px 0;
}

.tour-two-big-pic {
    width: 50%;
}

.tour-two-big-pic img {
    border-radius: 20px;
}


/*中間調度區
-----------------------------------------------------------------*/
@media screen and (max-width: 980px) {
    html,
    body {
        width: 100%;
        min-height: 100%;
    }

    .tour-banner {
        width: 100%;
        clear: both;
        margin: 30px 0;
        padding: 0 20px;
    }

    .must-box {
        padding: 20px;
    }

    .must-box:last-child {
        padding-left: 0px;
    }

    .must-link-title {
        max-width: none;
        border-right: 0px;
        display: block;
        width: 100%;
        text-align: center;
    }

    .contact-title {
        margin-bottom: 30px;
    }

    .contact-title span ,.contact-title h2 {
        background: none;
        text-align: center;
        line-height: 40px;
        height: auto
    }

    .contact-left {
        padding-left: 20px;
    }

    .block-menu .block-center {
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .menu-but {
        justify-content: space-evenly;
        width: 100%;
        order: 3;
        display: flex;
        justify-content: center;
    }

    .list-captcha label {
        min-width: unset;
        text-align: right;
        width: calc(100% - 160px);
        margin: 0;
    }

    .list-captcha input[type=text] {
        width: 160px;
    }

    .list-captcha-input {
        width: 80%;
        align-items: center;
    }

    .list-captcha {
        flex-wrap: wrap;
    }

    .list-captcha-pic {
        max-width: unset;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: 5px;
        align-items: center;
    }

    .list-captcha-pic a {
        text-align: center;
    }

    .must-link-box {
        width: 100%;
        justify-content: center;
        gap: 5px 20px;
        padding: 0;
    }

    .must-row:last-child {
        flex-wrap: wrap;
    }

    .menu-language {
        order: 2;
    }

    .container .list-all {
        padding: 20px;
        width: 95%;
    }

    .block-menu.sticky ,.block-menu {
        position: sticky !important;
        top: 0px;
    }

    .tour-two-space {
        padding: 20px;
    }

}


/*平板
-----------------------------------------------------------------*/

@media screen and (max-width: 768px) {
    html,
    body {
        width: 100%;
        min-height: 100%;
    }

    .block-header {
        margin-top: 0px;
    }

    .menu-but {
        text-align: center;
    }

    .must-box {
        padding: 20px;
        display: table;
        width: 100%;
    }

    .must-box:last-child {
        padding: 20px;
    }

    .must-left, .must-right {
        max-width: none;
        min-height: auto;
    }

    .must-link-box a {
        margin-bottom: 10px;
    }

    .tour-title span {
        background: none;
        padding: 0px;
        margin: auto;
        /*padding: 0 20px; */
        line-height: 50px;
        height: auto;
    }

    .tour-cell {
        width: 100%;
    }

    .tour-all {
        text-align: center;
        grid-template-columns: repeat(2, 1fr);
    }

    .menu-but li a {
        padding: 8px 5px;
        width: 100%;
    }

    .must-row {
        width: 100%;
        flex-wrap: wrap;
    }

}

@media screen and (max-width: 760px) {
    .menu-but {
        max-width: none;
        overflow: hidden;
        height: auto;
        text-align: center;
        float: none;
    }

    .contact-left {
        display: none;
    }
}


/*手機
-----------------------------------------------------------------*/

@media (max-width: 600px) {
    .contact-all {
        width: 100%;
    }

    .tour-two-space {
        flex-wrap: wrap;
        margin: 20px 0;
    }

    .tour-two-big-pic {
        width: 100%;
    }

    .tour-two-space .tour-all {
        width: 100%;
    }

}

@media (max-width: 480px) {
    .block-menu {
        position: fixed;
        z-index: 9;
    }

    .block-header {
        background: url(../images/header_bk.jpg) no-repeat center bottom;
    }

    .header-title {
        margin: 150px auto 0 auto;
    }

    .travel-title span ,.travel-title h2 ,.list-title h2 {
        background: transparent;
        line-height: 47px;
    }

    .block-miaoli-jp  .travel-title span ,.block-miaoli-jp  .travel-title h2 {
        line-height: 43px;
        font-size: 35px;
    }

    .header-infor {
        margin: 60px auto 0 auto;
    }

    .menu-but li a {
        padding: 5px 7px;
    }

    .tour-title span, .list-title span , .tour-title h2 , .list-title h2 {
        font-size: 30px;
    }

    .tour-cell {
        margin: auto;
        text-align: center;
        display: block;
    }

    .list-captcha {
        min-width: auto;
        width: 100%;
    }

    .list-captcha-input {
        width:100%;
        display: table-cell;
        vertical-align: top;
    }

    .list-captcha label {
        display: block;
        width: 100%;
        margin-bottom: 3px;
        text-align: left;
    }

    .list-captcha input[type=text] {
        display: block;
        width: 100%;
    }

    .must-box, .must-box:last-child {
        padding: 5px 0;
        overflow: hidden;
        width: 95%;
        margin: 0 auto;
        display: block;
    }

    .must-right a {
        min-width: unset;
        width: 100%;
    }

    .list-captcha-pic {
        align-items: flex-end;
    }

    .list-captcha-pic a {
        text-align: right;
    }

    .tour-box {
        min-height: auto;
    }

    .tour-name {
        padding: 5px 0;
        font-size: 20px;
        line-height: 25px;
    }

    .tour-small-box {
        padding: 15px;
    }

    .tour-all ,.tour-two-space .tour-all {
        grid-template-columns: repeat(1, 1fr);
    }

    .tour-two-space {
        padding: 10px;
    }
    
}

@media (max-width: 420px) {
    .menu-language {
        margin-right: 10px;
        max-width: 120px;
    }
}

@media (max-width: 360px) {
    .menu-logo {
        max-width: 130px;
        margin-top: 20px;
    }

    .header-infor-title span {
        line-height: 20px;
        display: inline-block;
        height: 20px;
        max-width: none;
        width: 70%;
        background: url(../images/header_line.png) repeat-x center;
    }

    .header-title {
        margin: 100px auto 0 auto;
    }

    .must-left, .must-right {
        background: #ffffff;
        padding: 20px;
    }

    .contact-right {
        padding-left: 0px;
    }
}

@media (max-width: 320px) {
    .header-title {
        margin: 100px auto 0 auto;
    }

    .contact-title span ,.contact-title h2 {
        padding: 0 5px;
    }

    .contact-title p ,.contact-title h3 {
        padding: 5px 20px 0 5px;
    }
}

/*2025僑委會*/
#ocac2025 {
    background: #47C2B5;
}


.block-ocac-main {
    width: 100%;
    clear: both;
    display: inline-flex;
    padding: 60px 0;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
}

.ocac-main-left ,.ocac-main-right {
    width: calc( (100% - 20px) / 2 );
}

.ocac-main-1pic {
    margin: -15px 0 0 0;
    position: relative;
}

.ocac-main-man {
    position: absolute;
    z-index: 1;
    left: -3%;
    bottom: -9%;
}

.ocac-main-infor {
    position: relative;
    width: 100%;
    padding: 40px 0 0 0;
}

.ocac-main-girls {
    position: absolute;
    right: 20px;
    bottom: 28%;
    width: calc(100% - 190px);
    text-align: right;
    display: inline-block;
}

.ocac-main-right ~ figure {
    display: inline-block;
    position: absolute;
    z-index: -1;
}

.ocac-main-bk-icon1 {
    right: -27px;
    top: 50px;
}

.ocac-main-bk-icon2 {
    right: 0px;
    bottom: 40%;
}

.ocac-main-bk-icon3 {
    left: 0px;
    top: 20px;
}

.block-ocac-product {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin:40px 0 0 0;
    flex-wrap: wrap;
}

.block-ocac-product > article {
    display: inline-block;
    width: calc((100% - 20px) /2 );
    position: relative;
    border-radius: 20px;
    padding: 100px 40px 20px 40px;
}

.ocac-product-left {
    background: url(../images/ocac_big_top3.webp) no-repeat right top #D40F7D;
}

.ocac-product-right {
    background: url(../images/ocac_big_top4.webp) no-repeat right top #00A3E0;
}

.ocac-product-date {
    position: absolute;
    left: 20px;
    top: -60px;
    border-radius: 100%;
    display: inline-flex;
    color: #ffffff;
    width: 152px;
    height: 152px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    font-family:'Microsoft YaHei';
}

.ocac-product-date strong {
    font-size: 30px;
    display: inline-block;
    line-height: 35px;
    text-align: center;
    margin: 0 0 2px 0;
    width: 100%;
}

.ocac-product-date span {
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    width: 100%;
    line-height: 25px;
}

.ocac-product-left .ocac-product-date {
    background: #84329B;
}

.ocac-product-right .ocac-product-date {
    background: #005EB8;
}

.ocac-product-big-title {
    width: 100%;
    text-align: left;
    flex: 1;
}

.ocac-product-big-title h2 {
    display: inline-block;
    font-size: 40px;
    line-height: 48px;
    color: #ffffff;
    width: 100%;
    margin:0 0 6px 0;
    font-weight: bold;
}

.ocac-product-big-title h3 {
    display: inline-block;
    width: 100%;
}

.ocac-product-big-title h3 span {
    font-size: 20px;
    line-height: 24px;
    display: inline-block;
    width: 100%;
    color: #ffffff;
}

.ocac-product-big-title h3 b {
    margin: 0 0 0 5px;
    font-weight: unset;
}

.ocac-product-big-title h3 strong {
    font-size: 50px;
    line-height: 60px;
    display: inline-block;
    width: 100%;
    color: #FFEA00;
    font-family:'Microsoft YaHei';
}

.ocac-product-infor {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0 0 0;
    flex: 2;
}

.ocac-product-infor-box {
    width: 100%;
    display: inline-flex;
    gap: 20px;
    align-items: center;
}

.ocac-product-infor-pic ,.ocac-product-infor-title {
    width: calc((100% - 20px) /2 );
}

.ocac-product-infor-title {
    text-align: left;
    color: #ffffff;
    font-size: 20px;
    line-height: 28px;
    font-weight: bold;
}

.ocac-product-infor-text {
    display: inline-block;
    width: 100%;
    margin: 5px 0 0 0;
    font-size: 15px;
    font-weight: normal;
    line-height: 20px;
}

.ocac-product-go {
    width: 100%;
    text-align: center;
    margin: 20px 0 0 0;
    flex: 1;
    display: inline-flex;
    justify-content: center;
    align-items: flex-end;
}

.ocac-product-go a {
    display: inline-block;
    border-radius: 50px;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    line-height: 24px;
    padding: 10px 30px;
    border: 1px solid #ffffff;
    font-weight: bold;
}

.ocac-product-go a:hover {
    color: #FFEA00;
    border: 1px solid #FFEA00;
}

.block-ocac-buy {
    width: 100%;
    text-align: center;
    margin: 40px 0 60px 0;
}

.block-ocac-buy a {
    display: inline-block;
    border-radius: 50px;
    text-align: center;
    font-size: 20px;
    line-height: 24px;
    padding: 10px 30px;
    background: #FFEA00;
    font-weight: bold;
    min-width:200px;
}

.block-ocac-buy a:hover {
    background:#fff375;
}

.block-ocac-notice {
    width: 100%;
    padding: 40px 0;
    background: #27AD9F;
}

.ocac-notice-title {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 20px 0;
}

.ocac-notice-box {
    display: inline-block;
    gap: 20px;
    width: 100%;
    margin:20px 0;
    color: #ffffff;
    font-family: 'Microsoft JhengHei';
}

.ocac-notice-box a {
    color: #ffffff;
    text-decoration:underline;
    text-underline-offset: 0.2em;
    word-break: break-all;
}

.ocac-notice-box a:hover {
    color: #FFEA00;
}

ul.ocac-notice-list {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
}

.ocac-notice-list li {
    width:calc(100% - 25px);
    margin: 0 0 0px 25px;
    line-height:25px;
    font-size: 15px;
    list-style: disc;
}

.ocac-notice-text {
    width: 100%;
    display: inline-block;
    margin: 0 0 5px 0px;
    line-height:25px;
    font-size: 15px;
}

.ocac-notice-pic {
    display: inline-block;
    width: 100%;
    text-align: left;
}

.ocac-notice-pic a {
    display: inline-block;
}

.ocac-notice-pic a:hover {
    opacity: .9;
}





/*中間調度區
-----------------------------------------------------------------*/
@media screen and (max-width: 980px) {
    .block-center {
        padding: 0 10px;
    }

    .ocac-product-left {
        background:#D40F7D;
    }

    .ocac-product-right {
        background:#00A3E0;
    }

    .ocac-product-big-title {
        text-align: center;
    }

    .block-ocac-product > article {
        padding: 100px 20px 20px 20px;
        display: inline-flex;
        flex-wrap: wrap;
        align-content: flex-start;
        flex-direction: column;
    }
}

/*平板
-----------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    .ocac-main-1pic {
        display: none;
    }
    .ocac-main-right > img {
        display: none;
    }
    .ocac-main-left, .ocac-main-right {
        width: 100%;
        text-align: center;
    }
    .ocac-main-girls {
        right: 20%;
        bottom: 35%;
    }
    .ocac-main-infor {
        padding: 0;
    }
}


/*中間調度區
-----------------------------------------------------------------*/
@media screen and (max-width: 600px) {
    .ocac-main-girls {
        right: 10%;
        width: calc(100% - 300px);
    }

    .block-ocac-product {
        gap: 100px;
    }

     .block-ocac-product > article {
        width: 100%;
    }

    .ocac-product-left {
        background: url(../images/ocac_big_top3.webp) no-repeat right top #D40F7D;
    }

    .ocac-product-right {
        background: url(../images/ocac_big_top4.webp) no-repeat right top #00A3E0;
    }

    .ocac-product-big-title {
        text-align: left;
    }
}


/*手機
-----------------------------------------------------------------*/
@media screen and (max-width: 480px) {
    .ocac-main-girls {
        right: 5%;
        width: 45%;
        bottom: 32%;
    }

    .ocac-main-bk-icon1 {
        right: -75px;
        top: -15%;
    }

    .ocac-main-bk-icon2 {
        right: unset;
        left: -3%;
        bottom: 35%;
    }

    .block-ocac-buy a {
        width: 100%;
    }

    .block-ocac-main {
        overflow: hidden;
    }

}

@media screen and (max-width: 430px) {
    .ocac-product-left {
        background:#D40F7D;
    }

    .ocac-product-right {
        background:#00A3E0;
    }

    .ocac-product-big-title {
        text-align: center;
    }

}