@charset "utf-8";
/* CSS Document */

/****** Start Global Setting  ******/
body {
    position: relative;
    margin: 0 auto;
    font: 13px 'Noto Sans TC', "Microsoft JhengHei", "微軟正黑體", 微軟正黑體, "Apple LiGothic Medium", "蘋果儷中黑", 蘋果儷中黑, Arial, Helvetica, sans-serif;
    background: #fff;
    background: url('../_img/bg-site.jpeg') no-repeat top center / cover;
}

body.nofullwidth {
    margin: 0 auto;
    font: 13px 'Noto Sans TC', "Microsoft JhengHei", "微軟正黑體", 微軟正黑體, "Apple LiGothic Medium", "蘋果儷中黑", 蘋果儷中黑, Arial, Helvetica, sans-serif;
    background: #fff;
    max-width: 2560px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
    background: url('../_img/bg-site.jpeg') no-repeat top center / cover;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.clearfix {
    display: inline-block
}

a {
    color: #444;
    text-decoration: none;
    transition: all .3s;
}

a:hover,
.formDiv a:focus {
    color: #444;
    text-decoration: underline;
    transition: all .3s;
}

a:active,
a:hover,
a:focus {
    outline: 0;
    text-decoration: none;
}

button,
button:hover,
button:focus {
    transition: all .3s;
    outline: 0;
}

button.btn-terms {
    position: relative;
    color: #61B045;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 3.4px;
    text-align: center;
    display: block;
    margin: 0 auto;
}

button.btn-terms:after {
    content: "";
    background: #61B045;
    position: absolute;
    display: block;
    height: 1.5px;
    width: 100%;
    bottom: -8px;
}

button.btn-terms:hover {
    color: #61B045;
    text-decoration: none;
}

input {
    box-shadow: none
}

textarea {
    resize: none;
}

a.disabled {
    pointer-events: none;
    cursor: default;
}

img {
    border: 0;
    margin: 0;
    padding: 0;
}

img.fullwidth {
    width: 100%;
    height: auto
}

.no-gutter {
    margin-right: 0;
    margin-left: 0;
}

.no-gutter>[class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.row-flex {
    display: flex;
    flex-wrap: wrap;
}

.months-title {
    position: relative;
    margin-bottom: 25px;
}

.months-title:after {
    content: '';
    width: 100%;
    border-bottom: solid 1px #CC9583;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 1;
}

.months-title h2 {
    position: relative;
    background-color: #fff;
    width: auto;
    display: inline-block;
    z-index: 3;
    padding: 0 30px;
    font-family: "linotype-didot", "Bodoni Moda", serif;
    font-style: italic;
    font-weight: 300;
    font-size: 44px;
    line-height: 55px;
    letter-spacing: 0.02em;
    color: #C0826E;
    margin: 0;
}

body {
    position: relative;
}


/****** Desktop large Screen ******/
/* Main content */
/* Logo */
.kv_logo {
    padding-top: 80px;
    padding-bottom: 50px;
}

.kv_logo img {
    max-width: 405px;
}


/* Checklist Nav */
.checklist-nav {
    position: fixed;
    z-index: 4;
    right: 225px;
    top: 30vh;
    border: 1px solid #E5E5E5;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.10);
    padding: 20px;
    border-radius: 0;
    flex-direction: column;
    border-bottom: 3px solid #FAB393;
    align-items: start;
}

.checklist-nav p {
    position: relative;
    color: #F26649;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.7px;
    width: 100%;
}

.checklist-nav p:after {
    content: "";
    background-color: #F26649;
    max-width: 58px;
    width: 100%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
}

.checklist-nav a.nav-link {
    border: 0;
    border-radius: 6px;
    padding: 10px 18px;
    color: #575757;
    font-family: "linotype-didot", "Bodoni Moda", 'Noto Sans TC', serif;
    font-size: 23px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    transition: all .3s;
}

.checklist-nav a.nav-link:hover,
.checklist-nav a.nav-link.active {
    background: rgba(244, 122, 92, 0.20);
}


.checklist-nav .print-btn a.nav-link {
    background: linear-gradient(91.22deg, #FAB393 1.68%, #F26649 99.79%);
    max-width: 358px;
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    text-align: center;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    padding: 12px 0;
    font-family: 'Roboto', ' Noto Sans TC', sans-serif;
    border-radius: 0;
    margin-top: 10px;
}

/* Checklist */
.checklist {
    position: relative;
    padding: 26px 26px 0;
    border-bottom: 12px solid #FAB393;
}

.checklist .orange-border {
    border: 1px solid #F3A38D;
    padding: 64px 0 100px;
    background-image: url('../_img/pattern-top.svg'), url('../_img/pattern-middle.svg'), url('../_img/pattern-bottom.svg');
    background-repeat: no-repeat;
    background-position: top right, center right, bottom right;
    background-size: 416px 311px, 189px 632px, 205px 846px
}

.checklist h1 {
    font-family: "Noto Serif TC", serif;
    font-weight: 500;
    font-size: 45px;
    line-height: 170%;
    letter-spacing: 0.25em;
    color: #544940;
}


.checklist h1~p {
    font-family: "Noto Serif TC", serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 170%;
    letter-spacing: 0.15em;
    color: #9A3324;
    margin-bottom: 5px;
}


.checklist p.lead-in {
    font-weight: 350;
    font-size: 17px;
    line-height: 30px;
    text-align: justify;
    letter-spacing: 0.1em;
    color: #575756;
    margin-bottom: 44px;
}


.deco_tag {
    overflow: hidden;
}



.months-section {
    margin-bottom: 40px;
}

.item-list {
    display: flex;
    flex-wrap: wrap;
}

.btn-submit {
    background: linear-gradient(91.22deg, #FAB393 1.68%, #F26649 99.79%);
    max-width: 358px;
    font-weight: 400;
    font-size: 22px;
    line-height: 26px;
    text-align: center;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    padding: 16px 0;
    font-family: 'Roboto', ' Noto Sans TC', sans-serif;
}

.btn-submit:hover {
    opacity: 0.8;
}

.months-section .icon:before {
    content: "";
    display: inline-block;
    height: 24px;
    vertical-align: middle;
    width: 23px;
    background: url('../_img/icon-download-pale.svg') no-repeat 50%;
    background-size: cover;
    margin-left: 7px;
    margin-top: -7px;
}


.months-section.days2 .icon:before {
    background-image: url('../_img/icon-download-orange.svg')
}

.months-section.months3 .months-title h2,
.months-section.months3 .field_txt a {
    color: #DB7949
}

.months-section.months3 .months-title:after {
    border-color: #DB7949
}



.months-section.months2_1 .months-title h2,
.months-section.months2_1 .field_txt a {
    color: #F59165
}

.months-section.months2_1 .months-title:after {
    border-color: #F59165
}


.months-section.wks2 .months-title h2,
.months-section.wks2 .field_txt a {
    color: #E87D60
}

.months-section.wks2 .months-title:after {
    border-color: #E87D60
}


.months-section.days2 .months-title h2,
.months-section.days2 .field_txt a {
    color: #F47A5C
}

.months-section.days2 .months-title:after {
    border-color: #F47A5C
}


.months-section.bigday .months-title h2,
.months-section.bigday .field_txt a {
    color: #F26649
}

.months-section.bigday .months-title:after {
    border-color: #F26649
}



/* ----custom checkbox---- */

.checklist-item {
    width: calc((100% - 20px)/2);
}


.checklist-item:nth-child(2n-1) {
    margin-right: 20px;
}

.custom-checkbox {
    position: absolute;
    opacity: 0
}

.custom-checkbox+label {
    padding: 0 0 0 30px;
    display: block;
    cursor: pointer;
    position: relative;
    text-align: left;
    text-indent: -30px;
    margin-bottom: 25px;
}

.custom-checkbox+label:before {
    content: '';
    margin-right: 10px;
    display: inline-block;
    vertical-align: top;
    width: 24px;
    height: 24px;
    background: #fff;
    border: 1px solid #CC9583;
    transition: all .3s;
}

.custom-checkbox:hover+label:before,
.custom-checkbox:focus+label:before {
    border: 1px solid #CC9583
}

.custom-checkbox:checked+label:before {
    background: #CC9583;
    background: #fff;
    border-color: #CC9583
}

.custom-checkbox:disabled+label {
    color: #b8b8b8;
    cursor: auto
}

.custom-checkbox:disabled+label:before {
    box-shadow: none;
    background: #ddd
}

.custom-checkbox:checked+label:after {
    font-family: "FontAwesome", "Font Awesome 5 Free", 'Font Awesome\ 5 Free', FontAwesome;
    font-weight: 900;
    content: "\f00c";
    /* content: "✔";*/
    /* background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6L9 17L4 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/24px 24px;*/
    position: absolute;
    left: 0;
    /*    top: -6px;*/
    top: 0;
    width: 24px;
    height: 24px;
    transition: all .3s;
    padding-left: 33px;
    font-size: 18px;
    color: #CC9583;
}

/*.custom-checkbox:checked+label.checkbox-inline:after {
    padding-top: 6px;
}*/

.custom-checkbox+label.checkbox-inline.checkbox-align {
    position: relative;
    top: 0;
}


/* supportDiv */
.supportDiv {
    padding: 30px 0 85px;
}

.supportDiv h4 {
    position: relative;
    color: #61B045;
    font-size: 22px;
    font-weight: 500;
    line-height: 200%;
    letter-spacing: 4.4px;
    margin-bottom: 0px;
    margin-top: 0;
}

/*.supportDiv h4:after {
	content:'';
	background:#61B045;
	height: 1px;
	width: calc(100% - 200px);
	display: inline-block;
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}*/

.supportDiv .row-flex {
    align-items: center
}

.supportDiv img.logo {
    display: inline;
    max-height: 98px;
    height: 100%;
    /*margin-right: 40px;*/
}

.supportDiv .logo-wrapper {
    display: inline-block;
}

/* Footer - supportDiv */
/*.supportDiv {background:#fff;}
.supportDiv .container {padding-top:50px;padding-bottom:50px;}
.supportDiv .container .supportholder {display: flex; flex-wrap: wrap;align-items: center}
.supportDiv .logos{border-left: 1px solid #6a2723;flex-grow: 1;border:0}
.supportDiv .logo-right {flex-grow: 1;border-left: 1px solid #6a2723;}
.supportDiv .logo-right img {max-height:50px;margin:0px 30px 25px 0}
.supportDiv .container h4 {font-size:14px;color:#6a2723;padding:0;margin: 0 auto 12px;}*/


/* Mobile Menu Button */
#btn-menu-mob {
    display: none;
    position: fixed;
    right: 25px;
    bottom: 30px;
    background: linear-gradient(91deg, #FAB393 1.68%, #F26649 99.79%);
    display: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 9997;
    border: 0;
}

#btn-menu-mob .sign {
    position: relative;
}

/* Plus/Minus icon using pseudo-elements */
#btn-menu-mob .sign::before,
#btn-menu-mob .sign::after {
    content: '';
    position: absolute;
    background: #fff;
    transition: transform 0.3s ease;
}

/* Horizontal line (always visible for both plus and minus) */
#btn-menu-mob .sign::before {
    width: 30px;
    height: 4px;
    top: -1px;
    left: 9px;
}

/* Vertical line (visible for plus, rotated for minus) */
#btn-menu-mob .sign::after {
    width: 4px;
    height: 30px;
    top: -14px;
    left: 22px;
}

