@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Kosugi+Maru&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=WDXL+Lubrifont+TC&family=Zen+Maru+Gothic&display=swap');

html {overflow-x:hidden;overflow-y:scroll;}
body {
	margin:0px;
	background-color:#fefef1;
}
a {blr:expression(this.onFocus=this.blur()); outline:none;}
img {border:0px;}

body, td, p {font-family:"Fredoka", "Kosugi Maru", sans-serif, "微軟正黑體", "Microsoft JhengHei", "微软雅黑体", "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size:1rem; color:#333; line-height:160%;}
select,textarea,input {font-family:"Fredoka", "Kosugi Maru", sans-serif, "微軟正黑體", "Microsoft JhengHei", "微软雅黑体", "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size:1rem; color:#000; line-height:160%;}
a {color:#33f; text-decoration:underline;}
a:hover,a:active {color:#33f; text-decoration:none;}
/*ul,li {margin: 0;padding: 0;list-style: none;}*/

#bg_mask_black {
	position:absolute;bottom:0;
	width:100%;
	background-color:#000000;
}

/*head*/
#head_list {
	position:relative;
	margin:0 auto;
	width:100%;
}
#head_list .head {
	position:relative;
	margin:0 auto;
	width:100%;max-width:960px;
	text-align:center;
}
#head_list .logo {
	margin:0 auto;
	padding:3%;
	width:35%;
}
#head_list .logo img {
	max-width:100%;
}
#lang_list{
	position:absolute;top:25%;left:44%;
	width:45%;
}
#lang_list img {
	width:33.3333%;
}
#head_margin {
	position:relative;
}
/*float_menu*/
#float_top {
	position:fixed;bottom:0;right:0;
	text-align:center;color:#fff;
	cursor:pointer;
	z-index:99999;
	background-color:#ff0054;
	border:1px solid #fff;
	
	filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;
	display:none;
}
#float_top img {
	display:block;
}
#float_switch {
	position:fixed;top:0;right:0;
	cursor:pointer;
	z-index:99999;

    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
#float_switch img {
	width:100%;
}
#float_menu {
	position:fixed; top: 0; right:-100%;
	height:100%;
	font-size:0.938em;color:#000;text-align:center;line-height:250%;
	background-color:rgba(0,0,0,.85);
	z-index:99998;

    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
#float_menu .fmenu{
	color:#fff;
	cursor:pointer;
}
#float_menu .fmenu.privacy{
	color:#ccc;font-weight:300;
}
#float_menu .fmenu.cur{
	color:#fff;
	background-color:#ff0054;
}
#float_menu .fmenu.privacy:hover{
	color:#fff;
}
#float_bg {
	position:fixed;
	width:100%;height:100%;
	background-color:rgba(0,0,0,.75);
	z-index:99997;
	filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;
	display:none;
}
/*main*/
#main_list {
	/* padding:5%; */
}
/*privacy*/
#main_list.privacy {
	padding:5%;
	max-width:720px;
}
#main_list .logo {
	margin:0 auto;
	width:50%;
}
#main_list .logo img {
	margin:0 auto;
	max-width:100%;
	display:block;
}

