@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

/*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%; font-weight: normal;}
article, aside, figure, footer, header, hgroup, nav, section, details, summary {display: block;margin:0;padding:0;border:0;}
html { /*scroll-behavior: smooth;*/}
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;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
*:focus { outline:none;}
body { font-family:"Noto Sans TC",'Microsoft JhengHei', sans-serif; color:#000; font-size: 18px; line-height: 28px; background:#f7ceba;}
/*html, body {  scroll-behavior: smooth; }*/

/* default */
img {max-width:100%!important; height: auto!important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}
b,.t-bold { font-weight:600;}
.red { color:#f54936; font-weight: bold;}
.gray { color:#444444;}
.black { color:#000;}
.white { color:#fff;}
.blue { color:#558fce;}
a.blue { color:#26335e; text-decoration: underline;}
.pur { color:#9051c4 !important;}
.small { font-size:15px; line-height:19px;}
.m-l-m { margin-left:20px;}
.m-b-s { margin-bottom:10px;}
.m-b-m { margin-bottom:20px;}
.m-b-L {  margin-bottom:80px;}
.m-t-L { margin-top:80px;}
.m-t-m { margin-top:20px;}
.p-t-L { padding-top: 50px;}
.break { display:inline;}
.t-center { text-align: center;}
.container { background: url("../images/bg2.png") repeat-y top center;}
section {}
.wrap { width:90%; max-width:1200px; margin:0 auto;}
h2 { font-size:28px; line-height:35px; margin-top:20px; font-weight:500;}
h3 { font-size:20px; line-height:28px; font-weight:500; margin-bottom: 10px;}
h4 { font-size:18px; font-weight:500;}
p { font-size:16px; line-height:22px; color:#000;}
h2 .red { font-size:40px;}
h2 .gray { font-size: 20px;}
h3 .red { font-size:30px;}
.break { display: block;}

/* head and foot and top */
.logo{ display:block; width:100px; position:absolute; left:20px; top: 20px;}
.social { position: absolute; right:20px; top:20px;}
.social a { font-size:14px; color:#000; display: inline-block; vertical-align: middle; margin-left:5px;}
.social a:hover { opacity: 0.7;}
footer { clear:both; font-size:13px; color:#a88273; text-align:center; padding:50px 0; font-family:'Microsoft JhengHei';}
#gotop{ display:block; cursor: pointer; position:fixed; bottom:20px; right:20px; z-index:9999; width:40px; height:40px; border-radius:50%; border:1px solid #000;
	background:url(../images/top.png) no-repeat center #2e1616;}
#gotop:hover { bottom: 25px;}

.page-nav { width: 100%; background:#2e1616;}
.page-nav ul { width: 100%; max-width:1000px; margin:0 auto; text-align: center;}
.sticky { position:fixed; top:0; left:0; z-index:11;}
.page-nav li {display: inline-block; width:30%;}
.page-nav a { display: block; color:#f7e1d4; padding:10px 0; font-size:24px;}
.page-nav li:nth-child(2) a{ border-right:1px solid #f7ceba; border-left:1px solid #f7ceba;}
.page-nav a:hover { opacity: 0.8;}
.page-nav a.active {}
.page-nav a span { color:#f7b457;}

#section0 { width: 100%; height:600px; padding-top:100px; background: url("../images/bg1.jpg") no-repeat center; position: relative; text-align: center; background-size:cover;}
#section0 h2 { margin-top:15px;}
#section0 .mb { display: none;}

.title { text-align: center; padding:50px 0; clear: both;}
.title.t1 { background: url("../images/bg-title1.png") no-repeat bottom center;}
.title.t2 { background: url("../images/bg-title2.png") no-repeat bottom center;}
.title.t3 { background: url("../images/bg-title3.png") no-repeat bottom center;}
.title.t4 { background: url("../images/bg-title4.png") no-repeat bottom center;}
.title.t5 { background: url("../images/bg-title5.png") no-repeat bottom center;}
.title h3 { margin-top:20px;}

.three { text-align: center;}
.three .box { display: inline-block; background:#f7e1d4; border-radius:10px; margin:10px 2%; width:24%; padding:20px 2%; vertical-align: top; height:340px;}
.three .box p { margin-top:10px;}
a.linkgo { display: inline-block; border:1px solid #000; border-radius:20px; padding:6px 20px; font-size:22px; color:#000; text-align: center;}
a.linkgo span { background:#f54936; display: inline-block; vertical-align: middle; width: 25px; height: 25px; margin-left: 10px; border-radius:50%;}
a.linkgo i { display: inline-block; vertical-align: middle; margin:0 5px 10px 0; width:6px; height:6px; border-top:2px solid #fff; border-right:2px solid #fff; transform: rotate(45deg);}
a.linkgo:hover { background:#000; color:#fff;}
a.linkgo:hover span {}

.lecture-box { background:#f7e1d4; border-radius:10px; font-size:20px;}
.lecture-box.b1 { position: relative; top:-10px;}
.lecture-box .ti { position:relative; top:-20px; text-align: center; width: 100%;}
.lecture-box .ti span { display: inline-block; background:#f7b457; border-radius:25px; font-size:22px; padding:10px 25px; font-weight: bold;}
.lecture-box .inn { width:90%; margin:0 auto; max-width:750px; padding-bottom:30px;}
.field { margin-bottom:10px;}
.field .left { display: inline-block; vertical-align: middle; font-weight: bold; width: 18%; vertical-align: top;}
.field .right { display: inline-block; vertical-align: middle; width: 77%; margin-left: 2%; vertical-align: top;}

.two { overflow: hidden; padding-top:30px;}
.two .lecture-box { width:calc( 48% - 100px); padding:0 50px; height:320px;}
.two .lecture-box:first-child { float: left;}
.two .lecture-box:last-child { float:right;}
.lecture-box ul {}
.lecture-box ul li { background: url("../images/star.png") no-repeat left top 1px; list-style: none; padding-left:30px; margin-bottom:10px;}
.lecture-box ol {}
.lecture-box ol li { list-style:disc; font-size:16px;}
.lecture-box .red { font-size:28px;}

.books { text-align: center;}
.books a { display: inline-block; vertical-align: top; width:230px; height:330px; margin:10px; background:#fff; border-radius:20px; position: relative; top:0;}
.books a:hover { top:-5px;}
.books.ss a{ height:280px; }
.books a .ti { font-size:18px; line-height:22px; padding:12px 0; color:#fff; border-radius:20px 20px 0 0;}
.books a .ti.s { line-height:20px; padding:4px 0;}
.books a:nth-child(odd) .ti { background:#6687d4;}
.books a:nth-child(even) .ti { background:#31876f;}
.books a h4 { line-height:19px; color:#000; padding:10px;}
.books a img { display: inline-block; max-height:200px; margin:10px 0;}
.books .tag { background:#f54936; color:#fff; font-size:13px; line-height:14px; width:60px; padding:16px 0; border-radius: 50%; position: absolute; right:-15px; bottom:50px; z-index: 2;}

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

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

	/*goTOP*/
	#gotop{ bottom:10px; right:10px;}
	#gotop a{ width:35px; height:35px; border-radius:50%; background-size:10px 8px;}
	#gotop a:hover { background-size:10px 8px;}
    
    .three .box { display:block; margin:10px 2%; width:92%; padding:20px 2%; height:auto;}
    .two .lecture-box { width:calc( 100% - 40px); padding:0 20px 20px 20px; height:auto;}
    .two .lecture-box:first-child { float:none; margin:0 0 40px 0;}
    .two .lecture-box:last-child { float:none;}
}

@media screen and (max-width: 640px) {
    
    h2 { font-size:20px; line-height:30px;}
    h3 { font-size:17px; line-height:25px;}
    h4 { font-size:15px;}
    p { font-size:15px; line-height:20px;}
    h2 .red { font-size:30px;}
    h2 .gray { font-size:15px;}
    h3 .red { font-size:25px;}
    .break { display: inline;}
    .break-m { display: block;}
    .logo { top:10px;}
    .social { top:10px;}
    #section0 { height:480px; padding-top:70px; background: url("../images/bg1-m.jpg") no-repeat center; background-size:contain;}
    #section0 .pc { display: none;}
    #section0 .mb { display:inline-block;}
    
    .page-nav a { font-size:15px; line-height:18px;}
    
    .title { padding:30px 0; background: none !important;}

    .lecture-box { font-size:17px;}
    .lecture-box .inn {}
    .field .left { display:block; width:100%; }
    .field .right { display:block; width:calc( 100% - 35px); margin-left:0; padding:0 10px 0 25px; }
    .lecture-box ul li { margin-bottom:10px;}
    .lecture-box ol { padding-left:25px;}
    
    .books a { width:160px; height:270px; margin:8px 3px;}
    .books.ss a{ height:220px; }
    .books a img { max-height:150px;}
    .books a .ti { font-size:14px; line-height:16px; padding:12px 0; }
    .books a .ti.s { line-height:15px; line-height:16px; padding:4px 0;}
    .books a h4 { padding:6px;}
    
}