/* Minus state: rotate vertical line */
#btn-menu-mob.toggled .sign::after {
    transform: rotate(90deg);
}



/****** Start Global Setting (Non Mobile View) ******/
@media screen and (min-width:1199px) {
    .checklist {
        max-width: 1170px;
        width: 100%;
        /*        margin-left: -25px;*/
        margin: auto;
        margin-bottom: 180px;
    }

    .checklist p.lead-in,
    .months-section {
        /*max-width: 740px;
        width: 100%;*/
    }




}

@media screen and (min-width: 500px) {
    .card-deck {
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        margin-right: -15px;
        margin-left: -15px
    }

    .card-deck .card {
        display: -ms-flexbox;
        display: flex;
        /*-ms-flex:1 0 0;flex:1 0 0;*/
        -ms-flex: 25%;
        flex: 25%;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-right: 15px;
        margin-bottom: 0;
        margin-left: 15px
    }
}

@media screen and (min-width: 768px) {

    /*================== Start Common Setting ==================*/
    .checkbox-input-field {
        width: 300px;
        display: inline-block;
    }

    /*================== End Common Setting ==================*/
}



@media screen and (min-width:1024px) {
    .deco_tag img {
        transform: scale(1);
        transform-origin: top left;
        margin-left: -48px;
    }
}