/*main_head*/
#main_head {
    position: fixed;
	top: 0; left: 0;
	width: 100%;
	background-color:#eee;
	z-index: 1;

	-moz-box-shadow:   0px 0px 10px #00000099;
	-webkit-box-shadow:0px 0px 10px #00000099;
	box-shadow:        0px 0px 10px #00000099;
}
#logo_list {
	margin: 0 auto;
}
#logo_list img {
    max-width: 100%;
}
#banner_list {
	width: 100%;
}
#banner_list img {
	width: 100%;
}
#content_list {
	padding: 5%;
	overflow: hidden;
}
#icon_list {
	width: 100%;
	float: left;
}
#icon_list .icon {
	width: 140px;
	
	-moz-border-radius:		10px;
	-webkit-border-radius:	10px;
	border-radius:			10px;

	overflow: hidden;
}
#icon_list .icon img {
	max-width: 100%;
	display: block;
}
#intro_list {
	padding: 5% 0 0 0;
	width: 100%;
	float: left;
}
#intro_list .title {
	font-weight:bolder;
}
#intro_list .link {
	padding: 5% 0 0 0;
}
#intro_list .link img {
	margin:0 1% 0 1%;
	width:48%;
}
#mail_list {
	padding: 5%;
	overflow: hidden;
}
#mail_list .title {
	font-weight:bolder;
}
#mail_list .intro {
	clear:both;
}
#mail_list .intro .row {
	padding-bottom: 2%;
}
#mail_list .intro .row.record {
	clear:both;
	margin-bottom: 3%;
	border-bottom: 1px solid #ccc;
	padding-top: 3%;
	overflow: hidden;
}
#mail_list .intro .row .row_class {
	padding-left: 1%;
	width: calc(69% - 4px);
	float: left;
	cursor: pointer;
}
#mail_list .intro .row .row_class .w100 {
	width: calc(99% - 4px);
}
#mail_list .intro .row .row_class.s {
	border-left: 4px solid #999;
}
#mail_list .intro .row .row_class.s2 {
	border-left: 4px solid #ff0000;
}
#mail_list .intro .row .row_class.s4 {
	border-left: 4px solid #ff9900;
}
#mail_list .intro .row .row_class.s8 {
	border-left: 4px solid #009900;
}
#mail_list .intro .row .row_class.line1 {
	white-space: nowrap;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#mail_list .intro .row .row_date {
	width: 30%;
	float: left;
	text-align: right;
}
#mail_list .intro .row .row_msg {
	clear: both;
	padding: 1% 0;
	display: none;
}
#mail_list .intro .row .row_msg .reply {
	background-color: #ccc;
	padding: 1% 2%;
	width: 96%;
}
#mail_list input[type="text"], #mail_list textarea {
	width: 100%;
	border: 1px solid #767676;
	border-radius: 2px;
	padding: 2px 3px;
}
#mail_list input[type="checkbox"] {
	vertical-align: 0%;
}
#mail_list .note {
	color: #ff0054; font-weight: bolder;
}
.tab {
	padding: 0 4%;
	border-bottom: 3px solid #eee;
	float: left;
	cursor: pointer;
}
.tab.current {
	color: #f33;
	border-bottom: 3px solid #f33;
}





/* main */
#main {
	/* padding:5%; */
}
/* doc */
#doc {
	margin: 0 auto;
	background-color: rgb(254, 254, 241);
}
/* doc - lang */
#doc .lang {
	position:absolute; top: 0; right: 0;
	padding: 0 2%;
	font-size: clamp(1rem, 3.5vw 2rem); line-height: 200%;
	z-index: 3;
}
/* doc - head */
#doc .head {
	position: relative;
	height: 100vh;
	max-height: 135vw;
	background: url('../images/bg.jpg') no-repeat center center;
	background-size: cover;
}
#doc .head.privacy {
	position: relative;
	height: auto;
	max-height: 99999vw;
	background: url('../images/bg.jpg') no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
}
#doc .fadeOut_t {
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 20%;
	background: linear-gradient(to bottom, rgba(254, 254, 241, 1) 0%, rgba(254, 254, 241, 0) 100%);
	pointer-events: none;
}
#doc .head.privacy .fadeOut_t {
	height: 20vw;
	position: fixed; top: 0; left: 0;
}
#doc .fadeOut_b {
	position: absolute; bottom: 0; left: 0;
	width: 100%;
	height: 20%;
	background: linear-gradient(to bottom, rgba(254, 254, 241, 0) 0%, rgba(254, 254, 241, 1) 100%);
	pointer-events: none;
}
#doc .head .characters {
	position: absolute; top: 1%; left: 50%;
	transform: translateX(-50%);
	width: 100%; max-width: 1500px;
	max-height: 98vh;
	pointer-events: none;
	z-index: 1;
}
#doc .head .characters img {
	width: 100%;
	height: auto;
	max-height: 98vh;
	object-fit: contain;
}
#doc .head .logo, #doc .head .characters_mobile {
	display: none;
}
#doc .head .logo.privacy {
	position: absolute; top: clamp(1px, 3vw, 9px); left: 50%;
	transform: translateX(-50%);
	width: 340px;
	display: block;
	cursor: pointer;
	z-index: 1;
}
#doc .head .main{
	width: 100%;
	display: block;
}
#doc .head img {
	max-width: 100%;
}
#doc .head .download {
	position: absolute; top: 1%; left: 50%;
	transform: translateX(-50%);
    padding: 40vh 10vh 0 60vh;
    width: calc(100% - 70vh); max-width: calc(1500px - 70vh);
    text-align: center;
	z-index: 2;
}
#doc .head .download img {
	width: 35%;
}
#doc .head .content {
	position: relative;
	margin: 0 auto;
	padding: 245px 0 122px 0;
	width: 96%;
	max-width: 960px;
}
#doc .head .content .box {
	border: 10px solid #1f47b6;
	padding: 4%;
	width: calc(92% - 20px);
	border-radius: 50px;
	background-color: #fff;
}
@media (max-width: 960px) {
	#doc .head .characters {
		display: none;
	}
	#doc .head .logo {
		position: absolute; top: 3vw; left: 50%;
		transform: translateX(-50%);
		width: 60vw;
		display: block;
		/* pointer-events: none; */
	}
	#doc .head .logo.privacy {
		width: 40vw;
	}
	#doc .head .characters_mobile {
		position: absolute; top: 35vw; left: 0;
		width: 100%;
		display: block;
		pointer-events: none;
	}
	#doc .head .download {
		position: absolute; top: 50vw;
		padding: 0;
		width: 100%;
	}
	#doc .head .content {
		position: relative;
		margin: 0 auto;
		padding: 30vw 0 15vw 0;
	}
	#doc .head .content .box {
		border: 1.8vw solid #1f47b6;
        padding: 4%;
        width: calc(92% - 3.6vw);
        border-radius: 7vw;
	}
}
/* @media (min-width: 960px) {
	#doc .head .download img {
		margin-left: 2%;
		width: 20%;
	}
} */
/* doc - pv */
#doc .pv {
	position: relative;
	text-align: center;
	font-size: clamp(1rem, 4.2vw, 2rem); line-height: 160%;
	height: 100vh;
	max-height: 125vw;
	background: url('../images/bg.jpg') no-repeat center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}
