@charset "utf-8";
/*Background_setting*/
*{ margin:0; padding:0; line-height:1.6; font-family:Helvetica,'微軟正黑體',Arial; font-weight:300; box-sizing:border-box; }
*:focus { outline: none;}
::selection{ background-color:#006786; color:#fff;}
a{ text-decoration:none;}
input{ -webkit-appearance:none;}
p{ font-weight:revert; font-size:inherit; color:revert;}

.wrapper{ position:relative; display:block; min-height:100vh; background:url(images/background-image.jpg) no-repeat top; background-size:cover; background-attachment:fixed; padding:180px 0;}

/*header*/
header{ display:flex; padding:30px 50px; align-items:center; position:absolute; top:0; left:0; right:0;}
header .logo_box{ flex:auto; font-size:0; position:relative; z-index:10;}
header .logo_box .logo{ height:78px; display:inline-block; margin-right:30px;}
header .logo_box .logo img{ height:100%;}
header .menu_btn{ display:none; width:78px; height:78px; text-align:center; padding:24px 26px; cursor:pointer;}
header .menu_btn p{ height:2px; border-radius:5px; background-color:#fff; margin:6px 0;}
header .menu_box{ display:flex; justify-content:flex-end;}
header .menu_box a{ display:inline-block;}
header .menu_box .nostyle{ color:#fff; font-size:16px; line-height:1; padding:12px; position:relative;}
header .menu_box .nostyle::after{ content:""; display:block; position:absolute; bottom:0; left:50%; right:50%; border-top:1px solid rgba(255,255,255,0); transition:.4s;}
header .menu_box .nostyle:hover::after{ left:0; right:0; border-top:1px solid rgba(255,255,255,1); transition:.2s;}
header .menu_box .style_red{ line-height:39px; height:39px; padding:0 15px; background-color:#E44C65; color:#fff; border-radius:5px; margin-left:15px; transition:.2s;}
header .menu_box .style_red:hover{ box-shadow:0 -3px 5px rgba(0,0,0,.3) inset; transition:.2s;}
header .menu_box .style_black{ line-height:39px; height:39px; padding:0 15px; background-color:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.5); color:#fff; border-radius:5px; margin-left:15px; transition:.2s;}
header .menu_box .style_black:hover{ box-shadow:0 -3px 5px rgba(255,255,255,.3) inset; transition:.2s;}
header .menu_box .username{ color:#fff; font-size:16px; line-height:1; padding:12px; position:relative; margin:0 -10px 0 15px;}
header .menu_box .username::after{ content:""; display:block; width:1px; position:absolute; top:8px; left:-5px; bottom:8px; background-color:rgba(255,255,255,.5);}

/*content*/
main{ max-width:1280px; width:100%; margin:auto; padding:0px 50px; display:block;}
main .conent_narrow{ max-width:400px; width:100%; text-align:center; margin:auto;}
main .conent_narrow:not(:first-child){ margin-top:30px; }
main .full_height{ min-height:calc(100vh - 360px); display:flex; flex-direction:column; justify-content:center; }
main .full_height .btm_enter{ margin-bottom: 25px; }
main .full_height .btm_enter:last-child{ margin-bottom:0; }
main .QuestionType{ min-height:calc(100vh - 138px); display:flex; flex-direction:column; justify-content:center; }
main .QuestionType .conent_narrow{ margin:30px auto 0 auto;}
main .text_slogan{ font-size:65px; color:#fff;}
main .topic{ font-size:36px; color:#fff; font-weight:bold;}
main .topic .Num{ display:block; width:140px; height:36px; border-radius:50px; color:#fff; background-color:#E44C65; font-size:20px; font-weight:bold; padding:2px; margin:0 auto 15px auto; text-align:center;}
main .topic p{ padding: 0.25em 0 0.2em 0; line-height: 1.8; }
main .text_describe{ font-size:20px; color:#fff; padding-bottom:30px;}
main .text_describe_02{ font-size:16px; color:rgba(255,255,255,1); padding:20px 0;}
main .text_describe_03{ font-size:16px; color:rgba(255,255,255,.5); padding-bottom:30px;}
main .text_describe_04{ font-size:24px; font-weight:bold; color:#E44C65; padding-bottom:30px;}
main .UserForm{ display:flex; flex-wrap:wrap; padding:0 0 20px 0;}
main .UserForm .DataArea{ width:50%; padding:5px; text-align:left;}
main .UserForm .DataArea input[type="text"]{ border:0; width:100%; padding:5px 10px; border-radius:5px; background-color:#fff; color:#333; font-size:16px;}
main .UserForm .DataArea input.NoNeed{ background-color:rgba(255,255,255,.3); color:#fff;}
main .OptionsBox{ display:flex; flex-wrap:wrap; padding:20px 0;}
main .OptionsBox .Options{ cursor:pointer; display:inline-block; padding:5px; width:20%;}
main .OptionsBox .Options p{ border:1px solid #fff; border-radius:5px; display:block; padding:5px 10px; font-size:18px; height:100%;}
main .OptionsBox .Options input{ position:absolute; opacity:0; width:0; height:0;}
main .OptionsBox .Options .CheckedType{ width:20px; height:20px; border-radius:50%; display:inline-block; margin-right:6.5px; border:1px solid #fff; vertical-align:text-bottom; position:relative;}
main .OptionsBox .Options .CheckedType::before{ content:""; display:block; position:absolute; top:9px; left:2px; width:8px; height:3px; background-color:rgba(255,255,255,0); transform:rotate(45deg); transition:.3s;}
main .OptionsBox .Options .CheckedType::after{ content:""; display:block; position:absolute; top:7px; left:5px; width:14px; height:3px; background-color:rgba(255,255,255,0); transform:rotate(-45deg); transition:.3s;}
main .OptionsBox .Options input:checked ~ p .CheckedType::before{ background-color:rgba(255,255,255,1); transition:.3s;}
main .OptionsBox .Options input:checked ~ p .CheckedType::after{ background-color:rgba(255,255,255,1); transition:.3s;}
main .OptionsBox .Options input:checked ~ p{ background-color:#3aa53e; border-color:#3aa53e;}
main .WordArea{}
main .WordArea input{ width:100%; background-color:rgba(0,0,0,.3); padding:20px; border-radius:10px; border:1px solid #fff; font-size:18px; }
main .WordArea input:focus{ box-shadow: rgb(51 136 204 / 16%) 0px 1px 4px, rgb(51 136 204) 0px 0px 0px 3px; }
main .WordArea textarea{ width:100%; height:200px; resize:none; background-color:rgba(0,0,0,.3); padding:20px; border-radius:10px; border:1px solid #fff; font-size:18px;}
main .check_box{ font-size:16px; color:#fff; display:flex; justify-content:center; align-items:center; padding:20px 0;}
main .check_box input[type=checkbox]{ width:17px; height:17px; border:1px solid #fff; background:none; border-radius:2px; margin-right:5px; position:relative; cursor:pointer; transition:.2s;}
main .check_box input[type=checkbox]::before{ content:""; display:block; width:6px; border-top:2px solid #fff; position:absolute; top:8px; left:2px; transform:rotate(45deg); opacity:0; transition:.2s;}
main .check_box input[type=checkbox]::after{ content:""; display:block; width:10px; border-top:2px solid #fff; position:absolute; top:6px; left:5px; transform:rotate(-45deg); opacity:0; transition:.2s;}
main .check_box input[type=checkbox]:checked{ background-color:#E44C65; border:1px solid #E44C65; transition:.2s;}
main .check_box input[type=checkbox]:checked::before{ opacity:1; transition:.2s;}
main .check_box input[type=checkbox]:checked::after{ opacity:1; transition:.2s;}
main .check_box a{ font-size:16px; color:#fff; text-decoration:underline;}
main .btm_enter{ display:block; font-size:18px; line-height:52px; height:52px; border-radius:5px; background-color:#E44C65; color:#fff; margin:0 50px; letter-spacing:2px; cursor:pointer; overflow:hidden;}
main .btm_enter button{ background:inherit; font:inherit; border:0; color:inherit; letter-spacing:inherit; cursor:pointer; width:100%; transition:.2s;}
main .btm_enter button:hover{ box-shadow:0 -5px 10px rgba(0,0,0,.3) inset; transition:.2s;}
main .btm_other{ display:block; font-size:18px; line-height:52px; height:52px; border-radius:5px; border:1px solid #fff; color:#fff; margin:0 50px; letter-spacing:2px; cursor:pointer; overflow:hidden;}
main .btn_vice_box{ display:flex; padding:30px 50px 0 50px; justify-content:center;}
main .btn_vice_box .btn_vice{ display:block; font-size:16px; line-height:30px; height:30px; color:rgba(255,255,255,.7); flex:auto; transition:.2s;}
main .btn_vice_box .btn_vice:hover{ color:rgba(255,255,255,1); transition:.2s;}
main .btn_vice_box .btn_vice:first-child{ border-right:1px solid rgba(255,255,255,.2);}
main .btn_vice_box .btn_vice:last-child{ border:0;}
main .page_name{ font-size:33px; color:#fff; padding-top:50px;}
main .form_box{ padding-bottom:30px; display:flex; flex-flow:wrap; justify-content:space-between;}
main .form_box .item_input_box{ width:100%; margin:10px 0; position:relative; height:50px;}
main .form_box .item_input_box.half{ width:48%;}
main .form_box .item_input_box .input_name{ font-size:16px; color:#fff; width:80px; text-align:left; position:absolute; top:0; left:0; line-height:50px; padding-left:15px;}
main .form_box .item_input_box input{ border:1px solid rgba(255,255,255,.3); background-color:rgba(0,0,0,.2); border-radius:5px; font-size:16px; padding:0 15px 0 100px; width:100%; height:50px; line-height:50px; transition:.2s; color:#fff; text-align:left; transition:.2s;}
main .form_box .item_input_box input:hover{ border:1px solid rgba(255,255,255,.7); transition:.2s;}
main .form_box .item_input_box input:focus{ border-color:#E44C65; transition:.2s;}
main .form_box .item_input_box input.cantedit{ border:1px solid rgba(255,255,255,.1);}
main .form_box .item_input_box input:-webkit-autofill{ background-color:rgba(0,0,0,.2)!important;}
main .form_box .item_input_box.verify input{ padding-right:110px;}
main .form_box .item_input_box.verify .code{ position:absolute; top:4px; right:4px; bottom:4px; border-radius:5px; overflow:hidden; cursor:pointer; transition:.2s;}
main .form_box .item_input_box.verify .code:hover{ filter:drop-shadow(0px 0px 5px rgba(255,255,255,.3)); transition:.2s;}
main .form_box .item_input_box.verify::after{ content:"點擊圖案更新驗證碼"; display:block; font-size:14px; color:rgba(255,255,255,.7); position:absolute; right:0; bottom:-20px; line-height:1;}
main .form_box .item_input_box .select{ border:1px solid rgba(255,255,255,.3); background-color:rgba(0,0,0,.2); border-radius:5px; font-size:16px; padding:0 15px 0 100px; width:100%; height:50px; line-height:50px; transition:.2s; color:#fff; transition:.2s;}
main .form_box .item_input_box .select select{ border:0; background:none; color:#fff; font-size:16px; text-align:left; width:100%; height:48px; line-height:48px;}
main .form_box .item_input_box .select select option{ color:#333;}
main .conent_narrow.full_height .page_name{ padding-top:10px;}
main .tick_image{ width:170px; margin:0 auto;}

.mask_box{ position:fixed; top:0; left:0; right:0; bottom:0; padding:30px; display:flex; justify-content:center; align-items:center; background-color:rgba(0,0,0,.5); z-index:100;}
.mask_box .mask_con{ max-width:350px; width:100%; padding:50px 30px; background-color:#fff; border-radius:10px; text-align:center; position:relative;}
.mask_box .mask_con::after{ content:""; display:block; position:absolute; top:10px; left:10px; right:10px; bottom:10px; border:1px solid #E44C65; border-radius:5px; pointer-events:none;}
.mask_box .mask_con .an_point{ padding-bottom:10px;}
.mask_box .mask_con .an_point span{ display:inline-block; width:15px; height:15px; border-radius:50%; background-color:#E44C65; margin:0 5px; opacity:0; animation:an_point01 1s infinite;}
.mask_box .mask_con .an_point span:nth-child(2){ animation:an_point02 1s infinite;}
.mask_box .mask_con .an_point span:nth-child(3){ animation:an_point03 1s infinite;}
@keyframes an_point01{0%{opacity:0;}0%{opacity:0;}50%{opacity:1}100%{opacity:1}}
@keyframes an_point02{0%{opacity:0;}10%{opacity:0;}60%{opacity:1}100%{opacity:1}}
@keyframes an_point03{0%{opacity:0;}20%{opacity:0;}70%{opacity:1}100%{opacity:1}}
.mask_box .mask_con p{ font-size:30px; color:#333;}
.mask_box .mask_con p span{ font-size:14px; color:#aaa; display:block; letter-spacing:2px}

/*footer*/
footer{ position:absolute; left:0; right:0; bottom:0; text-align:center; padding:0 50px 30px 50px;}
footer .LogoBox{ display:flex; justify-content:center;}
footer .LogoBox .logo{ display:inline-block; padding:0 5px;}
footer .LogoBox .logo img{ height:39px;}
footer .word_box{ display:flex; align-items:center; justify-content:center;}
footer .word{ color:#fff; line-height:2; font-size:14px; padding:0 10px;}
footerx .word a{ display:inline-block;}
footer .word .logo img{ height:39px;}
footer .word .link{ color:#fff; line-height:2; font-size:14px;}
footer .julyinfo{ opacity:.3;}

input:-internal-autofill-selected + p{ color:#333 !important;}

/*pad*/
@media screen and ( max-width: 1280px) and ( min-width: 768px) {
/*header*/
header .logo_box .logo{ height:60px;}
header .menu_btn{ display:block; position:relative; z-index:10;}
header .menu_box{ display:flex; position:fixed; top:0; bottom:0; right:-180px; width:180px; flex-direction:column; justify-content:flex-start; background-color:rgba(0,0,0,.5); padding:130px 20px 20px 20px; text-align:center; transition:.5s;}
header .menu_box .nostyle{ padding:12px 0;}
header .menu_box .style_red{ margin:10px 0;}
header .menu_box .style_black{ margin:10px 0;}

}

/*mobile*/
@media screen and ( max-width: 767px) {
.wrapper{ padding:70px 0 140px 0;}

/*header*/
header{ padding:15px 20px;}
header .logo_box .logo{ height:35px; margin-right:10px;}
header .menu_btn{ display:block; width:39px; height:39px; padding:5px 6px; z-index:10;}
header .menu_box{ display:flex; position:fixed; top:0; bottom:0; right:-100vw; width:100vw; flex-direction:column; justify-content:flex-start; background-color:rgba(0,0,0,.85); padding:100px 50px 120px 50px; text-align:center; transition:.5s;}
header .menu_box .nostyle{ padding:20px 0; font-size:18px; border-top:1px solid rgba(255,255,255,.2);}
header .menu_box .nostyle:first-child{ border:0;}
header .menu_box .style_red{ margin:10px 0; line-height:45px; height:45px;}
header .menu_box .style_black{ margin:10px 0; line-height:45px; height:45px;}
header .menu_box .username{ margin:0; color:#e44c65;}
header .menu_box .username::after{ display:none;}
/*content*/
main{ padding:0px 20px 50px 20px;}
main .text_slogan{ font-size:55px;}
main .text_describe{ font-size:18px;}
main .UserForm .DataArea{ width:100%; padding:5px 0;}
main .full_height{ min-height:calc( 100vh - 260px );}
main .QuestionType{ min-height:calc( 100vh - 260px ); justify-content:flex-start;}
main .topic{ font-size:20px; font-weight:bold; text-align:left;}
main .topic p{ padding: 0.2em 0 0.1em 0; }
main .Options{ display:block;}
main .Options p{ display:block; text-align:left;}
main .OptionsBox .Options{ width:100%; padding:5px 0;}
main .WordArea{ padding-top:10px;}
main .WordArea textarea{ height:400px;}
main .btm_enter{ margin:0;}
main .conent_narrow.full_height .btm_enter{ margin:0 30px 25px;}
main .conent_narrow.full_height .btm_enter:last-child{ margin:0 30px; }
main .conent_narrow.full_height .btn_vice_box{ padding:30px 30px 0 30px;}
main .btn_vice_box{ padding:30px 0 0 0;}
main .page_name{ padding-top:30px; padding-bottom:20px;}
main .form_box .item_input_box{ margin:18px 0;}
main .form_box .item_input_box .input_name{ line-height:1; top:-20px; font-size:14px; padding:0; letter-spacing:1px}
main .form_box .item_input_box input{ padding:0 15px;}
main .form_box .item_input_box .select{ padding:0 15px;}

/*footer*/
footer{ padding:20px;}
footer .LogoBox{ gap:8px;}
footer .LogoBox .logo{ padding:0;}
footer .LogoBox .logo img{ max-width:100%; height:auto;}
footer .word_box{ flex-direction:column;}
footer .word{ line-height:1.6; font-size:12px;}
footer .word .link{ line-height:1.6; font-size:12px;}
}