@media screen and (min-width:1025px) {
    .card-deck .card {
        -ms-flex: 1 0 0;
        flex: 1 0 0;
    }
}



@media screen and (min-width: 1280px) {
    .deco_tag img {
        transform: scale(1);
        transform-origin: top left;
        margin-left: 0px;
    }
}


@media screen and (min-width: 1366px) {
    .checklist-nav {
        right: 0px;
    }
}



@media screen and (min-width: 1400px) {
    .checklist-nav {
        /*        right: 160px;*/
        top: 25vh;
    }
}



@media screen and (min-width:1680px) {
    .checklist-nav {
        right: 125px;
    }
}


@media screen and (min-width:1920px) {
    .checklist-nav {
        right: 245px;
    }
}


@media screen and (min-width:2560px) {
    .checklist-nav {
        right: 520px;
    }
}



@media screen and (max-width: 1366px) {
    .checklist-nav {
        right: 40px;
    }
}



@media screen and (max-width: 1280px) {
    .owl-prev {
        left: -40px;
    }

    .owl-next {
        right: -40px;
    }
}


@media screen and (max-width: 1199px) {
    .checklist-nav {
        right: 10px;
    }
}

@media screen and (max-width: 1024px) {


    textarea,
    input[type=text] {
        /* Remove First */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .checklist .orange-border {
        background-size: 416px 311px, 0%, 205px 846px
    }


    .checklist-nav {
        display: none;
        transform: translateY(20px);
        padding:15px 10px
    }


    .checklist-nav a.nav-link, .checklist-nav .print-btn a.nav-link {
        font-size: 18px;
        padding: 10px;
    }


    #btn-menu-mob {
        display: block;
    }


    .checklist-nav.toggled {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        display: block;
        top: unset;
        bottom: 130px;
    }

    .checklist-nav p:after {
        display:none
    }
}