#doc .pv iframe {
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16 / 9;
}
#doc .pv .text {
	margin: 0 auto;
	padding: 0 3%;
	max-width: calc(960px - 6%);
}
/* doc - preview_list */
#preview_box {
	position: relative;
	height: 100vh;
	max-height: 125vw;
	background: url('../images/bg.jpg') no-repeat center center;
	background-size: cover;
}
#preview_list {
	position: relative;
	margin: 0 auto;
	width: 88vw;
	overflow: hidden;
    scroll-behavior: smooth; /* 滑動平滑 */
}
@media (min-width: 960px) {
	#preview_list {
		overflow-x: hidden;
	}
}
#preview_arrow {
	position: absolute; top: 0;
	width: 100%;
	pointer-events: none;
}
#preview_arrow .left {
	position: absolute; top:0; left:-4%;
	width: 15%; max-width: 20rem;
	height: calc(22vw * 1920 / 1080);
	display: flex;
	align-items: center;    /* 垂直置中 */
}
#preview_arrow .right {
	position: absolute; top:0; right:-4%;
	width: 15%; max-width: 20rem;
	height: calc(22vw * 1920 / 1080);
	display: flex;
	align-items: center;    /* 垂直置中 */
}
#preview_arrow img {
	width: 100%;
	pointer-events: auto;
	cursor: pointer;
	outline: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}
#preview_dots {
	position: relative;
	width: 100%;
	pointer-events: auto;
	outline: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	text-align: center;
	z-index: 1;
}
#preview_dots .dot{
	cursor: pointer;
	padding: 1% 0.5%;
	color: #0009;
	display: inline-block;
}
#preview_dots .dot.cur{
	color: #ff6600;
}
#preview {
    display: flex;
 	width: max-content;
}
#preview .preview {
	margin: 20px 0 20px 0;
	width: 22vw;
	float: left;
}
@media (max-width: 960px) {
	#preview .preview {
		width: 44vw;
	}
	#preview_arrow .left {
		height: calc(44vw * 1920 / 1080);
	}
	#preview_arrow .right {
		height: calc(44vw * 1920 / 1080);
	}
}
#preview .preview img {
	margin: 0 auto;
	width: 92%;
	display: block;
	
	-moz-border-radius:		2vw;
	-webkit-border-radius:	2vw;
	border-radius:			2vw;
	overflow: hidden;
	
	-moz-box-shadow:   4px 6px 10px #00000099;
	-webkit-box-shadow:4px 6px 10px #00000099;
	box-shadow:        4px 6px 10px #00000099;
}
#foot_list {
  border-top: 2px solid #0a1326;
  padding: clamp(0.813rem, 3.4vw, 1rem);
  background: linear-gradient(to bottom, #1f47b6 0%, #0a1326 100%);
  font-size: clamp(0.813rem, 3.4vw, 1rem);
  color: #fff;
  text-align: center;
  line-height: 160%;
}
#foot_list a {
  color: #ff3;
}
#foot_list .foot_logo {
  padding: clamp(0.813rem, 3.4vw, 1rem) 0 clamp(0.406rem, 1.7vw, 0.5rem);
}
#foot_list .foot_logo img {
  margin: 0 6px;
}

