/* ==========================================================================
   Public
============================================================================= */
@import url("https://use.fontawesome.com/releases/v6.6.0/css/all.css");
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css'); /* 思源黑體 */

body, html { width:100%; height:100%; }

html { scroll-behavior:smooth; }

body { 
	font:1vw/1.6 Arial, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	word-spacing:0.16em;
	color:#222;
	background-color:#eee;
	width:100%;
	word-wrap:break-word;
}
@media screen and (max-width:1000px) {
	body { font-size:1em; }
}

*[lang|=zh], *[lang|=zh] * { letter-spacing:0.14em; }
*[lang|=zh], *[lang]:not([lang|=zh]) { letter-spacing:0.12em; }


img {
	border:none;
	vertical-align:middle;
	
	width:100%;
	height:100%;
	object-fit:cover;
	
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
    -moz-backface-visibility:hidden; 	/* Firefox */
    -ms-backface-visibility:hidden; 	/* Internet Explorer */	
	image-rendering:-moz-crisp-edges;          /* Firefox        */
    image-rendering:-o-crisp-edges;            /* Opera          */
    image-rendering:-webkit-optimize-contrast; /* Safari         */    
    -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
}


*, *:after, *:before {
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}


a {
	text-decoration:none;
	-webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
a:hover { color:#bb5201; }
a:focus {
	box-shadow:0 0 0 2px #c6494f;
    outline:2px solid #c6494f;
}
:focus:not(.focus-visible){ outline:none; } /* 瀏覽器初始focus樣式關閉 */



.clearfix {
    clear: both;
    display: table;
}


input, select, textarea {
	color:#222;
	border-radius:3px;
	background:#efefef;
	border:#949494 1px solid;
}

textarea { padding:10px; border:none; background:#FFF; }


input:focus, textarea:focus {
    border-color:dodgerBlue;
    box-shadow:0 0 8px 0 dodgerBlue;
	color:#FFF;
	background:#333;
}

select:focus {
    border-color:dodgerBlue;
    box-shadow:0 0 8px 0 dodgerBlue;
	color:#FFF;
	background:#333;
}


::-webkit-input-placeholder { color:#555; font-size:90%; }
:-moz-placeholder { color:#555; font-size:90%; }

:focus::-webkit-input-placeholder { color:#FFF; }
:focus:-moz-placeholder { color:#FFF; }​



input[type="checkbox"], input[type="radio"] { width:2vw; height:2vw; vertical-align:middle; margin-right:5px; }


.icon_guide {
	position:absolute;
	top:0; left:2px;
	font-size:0.75em!important;
	font-weight:normal!important;
	font-family:Arial!important;
}
.icon_guide a { color:#222!important; text-decoration:none; }

@media screen and (max-width:1000px) {
	input[type="checkbox"], input[type="radio"] { width:30px; height:30px; }
	.icon_guide { display:none; }
}


.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    border:0
}
.sr-only-focusable:active,.sr-only-focusable:focus{
    position:static;
    width:auto;
    height:auto;
    margin:0;
    overflow:visible;
    clip:auto
}


.font-block { font-family:"Noto Sans TC", "Meiryo UI", sans-serif; }



/* mobile nav
-----------------------------------------------------------------------------*/
#mobile-nav input {
	width:100%;
	font-size:120%;
	/*padding:10px;*/
	border-radius:3px;
	margin-bottom:10px;
}
#mobile-nav input:focus {
    border-color:dodgerBlue;
    box-shadow:0 0 8px 0 dodgerBlue;
	color:#000;
	background:#93fff7;
}

.sp_logo { position:fixed; left:1rem; top:10px; z-index:100; }
.sp_logo img { width:236px; height:35px; }
.sp_nav_btn { width:100%!important; text-align:center; font-size:120%!important; padding:10px 0!important; border:#999 1px solid; }




/* header
-----------------------------------------------------------------------------*/
header {
	position:relative;
	width:100%;
	height:16vw;
	background:url("../img/banner.jpg") center top no-repeat;
	background-size:100%;
}

header h1 { width:34vw; margin-left:7vw; padding-top:3.5vw; }

header .pc_menu {
	position:absolute;
	bottom:0;
	width:100%;
	background:#3a3a3a;
	text-align:center;
	padding:0.5vw;
}
header .pc_menu a {
	color:#FFF;
	font-size:120%;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	padding:0 1.5vw;
}
header .pc_menu a:is(:hover, :focus) { color:#ff9500; }

header .search {
	position:absolute;
	right:2vw;
	top:2vw;
}
header .search input {
	width:15vw;
	background:#FFF;
	border:none;
	border-radius:5px 0 0 5px;
	padding:0 0.5vw;
	line-height:2vw;
}
header .search input:is(:hover, :focus) { background:#333; color:#FFF; }
header .search button {
	background:var(--og);
	color:#FFF;
	border:none;
	border-radius:0 5px 5px 0;
	line-height:2vw;
	padding:0 0.5vw;
}
header .search button:is(:hover, :focus) { background:#b80000; }

header .link { text-align:right; color:#aaa; font-size:75%; margin-bottom:0.3vw; }
header .link a { color:#FFF; }
header .link a:is(:hover, :focus) { text-decoration:underline; }


@media screen and (max-width:1000px) {
	header {
		margin-top:50px;
		height:28vw;
		background:url("../img/banner-sp.jpg") bottom right no-repeat;
		background-size:cover;
	}
	header .pc_menu, header h1, header .search { display:none; }
}





/* content
------------------------------------------------------------------------------ */
main {
	position:relative;
	width:100%;
	background:#f0ebdc url("../img/bg.png") right bottom no-repeat fixed;
	background-size:100%;
}

#content {
	margin:0 auto;
	width:95%; 
	min-height:60vh;
	padding:2vw 0 3vw;
}

#content2 {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
	/*min-height:60vh;*/
	margin-top:2vw;
}
#content2 aside, #content2 .r_content {
	position:relative;
	align-items:stretch;
	align-content:stretch;
}

#content2 aside { width:15vw; border-right:var(--br) 1px solid; }
#content2 aside h2 {
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	font-size:160%;
	text-align:center;
	color:var(--br);
}

#content2 aside .back_btn { width:100%; }
#content2 aside .back_btn a {
	display:block;
	margin:1vw auto;
	width:80%;
	color:#FFF;
	background:var(--br);
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	border-radius:99em;
	padding:0.5vw 0;
	text-align:center;
}
#content2 aside .back_btn a i { padding-right:5px; opacity:0.6; }
#content2 aside .back_btn a:is(:hover, :focus) { background:var(--hover); }

#content2 aside .sub_menu ul { width:100%; border-top:var(--br) 2px dotted; margin:1vw 0 2vw; }
#content2 aside .sub_menu li a {
	display:block;
	border-bottom:var(--br) 2px dotted;
	padding:1vw 0.5vw;
	color:#222;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
}
#content2 aside .sub_menu li a i { color:#cc5800; padding-right:3px; }
#content2 aside .sub_menu li a:is(:hover, :focus) { background:var(--br); color:#FFF; }


#content2 .r_content { width:calc(100% - 15vw); padding-left:1%; }
#content2 .r_content h3 {
	width:100%;
	color:var(--blue);
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	font-size:140%;
	text-align:center;
	border-bottom:#ccc 1px dashed;
	padding-bottom:1vw;
	margin-bottom:2vw;
}
#content2 .r_content h3 span { font-size:60%; display:block; }

#content2 .r_content h4 {
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	font-size:120%;
	color:var(--br);
	margin-bottom:0.6vw;
}


@media screen and (max-width:1000px) {
	main { background:#f0ebdc url("../img/bg.png") right bottom no-repeat fixed; background-size:100%; }
	#content { width:88%; padding:20px 0 50px; }
	#content2 aside, #content2 .r_content { width:100%; border:none; padding:0; }
	#content2 aside h2 { padding-bottom:10px; }
	#content2 aside .back_btn { display:none; }
	#content2 aside .sub_menu { display:none; }
	#content2 .r_content h3 { padding-bottom:15px; margin-bottom:30px; font-size:120%; }
	#content2 .r_content h4 { margin-bottom:10px; }
}



.content p { margin-bottom:2vw; }
.content img { max-width:100%; }
@media screen and (max-width:1000px) {
	.content p { margin-bottom:36px; }
}


.breadcrumb { width:100%; font-size:0.75em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--br); }
.breadcrumb i { color:var(--og); padding-right:5px;}
.breadcrumb a { color:#222; text-decoration:underline; }
.breadcrumb a:hover, .breadcrumb a:focus { color:#c25700; }

@media screen and (max-width:1000px) {
	.breadcrumb { display:none; }
}


.share_link { width:100%; text-align:right; }
.share_link li { display:inline-block; font-size:250%; }
.share_link li:nth-child(1) a { color:#3b5998; }
.share_link li:nth-child(2) a { color:#222; }
.share_link li:nth-child(3) a { position:relative; color:#40822a; font-size:90%; bottom:2px; }
.share_link li a:hover, .share_link li a:focus { color:#d02404; box-shadow:none; outline:none; }

@media screen and (max-width:1000px) {
	.share_link li { font-size:260%; }
}


.list_search { width:100%; margin-bottom:1vw; }
.list_search input, .list_search select {
	background:#FFF;
	border:#ccc 1px solid;
	border-radius:3px;
	padding:0.5vw;
}
.list_search input:focus, .list_search select:focus { background:#333; color:#FFF; }
.list_search a {
	color:#FFF;
	padding:0.5vw;
	background:var(--br);
	border-radius:3px;
}
.list_search a:is(:hover, :focus) { background:var(--hover); }
.list_search a i { padding-right:3px; }

@media screen and (max-width:1000px) {
	.list_search { text-align:center; margin-bottom:20px; }
	.list_search input, .list_search select { padding:10px; }
	.list_search a { padding:10px; }
}

@media screen and (max-width:640px) {
	.list_search input, .list_search select { width:100%; margin-bottom:5px; text-align:center; }
	.list_search a { display:block; width:100%; padding:10px; text-align:center; }
}





/* home
------------------------------------------------------------------------------ */
.home_content {
	display:grid;
	grid-template-columns: 16% 84%;
	grid-template-rows:auto;
	margin-bottom:4vw;
	margin-top:1vw;
}

.home_title {
	position:relative;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	color:var(--br);
	font-size:160%;
}
.home_title a {
	position:relative;
	display:block;
	width:6.9vw;
	font-size:50%;
	text-align:center;
	background:var(--br);
	color:#FFF;
	border-radius:99em;
	font-weight:normal;
	padding:0.2vw 0 0.3vw;
	margin-top:0.6vw;
}
.home_title a:is(:hover, :focus) { background:var(--hover); }
.home_title a i { position:absolute; right:0.3vw; top:0.5vw; opacity:0.6; }

@media screen and (max-width:1000px) {
	.home_content { display:block; width:100%; margin-bottom:50px; }
	.home_title { margin-bottom:10px;}
	.home_title a { position:absolute; top:8px; right:0; width:65px; margin-top:0; padding:5px 0 5px 13px; text-align:left; }
	.home_title a i { top:10px; right:3px; }
	.home_title a span { display:none; }
}


.home_news ul { width:100%; }
.home_news li a {
	display:block;
	padding:0.6vw;
	color:#222;
	border-bottom:#ccb6b6 1px dotted;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
.home_news li a:is(:hover, :focus) { color:var(--hover); }
.home_news li span { padding-right:1.5vw; font-size:90%; }

@media screen and (max-width:1000px) {
	.home_news li a { padding:10px 0; overflow:visible; white-space:normal; text-overflow:clip; }
	.home_news li span { display:block; padding:0; }
}

.home_course li { display:inline-block; }
.home_course li a {
	display:block;
	background:#FFF;
	border-radius:99em;
	padding:0.8vw 1.2vw;
	color:#222;
	margin-right:0.5vw;
	margin-bottom:1.2vw;
	-webkit-box-shadow: 1px 2px 3px 1px rgba(0,0,0,0.1);
	-moz-box-shadow: 1px 2px 3px 1px rgba(0,0,0,0.1);
	box-shadow: 1px 2px 3px 1px rgba(0,0,0,0.1);
}
.home_course li i { color:var(--br); padding-right:3px; font-size:120%; vertical-align:middle; }
.home_course li a:is(:hover, :focus) { background:var(--br); color:#FFF; }
.home_course li a:is(:hover, :focus) i { color:#FFF; opacity:0.4; }

@media screen and (max-width:1000px) {
	.home_course li a { padding:10px 15px; margin-right:5px; margin-bottom:18px; }
}


.home_video {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
}
.home_video a {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	width:23.2%;
	padding:0.5vw;
	background:#FFF;
	border-radius:0.5vw;
	margin:0 0.6% 1.2%;
}
.home_video .photo { aspect-ratio: 5 / 3; }
.home_video a p {
	color:#222;
	padding:0.5vw 0;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	text-align:center;
	font-size:80%;
}
.home_video a:is(:hover, :focus) { background:var(--br); }
.home_video a:is(:hover, :focus) p { color:#FFF; }

@media screen and (max-width:1000px) {
	.home_video a { width:46%; margin:2%; padding:10px; border-radius:8px; }
	.home_video a p { font-size:95%; padding:10px 0; }
}
@media screen and (max-width:640px) {
	.home_video a { width:100%; margin:0 0 8%; }
}



/* course
------------------------------------------------------------------------------ */
.course_table a { display:inline-block; padding:0.5vw; background:var(--og); color:#FFF; border-radius:3px; }
.course_table a:is(:hover,:focus) { background:var(--hover); }


@media screen and (min-width:1001px) {
	.course_table td:nth-child(1), .course_table td:nth-last-child(1), .course_table td:nth-last-child(2) { text-align:center; }
	.course_table td:nth-child(1) { width:6vw; }
	.course_table td:nth-child(3) { width:12.3vw; }
	.course_table td:nth-child(4) { width:6vw; }
	.course_table td:nth-last-child(1) { width:5vw; }
	.course_table td:nth-last-child(2) { width:4vw; }
}
@media screen and (max-width:1000px) {
	.course_table br { display:none; }
	.course_table a { padding:10px 15px; }
}


.course_subject {
	width:100%;
	border-radius:0.5vw;
	background:#FFF;
	padding:0.8vw;
	margin-bottom:3vw;
}
.course_subject .photo {
	float:left;
	width:40%;
	aspect-ratio: 4 / 3;
}
.course_subject .photo img { border-radius:5px; }

.course_subject .info {
	float:left;
	width:60%;
	padding:0.3vw 2vw;
	text-align:center;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
}
.course_subject .info h3 {
	color:var(--br)!important;
	font-size:120%!important;
	font-weight:600;
	border:none!important;
	padding-bottom:1vw!important;
	margin-bottom:0!important;
}
.course_subject .info ul { display:inline-block; width:95%; }
.course_subject .info li { text-align:left; padding:0.2vw 0; font-size:90%; }
.course_subject .info li i { color:#ff773d; padding-right:3px; }

.course_subject .star { text-align:center; color:#ffc629; padding-bottom:0.6vw; font-size:200%; }

.course_subject .info a {
	display:inline-block;
	width:50%;
	padding:0.6vw;
	text-align:center;
	color:#FFF;
	border-radius:5px;
	background:var(--og);
}
.course_subject .info a:is(:hover, :focus) { background:var(--hover); }

.p_line {
	width:100%;
	border-bottom:#bbb 2px dotted;
	margin:1.5vw 0;
}


@media screen and (max-width:1000px) {
	.course_subject { padding:12px; border-radius:10px; }
	.course_subject .info h3 { font-size:110%!important; }
	.course_subject .info ul { width:100%; }
	.course_subject .info li { padding:3px 0; font-size:85%; }
	.course_subject .star { padding-bottom:10px; font-size:160%; }
	.course_subject .info a { width:90%; padding:10px; }
	.p_line { margin:25px 0; }
}
@media screen and (max-width:740px) {
	.course_subject { margin-bottom:30px; }
	.course_subject .photo, .course_subject .info { float:none; width:100%; padding:0; }
	.course_subject .info { padding:20px; }
	.course_subject .info h3 { font-size:120%!important; padding-bottom:20px!important; }
	.course_subject .info li { font-size:100%; }
	.course_subject .star { font-size:200%; }
	.course_subject .info a { width:100%; font-size:130%; }
}



/* member
------------------------------------------------------------------------------ */
.page_title {
	width:100%;
	font-size:200%;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	color:var(--br);
}
.page_title i { color:#ff6f0b; padding-right:5px; }

.login {
	margin:0 auto;
	width:100%;
	max-width:600px;
	padding-top:1vw;
}
.login input, .login select { width:100%; margin-bottom:0.8vw; padding:0.8vw; }
.login label i { color:#ff6f0b; padding-right:3px; }
.login img { width:auto; margin-left:10px; }

@media screen and (max-width:1000px) {
	.page_title { padding-bottom:10px; font-size:160%; }
	.login input, .login select { padding:15px; margin-bottom:15px; }
	
}

.course_table2 td:nth-child(2) a { color:#222; text-decoration:underline; }
.course_table2 td i { font-size:180%; }
.course_table2 td a i { color:var(--og); }
.course_table2 td a:is(:hover, :focus) { color:var(--hover); }
.course_table2 td a:is(:hover, :focus) i { color:var(--hover); }

.course_table2 td:nth-child(3) a span { font-size:80%; color:#222; }


@media screen and (min-width:1001px) {
	.course_table2 td:nth-child(1) { width:6vw; text-align:center; }
	.course_table2 td:nth-child(4) { width:5vw; text-align:center; line-height:100%; }
	.course_table2 td:nth-child(4) a span { display:block; }
	.course_table2 td:nth-child(5) { width:12.3vw; }
	.course_table2 td:nth-child(6) { width:4vw; text-align:center; }
	.course_table2 td:nth-child(7) { width:6vw; text-align:center; }
	.course_table2 td:nth-last-child(1), .course_table2 td:nth-last-child(2) { width:4vw; text-align:center; }
}


.course_table3 td i { font-size:180%; }
.course_table3 td a i { color:var(--og); }
.course_table3 td a:is(:hover, :focus) { color:var(--hover); }
.course_table3 td a:is(:hover, :focus) i { color:var(--hover); }
 

@media screen and (min-width:1001px) {
	.course_table3 td:nth-child(2) { width:10vw; text-align:left; line-height:100%; }
	.course_table3 td:nth-child(3) { width:7.5vw;text-align:center;  }
	/*.course_table3 td:nth-child(4) { width:7.5vw;text-align:center;  }*/

	.course_table3 td:nth-child(4) { width:6.5vw;text-align:center;  }
	.course_table3 td:nth-child(5) { width:8vw; text-align:left; }
	.course_table3 td:nth-child(6) { width:6vw; text-align:center; }
	.course_table3 td:nth-child(7) { width:8.5vw; text-align:center; }
	.course_table3 td:nth-child(8) { width:3.5vw; text-align:center; }

 }



.course_table41 td i { font-size:180%; }
.course_table41 td a i { color:var(--og); }
.course_table41 td a:is(:hover, :focus) { color:var(--hover); }
.course_table41 td a:is(:hover, :focus) i { color:var(--hover); }
 

@media screen and (min-width:1001px) {
	.course_table41 td:nth-child(2) { width:10vw; text-align:left; line-height:100%; }
	.course_table41 td:nth-child(3) { width:7.5vw; text-align:center; } 
  	.course_table41 td:nth-child(4) { width:8vw; text-align:left; }
	.course_table41 td:nth-child(5) { width:6vw; text-align:center; } 
  	.course_table41 td:nth-child(6) { width:11vw; text-align:center; } 
   

 }



.course_table4 a { display:inline-block; padding:0.5vw; background:var(--og); color:#FFF; border-radius:3px; }
.course_table4 a:is(:hover,:focus) { background:var(--hover); }


@media screen and (min-width:1001px) {
	.course_table4 td:nth-child(1) { width:5vw;text-align:center; }

	.course_table4 td:nth-child(3) { width:14vw; }
	.course_table4 td:nth-child(4) { width:14vw; }
	.course_table4 td:nth-child(5) {  width:6vw;text-align:center; }
}
@media screen and (max-width:1000px) {
	.course_table4 br { display:none; }
	.course_table4 a { padding:10px 15px; }
}




.star {
	width:100%;
	padding:0.6vw 1vw;
	background:#FFF;
	margin-bottom:1px;
}
.star span { display:inline-block; width:calc(100% - 12vw); }
.star p { padding-bottom:0.5vw; }
.star span i, .star p i { color:#ff6f0b; padding-right:3px; }

.star ul { width:100%; }
.star li { display:inline-block; }
.star li input[type="radio"] { width:1.5vw; height:1.5vw; }

.rating {
	display:inline-block;
	font-size:0;
	direction:rtl;
	width:11vw;
	vertical-align:middle;
}

.rating input { display:none; }

.rating label {
	display:inline-block;
	width:1.5vw;
	height:1.5vw;
	margin:0 0.2vw;
	padding:0;
	font-size:1.5vw;
	text-align:center;
	line-height:1.5vw;
	cursor:pointer;
	color:#888;
	transform:rotateY(180deg);
}
.rating label:hover,
.rating label:hover ~ label,
.rating input:checked ~ label {
	color:var(--og);
}

@media screen and (max-width:1000px) {
	.star { padding:10px 15px; }
	.star span { width:calc(100% - 22vw); }
	.star li { padding:5px; }
	.star li input[type="radio"] { width:25px; height:25px; }
	.rating { width:20vw; }
	.rating label { width:3vw; height:3vw; line-height:3vw; font-size:3vw; margin:0 2px; }
}

@media screen and (max-width:640px) {
	.star { padding:10px 15px; }
	.star li { display:block; padding:5px 0; }
	.star span, .rating { display:block; width:100%; padding:5px 0; }
	.rating label { width:6vw; height:6vw; line-height:6vw; font-size:6vw; margin:0 2px; }
}

.score {
	width:100%;
	text-align:center;
	padding-top:30px;
}
.score span {
	color:var(--green);
	font-weight:600;
	font-size:300%;
	font-size:500%;
	letter-spacing:0;
	line-height:100%;
}






/* table
------------------------------------------------------------------------------ */
table caption {
	font-size:130%;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
}


/* form
------------------------------------------------------------------------------ */
fieldset { border:none; padding:0; margin:0; }

legend { margin-bottom:1vw; }

@media screen and (max-width:1000px) {
	legend { margin-bottom:15px; }
}





/* sitemap
------------------------------------------------------------------------------ */
#sitemap { margin-top:1vw; }
#sitemap .box {
	float:left;
	width:calc(100% / 3);
	padding:1vw;
}

#sitemap .box a { display:block; width:100%; padding:1vw; text-align:center; text-decoration:none; }
#sitemap .box a:is(:hover, :focus) { color:#FFF; background:var(--br); }

#sitemap .box .c1 { background:var(--green); color:#FFF; }
#sitemap .box .c2 { background:#FFF; color:#050505; border-top:#ccc 1px dashed; }

@media screen and (max-width:760px) {
	#sitemap { margin-top:30px; }
	#sitemap .box { float:none;	width:100%;	padding:0 10px; margin-bottom:25px; }
	#sitemap .box a { padding:15px; }
}




/* login select
------------------------------------------------------------------------------ */
.login_select { text-align:center; padding-top:2vw; }
.login_select a {
	display:inline-block;
	width:30%;
	padding:4vw 1vw;
	border-radius:2vw;
	border:#FFF 0.3vw solid;
	text-align:center;
	color:#FFF;
	font-weight:600;
	font-family:"Noto Sans TC", sans-serif;
	margin:2vw;
	font-size:180%;
}
.login_select a:is(:hover, :focus) { background:var(--hover)!important; }


@media screen and (max-width:1000px) {
	.login_select a { width:100%; margin:10px 0; padding:30px 0; border-radius:10px; border:#FFF 3px solid; font-size:150%; }
}



/* footer
------------------------------------------------------------------------------ */
footer {
	position:relative;
	width:100%;
	background:#cdc1b8;
	padding:2vw 10vw;
	color:#452b18;
	font-size:70%;
}
footer a { color:#883305; text-decoration:underline; }

footer .addr, footer .security, footer .qrcode { float:left; }
footer .addr { width:46%; padding:1vw 0; }
footer .security { width:20%; padding:1vw 2vw; border-left:#FFF 1px solid; }
footer .qrcode { width:34%; text-align:right; }
footer .qrcode img { width:5vw; max-width:117px; }

footer li { display:inline-block; }
footer li:nth-last-child(1) { font-size:80%; }

@media screen and (max-width:1000px) {
	footer { padding:8% 5%; }
	footer .addr, footer .security, footer .qrcode { float:none; width:100%; text-align:center; border:none; }
	footer .qrcode { padding:20px 0; }
	footer .qrcode img { width:30%; max-width:117px; }
}




/* btn
------------------------------------------------------------------------------ */
.b_btn {
	width:100%;
	border-top:#bbb 1px dashed;
	padding-top:2vw;
	margin:3vw 0;
	text-align:center;
}
.b_btn a {
	display:inline-block;
	color:#FFF;
	font-family:"Noto Sans TC", sans-serif;
	font-size:120%;
	text-align:center;
	border-radius:0.5vw;
	padding:1vw;
}
.b_btn a:is(:hover, :focus) { background:var(--hover); }
.b_btn a i { opacity:0.6; padding-right:3px; }

.b_btn1 a { width:25%; }
.b_btn2 a { width:25%; margin:0 1%; }


.btn_br { background:var(--br); }
.btn_g { background:var(--green); }
.btn_b { background:var(--blue); }


@media screen and (max-width:1000px) {
	.b_btn { padding-top:30px; margin:30px 0; }
	.b_btn a { border-radius:8px; padding:15px 0; }
	.b_btn1 a { width:60%; }
	.b_btn2 a { width:46%; }
}



/* color
------------------------------------------------------------------------------ */
:root {
	--write:#FFF;
	--red:#992323;
	--green:#15610d;
	--blue:#406c9c;
	--br:#683a3a;
	--og:#e03400;
	--hover:#b80000;
}


/* youtube 比例自動縮放
-------------------------------------------------------------------------- */
.iframe-16x9 {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
	margin:0.8vw 0; 
}
.iframe-16x9 iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}