body { margin: 0; background:#fff; color: #282828; font-family: Arial,Helvetica,"微軟正黑體"!important; }
* { box-sizing: border-box;}
/* 禁止自動偵測電話號碼 */
meta[name="format-detection"] { content: "telephone=no";}
a[href^="tel"] { text-decoration: none; color: inherit; }


/*通用*/
img{ vertical-align: bottom; display: block;/*解決圖片下方縫隙*/}
main{ font-size: 30px;}

/* 刊頭 */
header.head{ width: 100%; margin: 0 auto 2rem; text-align: center; position: relative; font-size: 2vw;}
.head_bg{ width: 100%; margin: 0 auto; text-align: center;}
.head_bg img{ width: 100%; margin: 0 auto; }
.head_main { width: 80%; max-width: 1440px; margin: 0 auto; text-align: center; position: absolute; left: 0; right: 0; top: 0; z-index: 1;}
.head_main img{ margin: 0 auto; text-align: center; }
.head_main img.title{ width: 55%; margin-top: 7%;}
.head_main img.free{ width: 50%; margin-top: 2%;}
.head_main a{ text-decoration: none;}
.head_main p{ margin-bottom: 1rem;  color: #fff; letter-spacing: 0.1rem;}
.head_main p span{ margin: 0 4px; font-size: 1.5em;}


/*main*/
.winnerZONE{ width: 100%; max-width: 1100px; margin:0 auto; padding: 4rem 0; text-align: center;}
section h1{ margin: 0 auto 3rem; font-size: 1.7em; font-weight: bolder; }
section h1 span{ color: #0061CF;}
section h1 br{ display: none;}
button.line{ 
    width: 75%; max-width: 885px; margin: 0 auto; padding: 1.5rem 1rem; color: #fff; font-size: 1.8em; letter-spacing: 0.15rem; 
    background: #06C755; box-shadow: 0 .6rem 0 #09A348; border-radius: 3rem; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
button.line::before{ content: ""; display: inline-block; margin-right: 1.5rem; width: 93px; height: 89px; background: url("../images/icon_line.svg") no-repeat; background-size: contain;}
.winnerZONE a{ display: block; text-decoration: none; }
.winnerZONE h2{ font-size: 1.3em; font-weight: bolder; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
.winnerZONE h2::before{ content: ""; display: inline-block; margin-right: 6px; width: 65px; height: 57px; background: url("../images/icon_sound.svg") no-repeat; background-size: contain;}
.winnerZONE h2::after{ content: ""; display: block; width: 100%; height: 8px; margin: 1rem auto 2rem; border-radius: 999em; background: #C0EBFF;}
.question{ margin: 8rem 0 2rem;}
.question p{ width: 96%; margin: 0 auto; text-align: justify; line-height: 3rem;}
.grid-container{ display: grid; grid-template-columns: auto auto; gap: 2px; padding: 2px; background: #F7E25B; font-size: .85em; border-radius: 1rem 1rem 0 0;}
.grid-container div{ padding: 1rem 1.5rem; background: #FFFDED; line-height: 2.5rem; text-align: justify;} 
.grid-container div.thead{ color: #746502; font-weight: bolder; background: #F7E25B; text-align: center; border-radius: 1rem 1rem 0 0;} 
.grid-container .grid_item{ font-weight: bolder; text-align: center; display: flex; align-items: center; justify-content: center;}
.logoArea { margin: 6rem auto 3rem; display: flex; justify-content: center; align-items: center; }
.footer_logo{ flex-wrap: wrap; margin: 0 1rem; display: flex; justify-content: flex-start; align-items: center; flex-direction: column;}
.footer_logo .map_title{ margin-bottom: 1.5rem; font-size: 1.2em; font-weight: bolder; display: flex; align-items: center;}
.footer_logo .map_title i{ display: inline-block; margin-right: .7rem; width: 44px; height: 44px; background: url("../images/icon_map.svg") no-repeat; background-size: contain;}
.footer_logo .map_title ul{ display: flex; align-items: center; }
.footer_logo .map_title ul li{ margin: 0;}
.footer_logo ul{ margin: 0; padding: 0; text-align: left;}
.footer_logo ul li{ margin-bottom: 1.5rem;}
.footer_logo ul li a > img{ width: 49px; margin: 0 5px 7px 15px; }
.footer_logo ul li a > img:hover{ opacity: .9;}
.footer_logo img.logo_ft{ max-height: 260px; margin-right: 2rem;}
.footer_logo li p{ display: none;}

.zulinZONE{ width: 100%; max-width: 1100px; margin:0 auto; padding: 4rem 0; text-align: center; }
section h1.title{ line-height: normal; letter-spacing: 0.1rem; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
section h1.title::before{ content: ""; display: inline-block; margin-right: 1rem; width: 80px; height: 80px; background: url("../images/icon_target.svg") no-repeat; background-size: contain;}
.adArea { width: 100%; margin: 0 auto;}
.adArea img{ width: 100%;}

.formZONE{ width: 100%; margin:0 auto; padding: 4rem 0 1rem; background: #E3F6FF;}
.formZONE .content{ width: 90%; max-width: 1100px; margin:0 auto; padding: 4rem 2rem 3rem; background: #fff; border-radius: 2rem;}
.formZONE h5{ font-size: .9em; text-align: center; color: #6d7072; }
.formBOX { width: 100%; max-width: 685px; margin: 6rem auto 0; }
.formBOX .formLayout{ margin-bottom: 2.7rem; display: flex; flex-wrap: wrap; font-size: .9em;}
.formBOX label{ font-weight: bold;}
.formBOX label::after{ content: "*"; color: #e72204;}
.formBOX .norequire label::after, .formBOX label.check_item::after{ content: none;}
.formBOX input.form-control, .formBOX select.form-select, .formBOX textarea.form-control { 
   width: 100%; margin: .7rem 0 0; padding: 1rem 1.2rem; color: #0061CF; font-size: 1em; font-weight: bolder; font-family:Arial,Helvetica,"微軟正黑體"!important;
   background: #ecf9ff; border-width: 0 0 2px 0; border-bottom: 2px solid #35ace4; border-radius: 0;
   appearance:none; -moz-appearance:none; -webkit-appearance:none; /*去除箭頭*/
}
.formBOX input:focus, .formBOX select:focus,.formBOX textarea:focus,
.formBOX input:active, .formBOX select:active,.formBOX textarea:active{ background: #fff8d2; outline: none; box-shadow: none;}
.formBOX input.form-control:disabled { color: #5A5A5A; background-color: #ececec;}
.formBOX input.form-control::placeholder, .formBOX textarea.form-control::placeholder{ color: #6DB7DB; font-weight: normal;}

/*修改checkbox樣式*/
.formBOX .check_LIST{ width: 100%; margin-top: 1rem; }
.formBOX .check_item { padding-left: 35px; margin: 0 0 1.5rem 3px; font-weight: normal; line-height: 1; display: flex; align-items: center; position: relative; cursor: pointer; }
.check_item input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; }
.check_item input[type=text] { margin: 0 0 0 .5rem; padding: .5rem; background: #fff; flex-grow: 1;}
.check_item span.item{ flex-shrink: 0;}
/*勾選前*/
.checkmark { width: 25px; height: 25px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: #fff; border: 2px solid #00A0E9; border-radius: 2px; }
.checkmark:after { content: ""; position: absolute; display: none; }
/*勾選後*/
.check_item input:checked ~ .checkmark { background-color: #2196F3; }
.check_item input:checked ~ .checkmark:after { display: block; }
/*勾勾樣式*/
.check_item .checkmark:after { width: 12px; height: 8px; top: 1px; left: 3px; border: 3px solid #fff; border-top: none; border-right: none; transform: rotate(-45deg);}


.formBOX .enter{ margin: 3rem auto;}
.enter button{
    width: 100%; margin: 0 auto; padding: 1.5rem 1rem; color: #fff; font-size: 1.1em; letter-spacing: 0.15rem; 
    background: #00A0E9; box-shadow: 0 .6rem 0 #0383bf; border-radius: 3rem; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
}


/*------------------ TOP鈕 ------------------*/
.topBtn { 
    position: relative; width:80px; height:80px; margin: 0 auto; background-color: rgba(0, 97, 207,.6); border-radius:999em; z-index:99; 
    font-family:Arial; font-size:1.3em; color:#fff; padding:0; text-align:center; cursor: pointer;
}
.topBtn:hover{ background-color: rgba(0, 97, 207,1);}
.topBtn::after {
    content: ""; width: 20px; height: 20px; margin: 0 auto; border-right: 5px solid #fff; border-top: 5px solid #fff;
	transform: rotate(-45deg); position: absolute; top: 32px; left: 0; right: 0;
}
/*--底部選單--*/
.nav_sidearea_m { display: none; position: fixed; width: 143px; height:auto; margin: 0 auto; bottom: 12%; right: 15px; z-index: 99; }
.nav_sidearea_m .nav_sidecol { display:block; margin: 0 auto; text-align: center;}


/*FOOTER*/
footer{ width: 100%; margin: 0 auto; padding: 20px 5px !important; color: #696969; background: #E3F6FF; font-size: 16px; text-align: center; line-height: 1.4em !important;}


/*感謝頁thanks.html*/
.thanks{ margin: 15% auto 0; font-size: 30px; text-align: center;}
.thanks a{ margin: 2rem auto 0; padding: 1.5rem .5rem; max-width: 400px; display: block; color: #fff; text-decoration: none; background-color: #00A0E9; border-radius: 999em;}
.thanks a:hover{ background:#0383bf; }
.thanks h1{ font-size: 2em; color: #00A0E9; font-weight: bold;}
.thanks h2{ font-size: 1.1em; margin: 2% auto;}


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

 
    /*通用*/
    main{ font-size: 26px;}
    .content{ padding: 0 .5rem;}


    /*main*/
    section h1{ margin-bottom: 2rem; font-size: 1.5em; }
    button.line::before{ width: 70px; height: 60px; margin-right: .7rem;}
    .grid-container{ width: 96%; margin: 0 auto;}

    section h1.title{ font-size: 1.6em;}
    section h1.title::before{ margin-right: 1rem; width: 60px; height: 60px; }



}


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

    /*通用*/
    main{ font-size: 24px;}

    /* 刊頭 */
    header.head{ margin-bottom: 0; font-size: 3vw;}
    .head_main img.title{ width: 80%; margin-top: 10%;}
    .head_main img.free{ width: 78%; margin: 4% auto -1%; }
    .head_main p{ letter-spacing: normal;}

    /*main*/
    .winnerZONE{ width: 95%;}
    button.line{ font-size: 1.6em; border-radius: 2rem;}
    button.line::before{ width: 60px; height: 50px; }
    .winnerZONE h2::before{ width: 50px; height: 45px; }
    .grid-container{ width: 100%; font-size: .9em;}
    .grid-container div.thead{ padding: .6rem;}
    .logoArea { margin-top: 4rem; display: block; }
    .footer_logo{ display: block; }
    .footer_logo .map_title{ margin-bottom: 1.5rem; flex-wrap: wrap; display: flex; justify-content: center; align-items: center; text-align: center; border-bottom: 1px solid #00A0E9;}
    .footer_logo .map_title ul{ width: 100%; margin: 1rem auto .5rem; padding-top: .5rem; border-top: 1px solid #00A0E9; justify-content: center; }
    .footer_logo .map_title i{ height: 25px; margin-right: .5rem;}
    .footer_logo ul li{ margin-bottom: 1rem; letter-spacing: 0.03rem;}
    .footer_logo ul li a > img{ width: 45px; margin: 0 1rem; }
    .footer_logo img.logo_ft{ display: none;}   
  
    .zulinZONE .footer_logo:first-of-type{ margin-bottom: 4rem;}

    /*修改checkbox樣式*/
    .formBOX label.check_item { padding-left: 28px; font-size: 1.1em;}
    .checkmark { width: 20px; height: 20px;}
    .check_item .checkmark:after { width: 10px; height: 7px; top: 0; left: 1px;}


    /* TOP鈕 ----------------------*/
    .topBtn, .nav_sidearea_m .nav_sidecol li.FB { width: 40px; height: 40px; position:fixed; right:5px; bottom:15%; }
    .topBtn::after { width: 10px; height: 10px; top: 15px; border-right-width: 3px; border-top-width: 3px;}

    /*-----------底部選單-----------*/
    .nav_sidearea_m { display: block; width:100%; height:auto; bottom:0; left:0; }


    /*FOOTER*/
    footer{ padding: 15px 5px!important; }


    /*感謝頁thanks.html*/
    .thanks{ font-size: 25px; }

    
}


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

    /*通用*/



    /* 刊頭 */
    section h1 { margin-bottom: 1rem; line-height: 3rem;}
    section h1 br{ display: block;}
    button.line{ width: 90%; font-size: 1.4em;}
    button.line::before{ width: 45px; height: 40px; margin-right: 8px;}

    /*main*/
    .formZONE{ padding: 3rem 0;}
    .formZONE .content{ width: 94%; padding: 3rem 1.5rem 2rem;}
    .formBOX { margin: 4rem auto 0;}
    .formZONE h5{ font-size: 3.5vw}
    .formBOX input.form-control, .formBOX select.form-select, .formBOX textarea.form-control { padding: 1rem 1rem;}
    .enter button{ padding: 1.2rem .5rem; }
    .footer_logo li p{ display: block; margin-top: .4rem;}

    
    /*FOOTER*/
    footer{ font-size: 11px!important;}


}



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

    /*通用*/
    main{ font-size: 21px;}

    
    /* 刊頭 */
    header.head{ font-size: 3.3vw;}
    .head_main p{ margin-bottom: .5rem;}

    /*main*/
    .winnerZONE{ padding: 2rem 0;}
    section h1{ font-size: 1.2em; line-height: 2.3rem;}
    button.line{ width: 95%; padding: .8rem ; font-size: 1.2em; box-shadow: 0 .4rem 0 #09A348; letter-spacing: 0.07rem; border-radius: 1.2rem;}
    button.line::before{ width: 40px; height: 35px; margin-right: 6px;}
    .winnerZONE h2{ flex-wrap: wrap; font-size: 5.5vw; }
    .winnerZONE h2::before{ width: 30px; height: 26px; margin-right: -3px; flex-shrink: 0;}
    .winnerZONE h2::after{ height: 5px; margin: 1rem auto 1rem; }
    .question { margin: 5rem auto 3rem;}
    .question p{ line-height: 2.5rem;}
    .grid-container{ grid-template-columns: auto; border-radius: 0;}
    .grid-container div{ padding: .8rem 1rem; line-height: 2rem; } 
    .grid-container div.thead,
    .grid-container br{ display: none;}
    .grid-container .grid_item{ background: #F7E25B; font-size: 1.1em;}

    .footer_logo ul li a > img{ width: 35px; margin: 0 1rem;}
    .footer_logo ul li{ margin-bottom: .8rem; font-size: .9em;}
    .enter button{ box-shadow: 0 .4rem 0 #0383bf;}

    section h1.title{ font-size: 1.5em; }
    section h1.title::before{ margin-right: .4rem; width: 40px; height: 40px; }

    .formZONE{ padding: 2rem 0;}
    .formZONE .content{ width: 94%; padding: 2rem 1.5rem 1rem; border-radius: 1rem;}
    .formZONE h5{ font-size: .9em; line-height: 1.8rem;}
    .formBOX { margin: 3rem auto 0;}
    .formBOX input.form-control, .formBOX select.form-select, .formBOX textarea.form-control { font-size: 1.1em;}


    /*感謝頁thanks.html*/
    .thanks{ margin: 20% auto 0; font-size: 20px;}
    .thanks h2{ margin: 4% auto 8%;}
    .thanks a{ width: 80%; padding: 5%;}       

}

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



}