#survey_result {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center; /* 水平置中 */
  align-items: center;     /* 垂直置中 */

  font-size: 4.5vw; color: #3b4453; font-weight: 700; line-height: 160%;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
}
#survey_result .result_box {
  padding: 0.2vw;
  width: 96%;
  background-color: #f8e9c8;
  border-radius: 2vw;
  box-shadow: 0px 0px 1vw #3b4453;
}
#survey_result .result_text {
  position: relative;
  border: 1vw solid #fff;
  padding: 5vw 5vw 5vw 27vw;
  width: calc(100% - 34vw);
  background-color: #f8e9c8;
  border-radius: 2vw;
}
#survey_result .result_box .result_head {
  position: absolute; bottom: 0; left: 0;
}
#survey_result .result_box .result_head img {
  width: 25vw;
  display: block;
}

#main .h1_sub {
	font-weight:300;
	font-size: 1.2em; line-height: 160%;
}
#main .h1,#main_list .h2 {
	clear: both;
	font-weight:bolder;
	font-size: 1.5em; line-height: 160%;
}
#main .section {
	clear: both;
	padding:2% 0 2% 0;
	font-size: 1em; line-height: 160%;
}
#main .section  li {
	padding:1% 0 1% 0;
}
#main .section  ol.upper li {
	list-style: none;
	text-indent:-2em;padding-left:0.24em;
}
#main .section  ul.disc li {
	list-style-type: disc;
	text-indent:0em;padding-left:0em;
}
#main .section  ol.decimal li {
	list-style-type: decimal;
}
#main .section  ol.brackets {
    /*counter-reset: list;
	position:relative;*/
}
#main .section  ol.brackets li {
	list-style: none;
	text-indent:-3em;padding-left:1.22em;
}
#main .section  ol.brackets li:before {
    /*counter-increment: list;
    content: "(" counter(list, decimal) ") ";
	position:absolute;
	left:-1.48em;width: 1.48em; */
}
#main .section  ol.bracket {
    counter-reset: list;
}
#main .section  ol.bracket li {
	list-style: none;
	position:relative;
}
#main .section  ol.bracket li:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
	position:absolute;
	left:-1.48em;width: 1.48em; 
}
#main .section  ol.bracket-decimal {
    counter-reset: list;
}
#main .section  ol.bracket-decimal li {
	list-style: none;
	position:relative;
}
#main .section  ol.bracket-decimal li:before {
    counter-increment: list;
    content: counter(list, decimal) ") ";
	position:absolute;
	left:-1.48em;width: 1.48em; 
}
#main .section  ol.bracket ol.bracket-decimal {
    counter-reset: list;
}
#main .section  ol.bracket ol.bracket-decimal li {
	list-style: none;
	position:relative;
}
#main .section  ol.bracket ol.bracket-decimal li:before {
    counter-increment: list;
    content: counter(list, decimal) ") ";
	position:absolute;
	left:-1.48em;width: 1.48em; 
}
#main .section  ol.bracket ol.decimal {
    counter-reset: list;
}
#main .section  ol.bracket ol.decimal li {
	list-style-type: decimal;
	position:relative;
	text-indent:0em;padding-left:0em;
}
#main .section  ol.bracket ol.decimal li:before {
    counter-increment: list;
    content: "";
	position:absolute;
	left:-1.48em;width: 1.48em; 
}
#main .section  ol.brackets ol.decimal {
    counter-reset: list;
}
#main .section  ol.brackets ol.decimal li {
	list-style-type: decimal;
	position:relative;
	text-indent:0em;padding-left:0em;
}
#main .section  ol.brackets ol.decimal li:before {
    counter-increment: list;
    content: "";
	position:absolute;
	left:-1.48em;width: 1.48em; 
}
.tab {
	padding: 0 4%;
	border-bottom: 3px solid #eee;
	float: left;
	cursor: pointer;
}
.tab.current {
	color: #f33;
	border-bottom: 3px solid #f33;
}
#main .h1_sub.record {
	text-align: center;
}
#main .h1_sub.record .tabr {
	padding: 0 3%;
	border-bottom: 3px solid #eee;
	cursor: pointer;
	display: inline;
}
#main .h1_sub.record .tabr.current {
	color: #f33;
	border-bottom: 3px solid #f33;
}