@charset "utf-8";

@import url("setting.css");

a{ color:#333; text-decoration:none; transition:0.2s all;}
a:hover{ color:#5ac3d7; text-decoration: none;}
a:focus{ text-decoration: none;}

.container{ /*max-width: 1240px;*/ max-width: 64.5%; padding: 0 1.04167vw; /* overflow: hidden; */ }
.container.w2{ max-width: 1400px; }
.container.w3{ max-width: 951px; }
.container.w3{ max-width: 728px; }
.container.w4{ max-width: 546px; }

.row{ margin-right: -12px !important; margin-left: -12px !important; }

#overlay{ width: 100%; height: 100%; background: #fff; position: absolute; z-index: 99999; opacity: 0; display: none; }

/*** HEADER ***/
#header_inner{ opacity: 0; }
header, header:active{ width: 100%; height: 4.1667vw; padding: 0 3.0208vw !important; position: absolute; top: 0; z-index: 999; }

.logo{ float: left; margin: .5208vw 0; padding: 0;}
.logo a{ /*width: 242px; height: 60px;*/ width: 12.604167vw; height: auto; display: block; }

.menu{ float: right; width: 3.021vw; height: 3.021vw; margin: .5208vw 0 0 0; padding: 0; }
.menu a{ padding: 0; text-align: center; display: block; }
.menu img{ width: 3.0208vw; height: auto; }

.menu_bg{ width: 100%; height: 100vh; background: #5ac3d7 url('../../img/bg-menu.webp') center bottom no-repeat; background-size: 100% auto; position: fixed; z-index: 99999; display: none; }
.menu_close{ position: fixed; top: .5208vw; right: 3.6458vw; }
.menu_close img{ width: 3.0208vw; height: auto;}
.menu_box{ max-width: 350px; margin: 10.4167vw auto; }
.menu_box li{ text-align: center; }
.menu_box li a{ margin: 2.6041vw 0; font-size: 1.6667vw; color: #fff; display: block; }
.menu_box li a:hover{ color: #f9c170; }

.music_wrap{ float: right; margin: .5208vw 1.5625vw 0 0; }
.music_wrap button{ width: 3.0208vw; height: 3.0208vw; background: url('../../img/ico-music.webp') center center no-repeat; background-size: cover; border: 0; cursor: pointer; animation: rotation 5s infinite linear; }
.music_wrap button.stop{ background: url('../../img/ico-music_x.webp') center center no-repeat; background-size: cover; animation: none; }
/*** /HEADER ***/

/*** LOGIN ***/
.login_bg{ width: 100%; height: 100vh; background: #5ac3d7 url('../../img/bg-menu.webp') center bottom no-repeat; background-size: 100% auto; }
.login_wrap{ padding: 5.208vw 2.083vw; }
.login_box{ max-width: calc(25vw - 2.083vw); margin: 0 auto; }
.login_box h2{ margin: 2.6041vw 0 1.0416vw 0; padding-bottom: 1.0416vw; color: #fff; font-size: 1.6667vw; border-bottom: 1px solid #fff; text-align: center; }
.form_login p{ margin-top: .5208vw; color: #fff; font-size: 1.25vw; line-height: 2.3958vw; text-align: right; }
.form_login button{ color: #624147; font-weight: 700; background: #f3bf73; border: 2px solid #f3bf73; }
.form_login button:hover{ background: #f3bf73; border-color: #624147; }

.login_info{ margin-top: 20px; padding-top: 10px; border-top: 1px solid #fff;}
.login_info p{font-size: 1em; line-height: 1em; text-align: center; }
/*** /LOGIN ***/

/*** INDEX ***/
#header_index{ opacity: 1;}
#header_index header, #header_index header:active{ width: 100%; height: 4.1667vw; padding: 0 .5208vw; background: rgba(255, 255, 255, .8); position: absolute; top: 0; z-index: 999; }
#header_index .menu{ float: right; width: auto; height: auto; margin: 1.302vw 0 0 0; padding: 0; background: none; border-radius: 0; }
#header_index .menu a{ float: left; margin-left: 2.604vw; padding: 0; font-size: 1.0417vw; text-align: center; display: block; }
#header_index .menu_show{ display: none !important; }

main.index{ background: url('../../img/bg-index.webp') center center no-repeat; background-size: cover; opacity: 1; display: block; }
main.index .cnt_wrap{ display: flex; }
main.index .cnt_wrap .cnt_col{ flex-basis: 50%; position: relative; display: flex; }
main.index .cnt_wrap .cnt_col:nth-child(1){ align-items: flex-end; }
main.index .cnt_wrap .cnt_col .model{ max-width: 36.4583vw; margin-left: 3.6458vw; }
main.index .cnt_wrap .cnt_col .txt01{ width: 5.4167vw; position: absolute; top: 35%; left: 10%; animation: 1s ease-in-out infinite alternate float_txt01, 1s ease-in-out fadein; }
main.index .cnt_wrap .cnt_col .txt02{ width: 11.25vw; position: absolute; top: 20%; left: 25%; animation: 1s ease-in-out .5s infinite alternate float_txt02, 1s ease-in-out fadein; }
main.index .cnt_wrap .cnt_col .txt03{ width: 12.3437vw; position: absolute; top: 22%; right: 5%; animation: 1s ease-in-out 1s infinite alternate float_txt03, 1.5s ease-in-out fadein; }
main.index .cnt_wrap .cnt_col:nth-child(2){ display: block; }
main.index .cnt_wrap .cnt_col .title{ max-width: 32.8541vw; margin: 13% auto 0 auto; }
main.index .cnt_wrap .cnt_col .txt{ /*max-width: 36.4583vw;*/ max-width: 31.7708vw; margin: 2% auto 0 auto; text-align: left; }
main.index .cnt_wrap .cnt_col .txt h3{ width: 100%; padding: 0; display: flex; }
main.index .cnt_wrap .cnt_col .txt h3 i{ margin-right: .5208vw; padding: 0; flex-basis: 1.3020vw; }
main.index .cnt_wrap .cnt_col .txt h3 i img{ padding-top: 7px; vertical-align: top; }
main.index .cnt_wrap .cnt_col .txt h3 span{ color: #f05a49; font-size: 1.4583vw; flex-basis: calc(100% - 1.8229vw); text-align: left;}
main.index .cnt_wrap .cnt_col .txt h3 span span{ padding-bottom: .4vw; background: url('../../img/bg-index_bar.webp') right bottom no-repeat; background: auto .15625vw; }
main.index .cnt_wrap .cnt_col .txt p{ margin-top: .5208vw; font-size: 1.0937vw; line-height: 1.5em; }
main.index .cnt_wrap .cnt_col .btn_wrap{ margin-top: -.2604vw; }

.cookie_des{ width: 100%; margin: 0; padding: .9895vw 3.6458vw; font-size: .8333vw; background: rgba(255, 255, 255, .9); border-top: 1px solid #ccc; position: fixed; bottom: 0; z-index: 1000; display: flex; flex-wrap: wrap; align-items: center; }
.cookie_des .cd_item{ display: flex; }
.cookie_des .cd_item:nth-child(1){ flex-basis: calc(100% - 26vw); }
.cookie_des .cd_item:nth-child(2){ flex-basis: 15vw; justify-content: center; }
.cookie_des .cd_item:nth-child(3){ flex-basis: 11vw; justify-content: center; }
.cookie_des .cd_item a{ color: #f09b91; }
.cookie_des .cd_item a:hover{ color: #5ac3d7; }
.cookie_des .cd_item .btn{ width: 100%; max-width: 10.4166vw; padding: .3645vw 0 .4167vw 0; color: #fff; background: #f09b91; border: 0; text-align: center; }
.cookie_des .cd_item .btn:hover{ background: #5ac3d7; }
/*** /INDEX ***/

/*** CNT ***/
main{ min-height: calc(100vh - 51px); padding: 0; opacity: 0; display: none; }

main.bg_test1_intro{ background: url('../../img/pic-test1_intro.webp') center bottom no-repeat, url('../../img/bg-test1_intro.webp') center center no-repeat; background-size: 30% auto, cover; }
main.bg_test2_intro{ background: url('../../img/pic-test2_intro.webp') center bottom no-repeat, url('../../img/bg-test2_intro.webp') center center no-repeat; background-size: 30% auto, cover; }
main.bg_test_01.bg01{ background: url('../../img/bg-test_01-01_pic.webp') center bottom -50px no-repeat, url('../../img/bg-test_01-01.webp') center center no-repeat; background-size: 100% auto, cover; }
main.bg_test_01.bg02{ background: url('../../img/bg-test_01-02_pic.webp') center bottom -50px no-repeat, url('../../img/bg-test_01-02.webp') center center no-repeat; background-size: 100% auto, cover; }
main.bg_test_01.bg03{ background: url('../../img/bg-test_01-03_pic.webp') center bottom -50px no-repeat, url('../../img/bg-test_01-03.webp') center center no-repeat; background-size: 100% auto, cover; }
main.bg_test_01.bg04{ background: url('../../img/bg-test_01-04_pic.webp') center bottom -50px no-repeat, url('../../img/bg-test_01-01.webp') center center no-repeat; background-size: 100% auto, cover; }
main.bg_test_01.bg05{ background: url('../../img/bg-test_01-05_pic.webp') center bottom -50px no-repeat, url('../../img/bg-test_01-02.webp') center center no-repeat; background-size: 100% auto, cover; }
main.bg_test_01.bg06{ background: url('../../img/bg-test_01-06_pic.webp') center bottom -50px no-repeat, url('../../img/bg-test_01-03.webp') center center no-repeat; background-size: 100% auto, cover; }
main.bg_test_01.bg07{ background: url('../../img/bg-test_01-07_pic.webp') center bottom -50px no-repeat, url('../../img/bg-test_01-01.webp') center center no-repeat; background-size: 100% auto, cover; }
main.bg_test_01.bg08{ background: url('../../img/bg-test_01-08_pic.webp') center bottom -50px no-repeat, url('../../img/bg-test_01-02.webp') center center no-repeat; background-size: 100% auto, cover; }
main.bg_test_01.bg09{ background: url('../../img/bg-test_01-09_pic.webp') center bottom -50px no-repeat, url('../../img/bg-test_01-03.webp') center center no-repeat; background-size: 100% auto, cover; }
main.bg_test_01.bg10{ background: url('../../img/bg-test_01-10_pic.webp') center bottom -50px no-repeat, url('../../img/bg-test_01-01.webp') center center no-repeat; background-size: 100% auto, cover; }
main.bg_test_02.bg01{ background: url('../../img/bg-test_02-01.webp') center center no-repeat; background-size: cover; }
main.bg_test_02.bg02{ background: url('../../img/bg-test_02-02.webp') center center no-repeat; background-size: cover; }
main.bg_profile{ background: url('../../img/bg-profile_pic.webp') center center no-repeat fixed, url('../../img/bg-profile.webp'); background-size: 100% auto, auto; }
main.bg_rep{ background: url('../../img/bg-profile.webp'); background-size: auto; opacity: 1; display: block; }
main.bg_rep_q{ background: url('../../img/bg-rep_q.webp'); background-size: auto; opacity: 1; display: block; }

main .cnt_wrap{ min-height: calc(100vh - 51px); position: relative; text-align: center; }
main .cnt_wrap h3{ padding: 1.5625vw 0; font-family: 'cwtexyen', sans-serif; font-size: 1.6667vw; font-weight: 700; line-height: 1.5em; text-align: center; }
main .cnt_wrap h3.intro{ padding: 5.2083vw 0;}
main .cnt_wrap h3.rep{ padding: 2.9687vw 0 2.9687vw 0;}
main .cnt_wrap h3.rep .cap_rep{ max-width: 41.6667vw; margin: 3.3854vw auto 0 auto; background: url('../../img/bg-cap_rep_l.webp') left center no-repeat, url('../../img/bg-cap_rep_r.webp') right center no-repeat; background-size: auto 1.302vw, auto 1.302vw; }
main .cnt_wrap h3 span.subtitle{ color: #333; font-family: 'Noto Sans TC', sans-serif; font-size: .6em; font-weight: 400; display: block; }
main .cnt_wrap.h_01{ min-height: calc(100vh - 242px); }
main .cnt_wrap.h_02{ height: auto; padding-bottom: 90px; }

main .cnt_wrap .btn_wrap{ height: 2.6041vw; padding: 2.0833vw 0; }
main .cnt_wrap .btn_wrap.not_now{ display: none; }
main .cnt_wrap .btn_wrap .btn_box{ margin: -.2083vw 0 0 0; position: relative; }
main .cnt_wrap .btn_wrap .btn_box.h2{ margin-top: 2.0416vw !important; }
main .cnt_wrap .btn_wrap .btn_box i, main .cnt_wrap .btn_wrap .btn_box button{ width: 23.4375vw; height: 3.9062vw;}
main .cnt_wrap .btn_wrap .btn_box i{ background: none; border: 2px solid #5ac3d7; position: absolute; top: -15px; left: calc(50% - 11.7187vw + 15px); z-index: 1;}
main .cnt_wrap .btn_wrap .btn_box button{ margin: 0 auto; font-size: 1.3541vw; position: absolute; left: calc(50% - 11.7187vw); z-index: 2; text-align: center; }

.main1 main .cnt_wrap .btn_wrap .btn_box{ margin-top: 1.5625vw;}
.main2 main .cnt_wrap .btn_wrap .btn_box{ margin-top: .2604vw;}

main .cnt_wrap .btn_wrap.intro{ position: absolute; bottom: 5.2083vw; }

.balloon{ width: 100%; position: absolute; top: 40%; left: 20%; z-index: 1; text-align: left; animation: 2s ease-in-out infinite alternate float_balloon, 1s ease-in-out fadein; }
.balloon img{ width: 79px; }
.cloud{ width: 100%; position: absolute; top: 27%; left: 0; text-align: center; animation: 2.5s ease-in-out infinite alternate float_cloud, 1s ease-in-out fadein; }

.main1 .container, .main2 .container, .main_profile .container{ opacity: 0; }

.progress_wrap{ max-width: 50vw; margin: 0 auto; padding: 6.5104vw 0 1.4267vw 0; position: relative; }
.progress_mark{ width: 2.8125vw; height: 2.8125vw; color: #fff; line-height: 2.7vw; background: url('../../img/ico-progress_mark.webp') no-repeat; background-size: cover; position: absolute; top: 5.4687vw; z-index: 1; text-align: center;}
.progress_mark p{ margin: 0; padding: 0; font-size: .75vw; line-height: 1em; display: inline-block; }
.progress_mark span{ transform: scale(.6); display: inline-block; position: relative; right: 0; bottom: -.1562vw; }
.progress_bar, .progress_bar:active{ width: 100%; height: .7291vw; border-radius: 8px; background: #fff; box-shadow: 0 4px 4px rgba(0, 0, 0, .2) !important; overflow: hidden; }
.progress_line{ width: 0%; height: .7291vw; background: #c0c0c0; }

.progress_mark.prog_p01{ left: calc(0% - 27px); animation: 1s ease-in-out 1 prog_p01;}
.progress_mark.prog_p02{ left: calc(7% - 27px); animation: 1s ease-in-out 1 prog_p02;}
.progress_mark.prog_p03{ left: calc(14% - 27px); animation: 1s ease-in-out 1 prog_p03;}
.progress_mark.prog_p04{ left: calc(21% - 27px); animation: 1s ease-in-out 1 prog_p04;}
.progress_mark.prog_p05{ left: calc(29% - 27px); animation: 1s ease-in-out 1 prog_p05;}
.progress_mark.prog_p06{ left: calc(36% - 27px); animation: 1s ease-in-out 1 prog_p06;}
.progress_mark.prog_p07{ left: calc(43% - 27px); animation: 1s ease-in-out 1 prog_p07;}
.progress_mark.prog_p08{ left: calc(50% - 27px); animation: 1s ease-in-out 1 prog_p08;}
.progress_mark.prog_p09{ left: calc(57% - 27px); animation: 1s ease-in-out 1 prog_p09;}
.progress_mark.prog_p10{ left: calc(64% - 27px); animation: 1s ease-in-out 1 prog_p10;}
.progress_mark.prog_p11{ left: calc(71% - 27px); animation: 1s ease-in-out 1 prog_p11;}
.progress_mark.prog_p12{ left: calc(79% - 27px); animation: 1s ease-in-out 1 prog_p12;}
.progress_mark.prog_p13{ left: calc(86% - 27px); animation: 1s ease-in-out 1 prog_p13;}
.progress_mark.prog_p14{ left: calc(93% - 27px); animation: 1s ease-in-out 1 prog_p14;}

.progress_line.prog_w_p01{ width: 0%; animation: 1s ease-in-out 1 prog_w_p01;}
.progress_line.prog_w_p02{ width: 7%; animation: 1s ease-in-out 1 prog_w_p02;}
.progress_line.prog_w_p03{ width: 14%; animation: 1s ease-in-out 1 prog_w_p03;}
.progress_line.prog_w_p04{ width: 21%; animation: 1s ease-in-out 1 prog_w_p04;}
.progress_line.prog_w_p05{ width: 29%; animation: 1s ease-in-out 1 prog_w_p05;}
.progress_line.prog_w_p06{ width: 36%; animation: 1s ease-in-out 1 prog_w_p06;}
.progress_line.prog_w_p07{ width: 43%; animation: 1s ease-in-out 1 prog_w_p07;}
.progress_line.prog_w_p08{ width: 50%; animation: 1s ease-in-out 1 prog_w_p08;}
.progress_line.prog_w_p09{ width: 57%; animation: 1s ease-in-out 1 prog_w_p09;}
.progress_line.prog_w_p10{ width: 64%; animation: 1s ease-in-out 1 prog_w_p10;}
.progress_line.prog_w_p11{ width: 71%; animation: 1s ease-in-out 1 prog_w_p11;}
.progress_line.prog_w_p12{ width: 79%; animation: 1s ease-in-out 1 prog_w_p12;}
.progress_line.prog_w_p13{ width: 86%; animation: 1s ease-in-out 1 prog_w_p13;}
.progress_line.prog_w_p14{ width: 93%; animation: 1s ease-in-out 1 prog_w_p14;}

.q_wrap{ margin: -1% 0 0 0; padding: 0; list-style: none; }
.q_wrap li:last-child{ margin-bottom: 0; }
.q_wrap .q_opt label{ font-size: 1.0416vw; cursor: pointer; display: block;}

.q_wrap.type_01 li{ margin: 2.604vw 0; overflow: hidden; }
.q_wrap.type_01 li:last-child{ margin-bottom: 0; }
.q_wrap.type_01 li i{ float: left; width: 2.6041vw; height: 2.6041vw; margin: 10px 20px 0 0; color: #fff; font-size: .8333vw; font-style: normal; line-height: 2.5vw; background: #231815; border-radius: 50%; text-align: center; display: inline-block; }
.q_wrap.type_01 li .q_opt_wrap{ float: left; width: calc(100% - 2.6041vw - 20px);}
.q_wrap.type_01 .q_opt{ width: calc(50% - 2px); display: inline-block; }
.q_wrap.type_01 .q_opt input[type="radio"] { width: auto; position: fixed; opacity: 0 !important; }
.q_wrap.type_01.t01 .q_opt input[type="radio"]:checked + label{ color: #fff; font-weight: 700; background: #87c440; border-color: #87c440;}
.q_wrap.type_01.t01 .q_opt label{ margin: 0 .5208vw; padding: 1.0416vw 0; font-weight: 400; background: #ededed; border: 2px solid #c0c0c0; border-radius: 75px; transition:0.2s all; }
.q_wrap.type_01.t02 .q_opt input[type="radio"]:checked + label{ color: #fff; font-weight: 700; background: #f09b91; border-color: #f09b91;}
.q_wrap.type_01.t02 .q_opt label{ margin: 0 .5208vw; padding: 1.0416vw 0; font-weight: 400; background: #ededed; border: 2px solid #c0c0c0; border-top-left-radius: 75px; border-bottom-right-radius: 75px; transition:0.2s all; }
.q_wrap.type_01.t03 .q_opt input[type="radio"]:checked + label, .q_wrap.type_01.t03 .q_opt input[type="radio"]:checked + label::before{ color: #fff; font-weight: 700; background: #fac373; border-color: #fac373;}
.q_wrap.type_01.t03 .q_opt label{ margin: 0 .5208vw; padding: 1.0416vw 0; font-weight: 400; background: #c0c0c0; border: 2px solid #c0c0c0; position: relative; transition:0.2s all; }
.q_wrap.type_01.t03 .q_opt label{ clip-path: polygon( 0 1.0416vw, 1.0416vw 0, calc(100% - 1.0416vw) 0, 100% 1.0416vw, 100% calc(100% - 1.0416vw), calc(100% - 1.0416vw) 100%, 1.0416vw 100%, 0% calc(100% - 1.0416vw), 0% 1.0416vw) }
.q_wrap.type_01.t03 .q_opt label::before{ width: 100%; height: 100%; background: #ededed; display: block; position: absolute; top: 0px; z-index: -1; content: ''; clip-path: polygon( 0 1vw, 1vw 0, calc(100% - 1vw) 0, 100% 1vw, 100% calc(100% - 1vw), calc(100% - 1vw) 100%, 1vw 100%, 0% calc(100% - 1vw), 0% 1vw) }
.q_wrap.type_01 .q_opt label p{ font-size: 1.0416vw; }

.q_wrap.type_02 li{ margin-bottom: 1.302vw; overflow: hidden; }
.q_wrap.type_02 li:last-child{ margin-bottom: 0; }
.q_wrap.type_02 li i{ float: left; width: 2.6041vw; height: 2.6041vw; margin-top: .5208vw; color: #fff; font-size: 1.25vw; font-style: normal; line-height: 2.5vw; background: #231815; border-radius: 50%; text-align: center; display: inline-block; }
.q_wrap.type_02 li .q_opt_wrap{ float: left; width: calc(100% - 2.6041vw); padding: 1.1458vw 0 .0520vw 1.5625vw; text-align: left; }
.q_wrap.type_02 li .q_opt_wrap span{ margin-bottom: 1.302vw; font-size: 1.1458vw; line-height: 1.0416vw; text-align: left; display: inline-block; }
.q_wrap.type_02 li .q_opt_wrap .line_wrap{ width: 100%; height: 3.125vw; position: relative; top: .4167vw; }

.q_wrap.type_02 .q_opt{ position: absolute; top: -.2604vw; z-index: 2; transition:0.2s all;}
.q_wrap.type_02 .q_opt:nth-child(1){ left: calc(0% - 0px); }
.q_wrap.type_02 .q_opt:nth-child(2){ left: calc((100% - 2.0833vw) / 4 - 3px); }
.q_wrap.type_02 .q_opt:nth-child(3){ left: calc((100% - 2.0833vw) / 4 + (100% - 2.0833vw) / 4 - 4px); }
.q_wrap.type_02 .q_opt:nth-child(4){ left: calc((100% - 2.0833vw) / 4 + (100% - 2.0833vw) / 4 + (100% - 2.0833vw) / 4 - 5px); }
.q_wrap.type_02 .q_opt:nth-child(5){ left: calc((100% - 2.0833vw) / 4 + (100% - 2.0833vw) / 4 + (100% - 2.0833vw) / 4 + (100% - 2.0833vw) / 4 - 5px); }
.q_wrap.type_02 .q_opt input[type="radio"] { width: 26px; height: 26px; position: absolute; top: -8px; left: 0px; opacity: 0 !important; cursor: pointer;}
.q_wrap.type_02.t01 li .q_opt_wrap .line{ width: calc(100% - 2.0833vw - 2px); height: .5208vw; margin-left: .5208vw; background: rgba(135, 196, 64, 0.5); position: absolute; }
.q_wrap.type_02.t01 .q_opt input[type="radio"]:checked + label{ width: 2.0833vw; height: 2.0833vw; margin: -.5208vw 0 0 -.3646vw; color: #fff; background: #87c440 url('../../img/ico-checked-01.webp') center center no-repeat; background-size: cover;}
.q_wrap.type_02.t01 .q_opt label{ width: 1.3541vw; height: 1.3541vw; margin: -.1562vw 0 0 0; padding: 0; font-weight: 400; background: #fff; border: 2px solid #87c440; border-radius: 50%; transition:0.2s all; }
.q_wrap.type_02.t02 li .q_opt_wrap .line{ width: calc(100% - 2.0833vw - 2px); height: .5208vw; margin-left: .5208vw; background: rgba(240, 155, 145, 0.5); position: absolute; }
.q_wrap.type_02.t02 .q_opt input[type="radio"]:checked + label{ width: 2.0833vw; height: 2.0833vw; margin: -.5208vw 0 0 -.3646vw; color: #fff; background: #f09b91 url('../../img/ico-checked-02.webp') center center no-repeat; background-size: cover;}
.q_wrap.type_02.t02 .q_opt label{ width: 1.3541vw; height: 1.3541vw; margin: -.1562vw 0 0 0; padding: 0; font-weight: 400; background: #fff; border: 2px solid #f09b91; border-radius: 50%; transition:0.2s all; }
.q_wrap.type_02.t03 li .q_opt_wrap .line{ width: calc(100% - 2.0833vw - 2px); height: .5208vw; margin-left: .5208vw; background: rgba(255, 165, 0, 0.5); position: absolute; }
.q_wrap.type_02.t03 .q_opt input[type="radio"]:checked + label{ width: 2.0833vw; height: 2.0833vw; margin: -.5208vw 0 0 -.3646vw; color: #fff; background: #ffa500 url('../../img/ico-checked-03.webp') center center no-repeat; background-size: cover;}
.q_wrap.type_02.t03 .q_opt label{ width: 1.3541vw; height: 1.3541vw; margin: -.1562vw 0 0 0; padding: 0; font-weight: 400; background: #fff; border: 2px solid #ffa500; border-radius: 50%; transition:0.2s all; }
.q_wrap.type_02.t04 li .q_opt_wrap .line{ width: calc(100% - 2.0833vw - 2px); height: .5208vw; margin-left: .5208vw; background: rgba(28, 127, 140, 0.5); position: absolute; }
.q_wrap.type_02.t04 .q_opt input[type="radio"]:checked + label{ width: 2.0833vw; height: 2.0833vw; margin: -.5208vw 0 0 -.3646vw; color: #fff; background: #1c7f8c url('../../img/ico-checked-04.webp') center center no-repeat; background-size: cover;}
.q_wrap.type_02.t04 .q_opt label{ width: 1.3541vw; height: 1.3541vw; margin: -.1562vw 0 0 0; padding: 0; font-weight: 400; background: #fff; border: 2px solid #1c7f8c; border-radius: 50%; transition:0.2s all; }

.q_wrap.type_02 .q_opt_name{ width: 100%; position: absolute; z-index: 3; }
.q_wrap.type_02 .q_opt_name p{ width: 3.3333vw; margin: 1.5625vw 0 0 -1.1458vw; font-size: .9375vw; position: absolute; white-space: nowrap; text-align: center; }
.q_wrap.type_02 .q_opt_name p:nth-child(1){ left: 0; }
.q_wrap.type_02 .q_opt_name p:nth-child(2){ left: calc((100% - 2.0833vw) / 4); }
.q_wrap.type_02 .q_opt_name p:nth-child(3){ left: calc((100% - 2.0833vw) / 4 + (100% - 2.0833vw) / 4); }
.q_wrap.type_02 .q_opt_name p:nth-child(4){ left: calc((100% - 2.0833vw) / 4 + (100% - 2.0833vw) / 4 + (100% - 2.0833vw) / 4 - 2px); }
.q_wrap.type_02 .q_opt_name p:nth-child(5){ left: calc((100% - 2.0833vw) / 4 + (100% - 2.0833vw) / 4 + (100% - 2.0833vw) / 4 + (100% - 2.0833vw) / 4 - 2px); }

.form_wrap{ max-width: 41.6667vw; margin: 0 auto; padding: 1.5625vw; background: rgba(255, 255, 255, .9); border-radius: 5px; text-align: left; }
.form_wrap b{ color: #1c7f8c; font-size: 1.0416vw; }
.form_wrap .collist{ position: relative; }
.form_wrap .collist .column{ margin-bottom: 30px; position: relative; overflow: hidden; }
.form_wrap .s-3 .column{ width: calc((100% / 3) - 6px); display: inline-block; }
.form_wrap .s-2 .column{ width: calc((100% / 2) - 3px); display: inline-block; }
.form_wrap .s-4 .column{ width: calc((100% / 2) - 3px); margin-top: -40px; display: inline-block; }
.form_wrap .s-4 .column:nth-child(-n+2){ margin-top: 0px; }
.form_wrap .collist:last-child .column{ margin-bottom: 0; }
.form_wrap span.error { padding: 5px 0; color: #c00; font-size: .8333vw; line-height: 1em; white-space: nowrap; position: absolute; top: -5px; right: 0; z-index: 100; display: none;}
.form_wrap span.error.t2{ right: 12px; }
.form_wrap span.error.t3{ top: 20px; right: 12px; }
.form_wrap input.hasError, .form_wrap select.hasError, .form_wrap textarea.hasError{ border-color: #c00 !important; }
.form_wrap .ctr_radio.hasError, .form_wrap .ctr_check.hasError{ color: #c00; }
.form_wrap .ctr_radio.hasError .radiomark, .form_wrap .ctr_check.hasError .checkmark{ border-color: #c00; }

.note-sm{ color: #8d8d8d; font-size: .875em; }

.not_now{ opacity: .35; }

h3.ico-checked span.t01{ padding: 6px 2.0833vw 2px 0; background: url('../../img/ico-checked-01.webp') right top no-repeat; background-size: 2.0833vw auto;}
h3.ico-checked span.t02{ padding: 6px 2.0833vw 2px 0; background: url('../../img/ico-checked-02.webp') right top no-repeat; background-size: 2.0833vw auto;}
h3.ico-checked span.t03{ padding: 6px 2.0833vw 2px 0; background: url('../../img/ico-checked-03.webp') right top no-repeat; background-size: 2.0833vw auto;}
h3.ico-checked span.t04{ padding: 6px 2.0833vw 2px 0; background: url('../../img/ico-checked-04.webp') right top no-repeat; background-size: 2.0833vw auto;}

.nav-item{ width: 50%;}
.nav-link, .nav-link:hover, .nav-link:focus{ width: 100%; margin-bottom: 0 !important; padding-top: .7812vw; color: #8d8d8d; font-size: 1.4583vw; background: #ededed !important; border: 0 !important; border-top-left-radius: 1.0416vw !important; border-top-right-radius: 1.0416vw !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.nav-link.active{ color: #fac373 !important; background: #fff !important; }
.nav-item:first-child { padding-right: .2604vw; }
.nav-item:last-child { padding-left: .2604vw; }
.nav-item .nav-link span{ overflow: hidden; display: inline-block; }
.nav-item .nav-link i{ float: left; width: 1.5625vw; height: 1.5625vw; margin: .15625vw .7812vw 0 0; }
.nav-item .nav-link p{ float: left; }
.nav-item:first-child .nav-link i{ background: url('../../img/ico-rep_01x.webp') 0 0 no-repeat; background-size: cover; }
.nav-item:first-child .nav-link.active i{ background: url('../../img/ico-rep_01.webp') 0 0 no-repeat; background-size: cover; }
.nav-item:last-child .nav-link i{ background: url('../../img/ico-rep_02x.webp') 0 0 no-repeat; background-size: cover; }
.nav-item:last-child .nav-link.active i{ background: url('../../img/ico-rep_02.webp') 0 0 no-repeat; background-size: cover; }
.nav-tabs{ border: 0; }
.tab-content{ padding: 2.6041vw; background: url('../../img/bg-rep_01.webp') center center no-repeat; background-size: cover; background-color: rgba(255, 255, 255, .9); border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; }
.tab-content.t2{ border-radius: 20px; }
.tab-pane .tab_mainpic{ width: 100%; text-align: center; }
.tab-pane .tab_mainpic img{ max-width: 31.25vw !important; }
.tab_data{ max-width: 44.5833vw; margin: 1.5625vw auto 0 auto; padding: 0; list-style: none; overflow: hidden; }
.tab_data li{ float: left; text-align: left; }
.tab_data li:first-child{ width: calc(100% - 16.4583vw); padding-right: 1.5625vw; font-size: 1.0416vw; }
.tab_data li:last-child{ width: 13.2291vw; padding-left: 1.5625vw; border-left: 2px solid #fac373; overflow: hidden; }
.tab_data li p:nth-child(1){ float: left; margin: .5208vw 0 0 0; color: #1c7f8c; font-size: 1.0416vw; }
.tab_data li p:nth-child(2){ float: right; color: #f05a49; font-size: 1.8229vw; font-weight: 700; }
.tab_data li p:nth-child(2) span{ font-size: 1.0416vw; }
.tab_data li:last-child .star_rank{ float: right; overflow: hidden; }
.tab_data li:last-child .star_rank .star{ float: left; width: 1.5625vw; height: 1.5625vw; margin: 0 0 0 .7812vw; background: url('../../img/ico-star.webp') center center no-repeat; background-size: cover; display: block; }
.tab_data li:last-child .star_rank .star.x{ background: url('../../img/ico-starx.webp') center center no-repeat; background-size: cover; }

.volunteer .nav-item{ width: calc(100% / 3); padding: 0 .2083vw; }
.volunteer .nav-item:nth-child(1) { padding: 0 .4167vw 0 0; }
.volunteer .nav-item:nth-child(3) { padding: 0 0 0 .4167vw; }
.volunteer .nav-item button{ padding: 2.6041vw; text-align: center; transition:0.2s all; }
.volunteer .nav-item button img{ transition:0.2s all;}
.volunteer .nav-item button:hover{ box-shadow: 5px 5px 10px rgba(0, 0, 0, .5) !important;}
.volunteer .nav-item button:hover img{ transform: scale(1.1, 1.1); }
.volunteer .nav-item button p{ float: none; margin: 1.0416vw 0; padding: 0; color: #333;}
.volunteer .nav-item button ul{ margin: 0; padding: 0; list-style: none; overflow: hidden; }
.volunteer .nav-item button li{ float: left; height: 3.906vw; background: #fac373; border-radius: 3.906vw; text-align: center; }
.volunteer .nav-item button li .perc{ width: 3.6979vw; margin: .5729vw auto 0 auto; overflow: hidden;}
.volunteer .nav-item button li .perc p{ float: left; width: 2.45vw; margin: 0; padding: 0; color: #f05a49; font-size: 2.0833vw; font-weight: 700; text-align: right; }
.volunteer .nav-item button li .perc span{ float: left; margin: .9895vw 0 0 .2604vw; color: #f05a49; font-size: 1.0416vw; }
.volunteer .nav-item button li .star_rank{ margin: .9895vw auto 0 auto; text-align: center; }
.volunteer .nav-item button li .star_rank .star{ width: 1.5625vw; height: 1.5625vw; margin: 0 .1953vw; background: url('../../img/ico-star.webp') center center no-repeat; background-size: cover; display: inline-block; }
.volunteer .nav-item button li .star_rank .star.x{ background: url('../../img/ico-starx.webp') center center no-repeat; background-size: cover; }
.volunteer .nav-item button li:first-child{ width: 6.3541vw; margin-right: .4167vw; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.volunteer .nav-item button li:last-child{ width: calc(100% - 6.7708vw); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.volunteer .nav-item .ico-triangle{ width: 100%; height: 3.0729vw; margin: 1.6245vw 0 0 0; background: url('../../img/ico-triangle.webp') center 0 no-repeat; background-size: auto 100%; opacity: 0; transition:0.2s all; }
.volunteer .nav-item .nav-link.active ~ .ico-triangle{ opacity: 1; }
.volunteer .nav-link, .volunteer .nav-link:hover, .volunteer .nav-link:focus{ margin-bottom: 0px !important; background: rgba(255, 255, 255, .9) !important; border-radius: 1.0416vw !important; }
/* .volunteer .nav-item:hover .nav-link{ box-shadow: 0 0 10px rgba(0, 0, 0, .75) !important; } */
.volunteer .tab-content{ background: #fff; border-radius: 20px; text-align: left; }
.volunteer .tab-content h3{ margin: 0 0 .5208vw 0; padding: 0; font-family: 'Noto Sans TC', sans-serif; }
.volunteer .tab-content .collist:nth-child(1) p{ font-size: 1.0416vw; }
.volunteer .tab-content .subcap{ padding-left: 1.0416vw; color: #f05a49; font-size: .9375vw; line-height: 1.5625vw; border-left: .5208vw solid #f05a49; }
.volunteer .tab-content .param_wrap{ margin-top: 1.0416vw; padding: 1.5625vw; border: 1px solid #000; border-radius: .5208vw; }
.volunteer .tab-content .param_wrap .param{ margin-bottom: 1.0416vw; }
.volunteer .tab-content .param_wrap .param:last-child{ margin-bottom: 0px; }
.volunteer .tab-content .param_wrap .param h3{ margin: 0 0 .5208vw 0; padding: 0 0 0 2.6041vw; color: #1c7f8c; line-height: 1.4583vw; text-align: left; overflow: hidden; }
.volunteer .tab-content .param_wrap .param.rep02_00{ height: 5.10416vw; }
.volunteer .tab-content .param_wrap .param.rep02_01 h3{ background: url('../../img/ico-rep02_01.webp') no-repeat; background-size: 1.5625vw auto; }
.volunteer .tab-content .param_wrap .param.rep02_02 h3{ background: url('../../img/ico-rep02_02.webp') no-repeat; background-size: 1.5625vw auto; }
.volunteer .tab-content .param_wrap .param.rep02_03 h3{ background: url('../../img/ico-rep02_03.webp') no-repeat; background-size: 1.5625vw auto; }
.volunteer .tab-content .param_wrap .param.rep02_04 h3{ background: url('../../img/ico-rep02_04.webp') no-repeat; background-size: 1.5625vw auto; }
.volunteer .tab-content .param_wrap .param.rep02_05 h3{ background: url('../../img/ico-rep02_05.webp') no-repeat; background-size: 1.5625vw auto; }
.volunteer .tab-content .param_wrap .param.rep02_06 h3{ background: url('../../img/ico-rep02_06.webp') no-repeat; background-size: 1.5625vw auto; }
.volunteer .tab-content .param_wrap .param.rep02_07 h3{ background: url('../../img/ico-rep02_07.webp') no-repeat; background-size: 1.5625vw auto; }
.volunteer .tab-content .param_wrap .param.rep02_08 h3{ background: url('../../img/ico-rep02_08.webp') no-repeat; background-size: 1.5625vw auto; }
.volunteer .tab-content .param_wrap .param.rep02_09 h3{ background: url('../../img/ico-rep02_09.webp') no-repeat; background-size: 1.5625vw auto; }
.volunteer .tab-content .param_wrap .param.rep02_10 h3{ background: url('../../img/ico-rep02_10.webp') no-repeat; background-size: 1.5625vw auto; }
.volunteer .tab-content .param_wrap .param.rep02_11 h3{ background: url('../../img/ico-rep02_11.webp') no-repeat; background-size: 1.5625vw auto; }
.volunteer .tab-content .param_wrap .param.rep02_12 h3{ background: url('../../img/ico-rep02_12.webp') no-repeat; background-size: 1.5625vw auto; }
.volunteer .tab-content .param_wrap .param.rep02_13 h3{ background: url('../../img/ico-rep02_13.webp') no-repeat; background-size: 1.5625vw auto; }
.volunteer .tab-content .param_wrap .param.rep02_14 h3{ background: url('../../img/ico-rep02_14.webp') no-repeat; background-size: 1.5625vw auto; }
.volunteer .tab-content .param_wrap .param.rep02_15 h3{ background: url('../../img/ico-rep02_15.webp') no-repeat; background-size: 1.5625vw auto; }
.volunteer .tab-content .param_wrap .param h3 .star_rank{ float: right; overflow: hidden; }
.volunteer .tab-content .param_wrap .param h3 .star_rank .star{ float: left; width: 1.5625vw; height: 1.5625vw; margin: 0 0 0 .7812vw; background: url('../../img/ico-star2.webp') center center no-repeat; background-size: cover; display: block; }
.volunteer .tab-content .param_wrap .param h3 .star_rank .star.x{ background: url('../../img/ico-star2x.webp') center center no-repeat; background-size: cover; }
.volunteer .tab-content .param_wrap .param p{ padding: 0 0 0 2.6041vw; color: #7d7d7d; font-size: 1.0416vw; line-height: 1.5vw; }

.volunteer.mb{ display: none; }

.item_wrap{ margin-top: 2.6041vw; padding: 1.5625vw; background: rgba(255, 255, 255, .9); border-radius: 1.0416vw; }
.item_wrap h3{ font-family: 'Noto Sans TC', sans-serif !important;}
.item_share{ margin: 1.0416vw 0; padding: 0; border-radius: 1.0416vw; display: flex; overflow: hidden; }
.item_share .item{ padding: 1.5625vw; background: #e3e3e3; display: flex; align-items: center; justify-content: center; }
.item_share .item:nth-child(1){ flex-basis: calc(100% - 10.4167vw);  }
.item_share .item:nth-child(1) .item_img{ flex-basis: 9.375vw; }
.item_share .item:nth-child(1) .item_txt{ margin-left: 2.0833vw; flex-basis: calc(100% - 7.2917vw); text-align: left; }
.item_share .item:nth-child(1) .item_txt h3{ margin: 0 0 .7812vw 0; padding: 0; text-align: left; }
.item_share .item:nth-child(1) .item_txt p{ margin: 0; padding: 0; font-size: 1.0416vw; line-height: 1.5vw; }
.item_share .item:nth-child(2){ margin-left: 1.0416vw; flex-basis: 9.375vw; flex-wrap: wrap; align-content: center; }
.item_share .item:nth-child(2) b{ width: 100%; margin-bottom: .2604vw; color: #1c7f8c; font-size: 1.0416vw; font-weight: 400; display: block; }
.item_share .item:nth-child(2) .perc{ width: 100%; margin: 0; padding: 0; text-align: center;}
.item_share .item:nth-child(2) .perc p{ margin: 0; padding: 0; color: #f05a49; font-size: 2.0833vw; font-weight: 700; display: inline-block; }
.item_share .item:nth-child(2) .perc span{ margin: .9895vw 0 0 .2604vw; color: #f05a49; font-size: 1.0416vw; display: inline-block; }
.item_share .item:nth-child(2) .star_rank{ margin: .5208vw auto 0 auto; text-align: center; }
.item_share .item:nth-child(2) .star_rank .star{ width: 1.5625vw; height: 1.5625vw; margin: 0 .1953vw; background: url('../../img/ico-star.webp') center center no-repeat; background-size: cover; display: inline-block; }
.item_share .item:nth-child(2) .star_rank .star.x{ background: url('../../img/ico-starx.webp') center center no-repeat; background-size: cover; }

.concept_wrap{ padding: 1.5625vw; background: rgba(255, 255, 255, .9); border: 1px solid #000; border-radius: 10px; display: flex; align-items: center; }
.concept_wrap h3{ margin: 0 1.5625vw 0 0; padding: 0 0 0 2.0833vw !important; color: #1c7f8c; font-family: 'Noto Sans TC', sans-serif !important; font-size: 1.4583vw; line-height: 1.625vw !important; flex-basis: 8.8541vw; }
.concept_wrap h3.rep03_01{ background: url('../../img/ico-rep03_01.webp') no-repeat; background-size: 1.5625vw auto; }
.concept_wrap h3.rep03_02{ background: url('../../img/ico-rep03_02.webp') no-repeat; background-size: 1.5625vw auto; }
.concept_wrap h3.rep03_03{ background: url('../../img/ico-rep03_03.webp') no-repeat; background-size: 1.5625vw auto; }
.concept_wrap p{ flex-basis: calc(100% - 17.4479vw); color: #7d7d7d; font-size: 1.0416vw; text-align: left; }
.concept_wrap .star_rank{ flex-basis: 7.0312vw; margin-top: -.1562vw; overflow: hidden; }
.concept_wrap .star_rank .star{ float: left; width: 1.5625vw; height: 1.5625vw; margin: 0 0 0 .5208vw; background: url('../../img/ico-star2.webp') center center no-repeat; background-size: cover; display: block; }
.concept_wrap .star_rank .star.x{ background: url('../../img/ico-star2x.webp') center center no-repeat; background-size: cover; }

.item_wrap.dl{ padding: 2.6041vw 1.5625vw; background: url('../../img/bg-rep_01.webp') center center no-repeat; background-size: cover; background-color: rgba(255, 255, 255, .9); }
.item_wrap.dl p{ font-size: 1.0416vw; line-height: 1.625vw; text-align: left; }
.item_wrap.dl button, .item_wrap.dl a{ width: 100%; max-width: 23.4375vw; margin: 2.6041vw 0 0 0; padding: 1.3541vw 1.0416vw 1.4158vw 1.0416vw; color: #fff; font-size: 1.1458vw; line-height: .8333vw; }
.item_wrap.dl button span, .item_wrap.dl a span{ padding: 0 0 0 2.3437vw; background:#5ac3d7 url('../../img/ico-dl.webp') 0 .2604vw no-repeat; background-size: 1.5625vw auto; }

.info{ margin: 0; padding: 2.6041vw 0; list-style: none; }
.info li{ margin-bottom: 1.0416vw; overflow: hidden; }
.info li i{ float: left; width: 1.3020vw; height: 1.3020vw; margin-right: .7812vw; background: url('../../img/ico-info.webp') center center no-repeat; background-size: cover; display: block; }
.info li p{ float: left; width: calc(100% - 2.0833vw); font-size: 1.0416vw; text-align: left; }
.info li p a{ font-weight: 700; text-decoration: underline; }

main .cnt_wrap h3.rep_q{ padding: 7.8125vw 0 1.5625vw 0; font-size: 1.6667vw;}
main .cnt_wrap h3.rep_q span{ margin-top: .5208vw; font-family: 'Noto Sans TC', sans-serif; font-size: .9895vw; font-weight: 400; line-height: 1.625vw; display: block; }
main.bg_rep_q{ min-height: auto !important; }
main.bg_rep_q .btn_wrap{ padding-bottom: 7.8125vw; }

.pdf_wrap{ position: absolute; top: -9999px; }
.chart_box{width: 300px; min-height: 300px; }

.h2_sub{ margin-top: 10px; font-size: .5em; font-weight: 400; display: block; }
/*** /CNT ***/

/*** PAGINATION ***/
.pagination_wrap{ width: 100%; text-align: center; }
.pagination{ margin-top: 50px; }
.pagination .page-item, .pagination .page-item a{ margin: 0 1px; border-radius: 0 !important; }
.pagination a{ color: #666; }
.pagination a:hover{ color: #fff; background: #5ac3d7; }
.pagination .active .page-link{ background: #333; border-color: #dee2e6; }
/*** /PAGINATION ***/

/*** FOOTER ***/
footer{ margin: 0; padding: 0; background: #333; overflow: hidden; }

.copyright{ padding: .5208vw 1.0416vw; color: #5ac3d7; font-size: .72916vw; background: #fff; border-top: .5208vw solid #5ac3d7; text-align: center; }
/*** /FOOTER ***/

/*** CAPTCHA ***/
.captcha_wrap{ float: left; margin: 10px 0 0 20px; }
.captcha_wrap2{ overflow: hidden; }
#captcha_code{ float: left; width: 100px; }
/*** /CAPTCHA ***/

/*** BTN ***/
.btn{ border-radius: 0; }
.btn_wrap{ width: 100%; margin:30px 0 0 0; }
.btn_wrap button{ font-size: 1.375em;}

.btn-primary{ color: #fff; background: #5ac3d7; border: 2px solid #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{ background: #5ac3d7 !important; border: 2px solid #5ac3d7 !important;}
/*** /BTN ***/

/*** COLOR ***/
.color01{ color: #64b6c8; }
.color02{ color: #f29c8f; }
.color03{ color: #f9c170; }
.color04{ color: #f05b49; }
.color05{ color: #5ac3d7; }

.color_white{ color: #fff; }
.color_note{ color: #c00; }
/*** /COLOR ***/

/*** ANI ***/
@keyframes fadein {
  0%{ opacity: 0;}
  50%{ opacity: 0;}
  100%{ opacity: 1;}
}
@keyframes float_txt01 {
  100%{ top: 33%;}
}
@keyframes float_txt02 {
  100%{ top: 18%;}
}
@keyframes float_txt03 {
  100%{ top: 20%;}
}
@keyframes float_cloud {
  100%{ left: 1%;}
}
@keyframes float_balloon {
  100%{ top: 38%;}
}
@keyframes trans_fadein {
  0%{ opacity: 0;}
  100%{ opacity: 1;}
}
@keyframes trans_fadeout {
  0%{ opacity: 1;}
  100%{ opacity: 0;}
}

@keyframes rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

@keyframes prog_p01{
  0%{ left: calc(0% - 27px); }
  100%{ left: calc(0% - 27px); }
}
@keyframes prog_w_p01{
  0%{ width: 0%; }
  100%{ width: 0%; }
}
@keyframes prog_p02{
  0%{ left: calc(0% - 27px); }
  100%{ left: calc(7% - 27px); }
}
@keyframes prog_w_p02{
  0%{ width: 0%; }
  100%{ width: 7%; }
}
@keyframes prog_p03{
  0%{ left: calc(7% - 27px); }
  100%{ left: calc(14% - 27px); }
}
@keyframes prog_w_p03{
  0%{ width: 7%; }
  100%{ width: 14%; }
}
@keyframes prog_p04{
  0%{ left: calc(14% - 27px); }
  100%{ left: calc(21% - 27px); }
}
@keyframes prog_w_p04{
  0%{ width: 14%; }
  100%{ width: 21%; }
}
@keyframes prog_p05{
  0%{ left: calc(21% - 27px); }
  100%{ left: calc(29% - 27px); }
}
@keyframes prog_w_p05{
  0%{ width: 21%; }
  100%{ width: 29%; }
}
@keyframes prog_p06{
  0%{ left: calc(29% - 27px); }
  100%{ left: calc(36% - 27px); }
}
@keyframes prog_w_p06{
  0%{ width: 29%; }
  100%{ width: 36%; }
}
@keyframes prog_p07{
  0%{ left: calc(36% - 27px); }
  100%{ left: calc(43% - 27px); }
}
@keyframes prog_w_p07{
  0%{ width: 36%; }
  100%{ width: 43%; }
}
@keyframes prog_p08{
  0%{ left: calc(43% - 27px); }
  100%{ left: calc(50% - 27px); }
}
@keyframes prog_w_p08{
  0%{ width: 43%; }
  100%{ width: 50%; }
}
@keyframes prog_p09{
  0%{ left: calc(50% - 27px); }
  100%{ left: calc(57% - 27px); }
}
@keyframes prog_w_p09{
  0%{ width: 50%; }
  100%{ width: 57%; }
}
@keyframes prog_p10{
  0%{ left: calc(57% - 27px); }
  100%{ left: calc(64% - 27px); }
}
@keyframes prog_w_p10{
  0%{ width: 57%; }
  100%{ width: 64%; }
}
@keyframes prog_p11{
  0%{ left: calc(64% - 27px); }
  100%{ left: calc(71% - 27px); }
}
@keyframes prog_w_p11{
  0%{ width: 64%; }
  100%{ width: 71%; }
}
@keyframes prog_p12{
  0%{ left: calc(71% - 27px); }
  100%{ left: calc(79% - 27px); }
}
@keyframes prog_w_p12{
  0%{ width: 71%; }
  100%{ width: 79%; }
}
@keyframes prog_p13{
  0%{ left: calc(79% - 27px); }
  100%{ left: calc(86% - 27px); }
}
@keyframes prog_w_p13{
  0%{ width: 79%; }
  100%{ width: 86%; }
}
@keyframes prog_p14{
  0%{ left: calc(86% - 27px); }
  100%{ left: calc(93% - 27px); }
}
@keyframes prog_w_p14{
  0%{ width: 86%; }
  100%{ width: 93%; }
}

.trans_fadein{ animation: .5s ease-in-out 0s 1 forwards trans_fadein; }
.trans_fadeout{ animation: .5s ease-in-out 0s 1 forwards trans_fadeout; }
/*** /ANI ***/

/*** MARGIN PADDING ***/
.mt-0{ margin-top: 0; }
.mt-10{ margin-top: 10px; }
.mt-20{ margin-top: 20px; }
.mt-30{ margin-top: 30px; }
.mt-40{ margin-top: 40px; }
.mt-50{ margin-top: 50px; }

.mb-0{ margin-bottom: 0; }
.mb-10{ margin-bottom: 10px; }
.mb-20{ margin-bottom: 20px; }
.mb-30{ margin-bottom: 30px; }

.pl-0{ padding-left: 0; }
.pr-0{ padding-right: 0; }
/*** /MARGIN PADDING ***/

/*** POPOVER ***/
[data-bs-toggle="popover"]{ cursor: pointer; }
.popover{ padding:5px; border: 5px solid #ccc; border-radius: 10px; }
.popover-arrow{ display: none !important; }
/*** /POPOVER ***/

/*** MODAL ***/
.modal-open { padding-right: 0 !important;} 
.modal-backdrop { opacity: .75 !important; }
.modal-body{ padding: 30px 30px 30px 30px;}
.modal-body h2{ margin-bottom: 30px; font-weight: 700; }
.modal-body h4{ margin-bottom: 10px; color: #5ac3d7; font-weight: 700; }
.modal-body h5{ margin-bottom: 10px; font-weight: 700; }
.modal-body span{ color: #333; }
.modal-body button{ width: 100%; margin: 30px 0 0 0; padding: 19px; max-width: 450px; }
.modal-cnt{ max-height: 500px; padding: 0 20px; overflow-y: auto; }
.modal-cnt, .modal-cnt p{ line-height: 1.875em;}
.modal-cnt ul{ margin: 0 0 0 21px; }
.modal-cnt ul li{ padding: 0 0 0 11px; list-style: dice; }

.modal_close{ width: 30px !important; height: 30px !important; background: #fff url('../../img/ico-close.webp') center center no-repeat; background-size: 10px auto; border: 2px solid #5ac3d7; border-radius: 50%; position: absolute; top: -50px; right: -5px; }
/*** /MODAL ***/


@media screen and (-webkit-min-device-pixel-ratio:0) { /* Chrome */
}

@media all and (-ms-high-contrast:none){ /* IE 11 */
     *::-ms-backdrop, .label_name{ }
}

@supports (display:-ms-grid) { /* Edge */
}