@media screen and (max-width: 991px) {}


@media screen and (max-width: 768px) {
    .kv_logo {
        padding: 40px 20px
    }

}

@media screen and (max-width:767px) {
    .checkbox-inside-align>.row {
        margin: 0 -15px !important;
        width: unset !important;
    }

    .kv_logo img {
        max-width: 320px;
    }

    .checklist {
        padding: 13px 13px 0;
        margin: 0 -15px;
        /*        padding-bottom: 80px;*/
    }

    .checklist .orange-border {
        background-size: 40%, 25%, 20%;
        padding-top: 30px;
    }

    .checklist-item {
        width: 100%;
    }

    .checklist h1 {
        font-size: 32px;
        letter-spacing: 0.15em;
    }

    .checklist h2 {
        font-size: 24px;
    }

    .months-title h2 {
        padding: 0 15px;
    }


    .deco_tag img {
        transform: scale(1.15);
        transform-origin: top left;
        margin-left: -27px;
    }





}

@media screen and (max-width: 550px) {


    .btn-submit {
        width: 80%;
    }
}


@media screen and (max-width:414px) {
    .checkbox-input-field {
        width: 100%
    }

    .checklist h1 {
        font-size: 26px;
    }

    .checklist h1~p {
        font-size: 20px;
    }

    .deco_tag img {
        transform: scale(1.45);
    }
}


@media screen and (max-width: 375px) {}


@media screen and (max-width:320px) {}

/****** End Global Setting (Non Mobile View) ******/