@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, viewbox_wrapcode,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,v
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}

a:link {text-decoration: none;} 

body { background-color:#d1fdff; padding:0; border:0; font-family: "微軟正黑體", "儷黑 Pro", Arial, sans-serif; }
.wrapper_full { margin:0 auto; text-align:center; width:100%; background-repeat:no-repeat; background-position:top; background-attachment: fixed;  background-size:cover; }
.container{ margin:0 auto; max-width:1080px; width:100%; box-shadow: 2px 1px 6px 0.2px #ABABAB; }
#header { padding:0px 0 0 0; line-height:0; }
.imgresponse img { width:100%; height:auto; max-width:500px; }
.clearfix { clear:both; }
a { cursor:pointer; }
.topweb { visibility:visible; line-height:0; }
.topweb img { width:100%; }
.content_main { background-color:#f3ede6; box-shadow: 2px 1px 6px 0.2px #ABABAB; padding-bottom: 60px; }
.padding { margin:10px auto; }
.logo { margin:10px auto; }
.logo img{ width:100%; max-width:200px; }
.logo_campaign { width:100%;margin:0 auto; }
.logo_campaign img { width:100%; max-width:450px; height:auto; }
.intro_title { font-size: 22px; color: #BB131D; padding:0 0 0 2%; text-align: left; }
.intro { background-color: #499b4b; min-height: 60px; }
.intro p { font-size: calc(1rem + 0.1vw); color: #FFFFFF; padding:2% 4%; text-align:left; line-height:26px; }
.title { padding-top:8px; }
.center { text-align:center; }
#more { display: none; }
#Btn { width: 100px; background-color: #7a6b8b; color: #FFFFFF; border: 0px; line-height: 28px; font-size: 14px; margin-top: 2%; border-radius: 4px; transition: 0.3s;}
.videolist_wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 3fr)); grid-auto-rows: 1fr; grid-column-gap: 2.5%; grid-row-gap: 30px; margin:0 auto; justify-items: center; background-color: #f3ede6; padding: 40px 3%; transition: all 0.5s ease;}
.videowrap { width: 96%; max-width: 970px; margin-left: auto; margin-right: auto; padding-top: 20px; }
.video_content { font-size: 14px; line-height: 1.6em; padding: 4% 4%; }
.viewbox_wrap{ display: flex; flex-direction: column; text-align:left; background-color:#fffbf4; padding: 10px 15px 20px 15px; border-radius:10px; box-shadow: 1px 2px 4px #aeaeae; width: clamp(220px, 94%, 100%); transition: all 0.5s ease; justify-content: space-between; }
.photo_list { margin-top: 8%; }
.photo_cat { color: #2c8194; font-size: 24px; font-weight: bold; text-align: left; border-bottom: 1px solid #2c8194; padding-bottom: 3px; padding-left: 0px; display:flex; justify-content: left; align-items: center; }
.photo_wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.viewbox_chapter { color:#5ead4e; font-size:18px; font-weight:bold; padding-top: 10px; text-align: left; display:flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 10px; column-gap: 10px; }
.viewbox_title { width: 60px; color:#fff; font-size:14px; font-weight:bold; background-color: #6eb953; padding: 2px 5px; border-radius: 4px; text-align: center; }
.guess { min-height: 40px; font-size: 14px; font-weight: bold; color:#545454; text-align: justify; padding-top: 5px; }
.guess2 { font-size: 14px; font-weight: bold; color:#545454; text-align: justify; margin: 10px 0; }
.clearfix { clear:both; }
.capimage { margin:0px 0px 10px auto; }
.capimage img { width:100%; height:auto; border:1px solid #e7e7e7; border-radius: 4px; }
.btn_play { float:right; width:35px; margin-top: 2px; }
.description { width: 100%; max-width: 720px; background-color:#fffbf4;padding: 0%;text-align:left;margin-left:auto;margin-right:auto;line-height:26px;box-shadow: 2px 2px 4px 0px #5f5f5f82; border-radius: 10px; }
.description2 { width: 96%; max-width: 720px; text-align:left; margin-left:auto; margin-right:auto; line-height:26px; }
.button { max-width: 240px; width: 90%; border-radius:4px; background-color:#2b7e93; margin-top:20px; padding:2% 2% 2% 2%; text-align:middle; color:#FFFFFF; margin-left:auto; margin-right:auto; line-height:20px; font-size: 20px; font-weight: 600; text-align: center; transition: 0.3s; }
.button:hover { background-color: #2e95af; }
.button2 { max-width: 240px; width: 90%; border-radius:4px; background-color:#1a67b5; margin-top:10px; padding:3% 2% 3% 2%; color:#FFFFFF; justify-self: center; line-height:20px; font-size: 16px; font-weight: 600; text-align: center;transition: 0.3s; }
.button2:hover { background-color: #009fd9; }
.about { width: 96%; background-color: #F8F8C9; border: #D74A1B solid 1px; text-align: left; margin: auto; padding: 2%; }
.play { background-color:#c962a1; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;	display: flex; justify-content: center;	align-items: center; cursor:pointer; color:#FFFFFF;	font-size:18px;	padding:4px 10px; text-decoration:none;	min-width: 100px; max-width: 100px;	transition: 0.2s; }
.play:hover { background-color:#e36cb4; }
.youtube-video-container { position: relative; overflow: hidden; width: 100%; }
.youtube-video-container::after { display: block; content: ""; padding-top: 56.25%; }
.youtube-video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media (max-width: 767px){
	.mb_login .half { width:95%;float:left;padding:0 0; }
	.viewbox { min-height:300px; }
	.description { padding:0%; text-align:left; line-height:26px; }
}

 @media (max-width: 639px){
	 .container{ width:100%; }
	 .videolist_wrap { grid-template-columns: 1fr; }
	 .viewbox_chapter { font-size:18px; }
	 .logo img { width:90%; max-width:200px; }
	 .title { text-align:center;margin-left:0%; }
}

@media (max-width: 480px){
	.button { width: 80%; padding:3%; }
	.photo_wrap { grid-template-columns: 1fr; }
	.video_content { padding: 4% 6% 8% 6%; }
}
 
@media (max-width: 320px){
	.videoplayer { width: 98%; height: auto; }

}