@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@600;900&family=Noto+Sans+TC:wght@400;500&display=swap');

/*reset*/
body, html, applet, object, iframe, img, strong, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input { margin: 0; padding: 0; border: 0; outline: 0; vertical-align:middle; }
h1, h2, h3, h4, h5, h6,p,b {margin: 0; padding: 0; border: 0; font-size: 100%;}
article, aside, figure, footer, header, hgroup, nav, section, details, summary {display: block;margin:0;padding:0;border:0;}
table{border-collapse:collapse;border-spacing:0;}
img,a{border:0; outline:0;}
a{ text-decoration:none; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
ul{list-style:none;}
q:before,q:after{content:'';}
*:focus { outline:none;}
body { font-family: 'Noto Sans TC', sans-serif; font-size: 18px; line-height: 28px; color:#181e2a;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-family: 'Noto Serif TC', serif; font-weight:500;}

/* default */
img {max-width:100%!important; height: auto!important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}
p { font-size:18px; line-height:27px; color:#181e2a;}
b,.t-bold { font-weight:500;}
.red { color:#da8d1f;}
.gray { color:#aaa;}
.black { color:#000;}
.blue { color:#4dace0 !important;}
.green { color:#556c21 !important;}
.pur { color:#a76a70;}
.yel { color:#9c9228;}
.small { font-size:13px !important;}
.m-l-m { margin-left:20px;}
.m-b-m { margin-bottom:20px;}
.m-b-L {  margin-bottom:80px;}
.m-t-L { margin-top:80px;}
.break { display:block;}

.wrap { width:90%; max-width:1100px; margin:0 auto;}
.section { padding:80px 0;}

/* head */
#po_bar { position:absolute; width:100%; margin:0 auto; height:45px; left:0; padding-top: 10px; z-index:3;}
.logo{ display:block; width:90px; position:absolute; left:20px;}
ul#option { position:absolute; top:5px; right:20px;}
ul#option li { display:inline-block; float:none; font-size:13px; margin-left:5px; vertical-align:middle; }
ul#option li img { vertical-align:middle;}
ul#option li a { color:#000;}
ul#option li a:hover { text-decoration:underline;}
.btn-menu { display:none;}

/* nav */
nav { display: none; position: fixed; top: 0; left: 0; width: 100%; text-align: center; background:#fff; z-index: 99;}
nav ul li { display: inline-block; }
nav ul li a { display: block; color:#000; padding:15px 20px; font-size: 20px; border-bottom:2px solid #fff;}
nav ul li a:hover { opacity: 0.8; color:#6c6917;}
nav ul li a.active {}

/* toparea */
#section0 { width:100%; height:790px; background:url("../images/bg1.jpg") no-repeat center;}
#section0 .top-wrap { width:90%; margin: 0 auto; padding-top:180px; text-align:center;}
#section0 h3 { font-size:30px; line-height:40px; color:#1f3a6f; letter-spacing:5px; margin-top:10px;}

/* 小標 */
.stitle { margin-bottom: 30px; text-align: center; clear:both;}

/* 前言 */
#section1 { background:url("../images/bg2.jpg");}
.part1 { overflow:hidden;}
.part1 .left { float:left; width:35%;}
.part1 .right { float:right; width:60%; font-size:22px; line-height:30px;}
.part1 .right p { margin-bottom:10px;}

/* 四格 */
#section2 { background:url("../images/bg3.jpg");}
.four { text-align:center;}
.four .box { display:inline-block; vertical-align:top; width:45%; margin:10px 0; padding:0 2%;}
.four .box img { display:inline-block; vertical-align:top; width:42%;}
.four .box .txt { display:inline-block; vertical-align:top; width:55%; padding-left:2%; text-align:left;}
.four .box h4 { color:#3571e8; font-size:22px; line-height:30px; margin:10px 0; letter-spacing:1px;}

/* 講座 */
#section3 { background: url("../images/bg4.jpg") center bottom no-repeat #fdf6ed;}
.course-card { background:#fff; border-radius:10px; margin-bottom:20px }
.course-header { background:#4170d3; padding:30px 20px; text-align:center; position:relative; border-radius:10px 10px 0 0;}
.course-header h2 { color:#fff; font-size:30px; font-weight:500; }
.badge { position:absolute; left:30px; top:-30px;}
.course-content { display: flex; gap:20px; }
.info-side { flex: 1; padding:40px 30px 20px 30px; }
.info-row { display: flex; margin-bottom: 20px; }
.info-row .label { font-weight: 500; width:100px; flex-shrink: 0; }
.info-row .value { }
.list { margin: 0; }
.list li { font-size:17px; line-height:25px; margin-bottom:10px; list-style-type: none; padding:0 0 0 20px; position:relative; }
.list li:before{ content: "◆"; display:block; color:#4170d3; width:15px; font-size:13px; position: absolute; left:0; top:2px;}
.list li:last-child { margin-bottom:0;}
.speaker-side { width: 300px; text-align: center; background:#e6ebfd; padding:30px; }
.speaker-side .avatar { width:240px; height:240px;}
.speaker-side h3 { font-size:20px; margin:15px 0; color:#4170d3;}
.speaker-side .spname { font-size:30px; font-weight:bold}
.speaker-side p { text-align:left;}
.btn-sign { display:block; width:200px; font-size:22px; font-weight:500; background:#feb74a; color:#192846; text-align:center; padding:15px 0; margin:10px auto 50px auto;}
.btn-sign:hover { background:#294985; color:#feb74a;}

/* 資訊 */
#section4 { background: url("../images/bg5-1.png") center top no-repeat,url("../images/bg5-2.png") center bottom no-repeat, #1f3a6f;}
.table { margin-bottom:2px; background:#fff; border:2px solid #1f3a6f; background:#4170d3;}
.table .field { border-bottom:2px solid #1f3a6f; overflow:hidden; clear:both;}
.table .field:last-child { border-bottom:none;}
.table .ti { float:left; width:calc( 22% - 40px ); padding:20px; font-weight:500; text-align: center; color:#fff;}
.table .txt { float:right; width:calc( 78% - 42px ); padding:20px; border-left:2px solid #1f3a6f; background:#fff;}
ul.star {}
ul.star li{ font-size:17px; line-height:25px; margin-bottom:15px; list-style-type: none; padding:0 0 0 20px; position:relative;}
ul.star li:before{ content: "✦"; display:block; color:#da8d1f; width:20px; line-height:20px; position: absolute; left:0; top:0;}
ul.star li:last-child { margin-bottom:0;}
ul.star li a { color:#000; text-decoration:underline;}
ol { padding-left: 20px;}
ol li { list-style:decimal; margin-bottom:10px; font-size:17px; line-height:25px;}
.btn-wrap { text-align: center; margin-top:20px;}
.btn-go { display:inline-block; padding:10px 30px; background:#da8d1f; color:#fff; margin-right:10px;}
.btn-go:hover { opacity:0.8}

#footer { clear:both; font-size:12px; color:#fff; text-align:center; padding:20px 0;}

/*gotop*/
#gotop{ display:block; cursor: pointer; position:fixed; bottom:20px; right:20px; z-index:9999; width:40px; height:40px; border-radius:50%; background:url(../images/toparrow.png) no-repeat center #feb74a;}
#gotop:hover { bottom: 25px;}

/*-----------------------rwd*/

@media screen and (max-width: 1500px) {
	#section0 { height:600px; background:url("../images/bg1.jpg") no-repeat center; background-size:cover;}
	#section0 .top-wrap { width:350px; padding-top:120px;}
	#section0 h3 { font-size:25px; line-height:30px;}
}

@media screen and (max-width: 1000px) {

	body { font-size: 15px; line-height:23px;}
	p { font-size:15px; line-height:23px;}
	
	/*head*/
	.logo{ left:10px;}
	.logo img { width:80px; height:34px;}
	.btn-menu { display:block; width:30px; height:30px; position:absolute; top:10px; right:10px; background:url(../images/icon-share.png) no-repeat center; background-size:28px 28px; z-index:101;}
	.btn-menu.active{ background:url(../images/icon-xx.png) no-repeat center; background-size:28px 28px;}
	ul#option { display:none; float:none; text-align:center; width:100%; margin-top:0; padding:40px 0; text-align:center; position:absolute; top:0; right:0; left:0; background:rgba(255,255,255,.9); z-index:100; -webkit-backface-visibility:hidden;}
	ul#option li { }
 	ul#option li a {text-shadow:none;}

	.section { padding:30px 0;}
    /* toparea */
    #section0 { background:url("../images/bg1-m.jpg") no-repeat bottom center #fdf6ec; background-size:contain; height:800px;}
    #section0 .top-wrap { width:400px; padding-top:150px;}
	
    .part1 { overflow:hidden;}
    .part1 .left { float:none; width:50%; text-align:center; margin:0 auto 15px auto;}
    .part1 .right { float:none; width:100%; font-size:18px; line-height:25px;}
    
    .four .box { display:block; width:90%; max-width:400px; margin:10px auto 30px auto; padding:0;}
    .four .box img { width:150px;}
	.four .box .txt { display:block; width:100%; padding-left:0; text-align:left;}
	.four .box h4 { font-size:18px; line-height:25px; text-align:center;}
	
    .table { margin-bottom: 20px; text-align: center;}
    .table .field { border-bottom:none;}
	.table .ti { float:none; width:90%; margin:0; padding:10px 5%; text-align: center; }
	.table .txt { float:none; width:90%; margin-left:0; padding:10px 5%; border-left:none;}
    
	/*goTOP*/
	#gotop{ bottom:20px; right:10px;}
    #gotop{ width:30px; height:30px; border:1px solid #1f3a6f; background-size:8px 10px;}
    #gotop:hover { bottom: 25px;}

	ol { padding-left: 20px;}
	ol li, ul li,ul.star li { font-size:15px; line-height:23px; text-align: left;}

	.course-header { padding:20px;}
	.course-header h2 { font-size:22px; line-height:30px; }
	.badge { width:100px; height:100px; left:-10px; top:-60px;}
	.course-content { flex-direction: column; gap:0; }
	.info-side { padding:20px;}
	.info-row { display:block; }
	.info-row .label { display:block; margin:10px auto; text-align:center; color:#2f559e;}
	.info-row .value { }
	.list li { font-size:15px; line-height:23px;}
	.speaker-side { width:90%; order: -1; padding:20px 5%;}
	.speaker-side .avatar { width:180px; height:180px;}
	.speaker-side .spname { font-size:25px;}
}

@media screen and (max-width: 680px) {
	/* nav */
	nav ul li a { padding:5px 8px; font-size:12px;}
	.logo{ width:60px; left:15px;}
	
	/* toparea */
    #section0 { height:400px;}
    #section0 .top-wrap { width:200px; padding-top:80px;}
	#section0 h3 { font-size:18px; line-height:25px; letter-spacing:0;}
	
	/* 小標 */
	.stitle { margin-bottom: 30px; text-align: center;}
	.stitle h2 { font-size:25px; line-height:35px;}
}

@media screen and (max-width: 360px) {
    #section0 { height:350px;}
    #section0 .top-wrap { width:200px; padding-top:50px;}
}