html{overflow-x: hidden; scroll-behavior: smooth;}
body{ margin: 0; font-family: ar-udjingxiheib5, sans-serif; font-weight: 500; font-style: normal; line-height: 1.35; font-size: 20px; }
img{ width:auto; height: auto; max-width: 100%; max-height: 100%;}
a{ color:inherit; text-decoration: none;}

.overflow{overflow-x: hidden; position: relative;}

.index{ background: url(../images/bg.png);}
.page1{ background: url(../images/page-bg2.png) no-repeat center center fixed,url(../images/bg2.png);}
.page2{ background: url(../images/page-bg2.png) no-repeat center center fixed,url(../images/bg3.png);}
.page3{ background: url(../images/page-bg2.png) no-repeat center center fixed,url(../images/bg4.png);}
.page4{ background: url(../images/page-bg.png) no-repeat center center fixed,url(../images/bg.png);}

header{ padding:80px 50px 0 50px;}
hgroup{text-align: center; }
h1{width:90%; margin:0 auto;}

footer{ font-size: 14px; text-align: center; padding:10px 5px; color:#00000054;}

/*首頁*/
.index header{padding:30px 0 0 0;}
.index hgroup{position: relative; z-index: 10;}
.index h1{ margin-bottom: 1em;}
.map{ position: relative; max-width: 1600px; margin: 0 auto;}
.cloud{ display:block; background: url(../images/雲1.png) no-repeat center center/contain; position: absolute; inset: 0 0 0 0; animation:cloud01 5s linear infinite;}
.cloud:before{ content: ''; display:block; position: absolute; inset: 0 0 0 0; background: url(../images/雲2.png) no-repeat center center/contain; }
.map img{ position: relative;}
.map a{ display: block; position: absolute;}
.link1{ inset:0 44% 65% 44%;}
.link2{ inset:26% 58% 35% 28%;}
.link3{ inset:38% 30% 30% 58%;}
.link4{ inset:8% 30% 64% 64%;}
.tooltip-box { position: absolute;background: #fff;color: #000;padding: 2px 10px; border-radius: 10px;font-size:0.85em;
display: none; pointer-events: none; white-space: nowrap; transform: translate(-50%,0); box-shadow: 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #fff;}
.sakura {position: fixed;top: -50px;width: 20px;height: 20px;background-size: contain;background-repeat: no-repeat;}
.indexbtn{ display: grid; grid-template-columns: repeat(4,1fr); gap:20px; padding:50px; justify-content: center;}

/*內頁*/
.title-bg{ display: inline-block; position: relative;}
.title-bg:before,.title-bg:after{ content: ''; display: block; position: absolute;}
.title-bg:before{ background: url(../images/h2-cloud1.png) no-repeat center center/contain; width:316px; height: 90px; top:0; right:0; transform: translate(60%, -35%);animation:cloud01 5s linear infinite;}
.title-bg:after{ background: url(../images/h2-cloud2.png) no-repeat center center/contain; width:284px; height: 90px; bottom:0; left:0; transform: translate(-60%, 50%);animation:cloud02 5s linear infinite;}

.content{ max-width: 1080px; width:95%; margin: 0 auto;}
.content2{ max-width: 1280px; width:95%; margin: 0 auto;}
.page1 .content{ border-left: 2px solid #e7b65d;}

.events{ margin: 30px; display: grid; grid-template-columns: 300px 1fr; gap:20px; background: #fff; padding:20px; border-radius: 10px; align-items: center; }
.page1 h2{  height: 50px; line-height: 50px; width:120px; text-align: center; background: #e7b65d; color:#fff; position: relative;}
.page1 h2:after{ content: ''; display: inline-block; border: 25px solid #e7b65d; border-right: 25px solid transparent; position: absolute; right: -25px; top:0;}
.page1 h3{ font-weight: 500; font-weight: 600;}

/*觀察報告*/
.page3 .content{ position: relative;}
.ppt{ border-radius: 45px; overflow: hidden; border: 3PX solid #e7b65}
.ppt img{ display: block;}
.swiper-button-next{ position: absolute; width:40px; height:40px; border-radius:50%; z-index: 2; cursor: pointer; background:#fff;border:1px solid #000; transform: translate(50%, 0);}
.swiper-button-prev{ position: absolute; width:40px; height:40px; border-radius:50%; z-index: 2; cursor: pointer; background:#fff;border:1px solid #000; transform: translate(-50%, 0);}
.swiper-button-next span { display:inline-block; margin:15px 0 0 12px; width:10px; height:10px; border-top:2px solid #000; border-right:2px solid #000; transform: rotate(45deg);}
.swiper-button-prev span { display:inline-block; margin:15px 0 0 17px; width:10px; height:10px; border-top:2px solid #000; border-right:2px solid #000; transform: rotate(-135deg);}
.swiper-button-disabled { cursor:default !important; opacity: 0.2;}
.swiper-button-disabled:hover { background:#fff;}
.swiper-button-disabled:hover span { border-top:2px solid #8fb160; border-right: 2px solid #8fb160;}

/*排行榜*/
.page2 .content{ display: grid; grid-template-columns:repeat(3,1fr) ; justify-content: center; gap:40px 20px;}
.page2 .content2{ display: grid; grid-template-columns:repeat(4,1fr) ; justify-content: center; gap:40px 20px;}
.page2 h2{ text-align: center; margin-bottom: 1.5em;}
.page2 h2:nth-of-type(n+2){ margin-top: 2.5em;}
.page2 h2 span{display: inline-block; background:#d6480b; width:2em; height: 2em; text-align: center; line-height:2em; border-radius: 1em; color:#fff9f6; margin: 0 -5px;}
.page2 h3{ padding: 5px; text-align: center; margin:-1em 0 1.5em 0; border-radius: 20px;  font-size: 1em;background: #f2efee;}
.author{ background:#fff; padding:0 20px 20px 20px; border-radius: 10px;}
	.author h3{ border: 1px solid #e65b1f; color:#e65b1f;}
	.a-img{ display:block; width:90%; max-width: 200px; border-radius: 200px; margin:0 auto 1em auto; overflow: hidden;}
	.a-img img{ display: block;}
	.a-name{ display: block; text-align: center; margin-bottom: 1em; font-weight: 600;}
	.a-txt{ font-size: 0.9em;}
	.a-txt a{ color:#e65b1f; text-decoration: underline;}
.book{ background:#fff; padding:0 20px 20px 20px; border-radius: 10px;}
	.book h3{ border: 1px solid #0c79af; color:#0c79af;}
	.b-img{ display: block; text-align: center; margin-bottom: 1em;}
	.b-name{ display: block; text-align: center; margin-bottom: 1em; font-weight: 600;}
	.b-txt{ font-size: 0.9em;}
.rank{ background:#fff; padding:0 20px 20px 20px; border-radius: 10px; counter-reset:rank;}
	.rank h3{ border: 1px solid #b37a19; color:#b37a19;}
.rank ol{list-style: none; counter-reset:rank; padding: 0;}
.rank li{ padding-left:32px; position: relative;}
    .rank li+li{ margin-top: 0.9em;}
    .rank li:before{ counter-increment: rank; content:counter(rank); display: inline-block; width:1.35em; height: 1.35em; text-align: center; line-height: 1.5em; background:#e7b65d; border-radius: 20px; color:#fff; position: absolute; top:0; left: 0;}
    .rank li:nth-of-type(n+4):before{ background:#000;}
.note{margin: 50px auto;  box-sizing:border-box;font-size: 0.8em; text-align: center; color:#8c6259;}
.note ul{  margin:0.5em 0 0 0; padding-left: 1em; text-align: left;}

/*證書*/
.certificate{ width:85%; max-width: 1200px; margin:0 auto; box-sizing: border-box; text-align: center;}
.wrap{ background: url(../images/report2.png) no-repeat center top/cover;  padding:150px 2.5% 0 2.5%; box-sizing: border-box;}
.wrap-bottom{ background: url(../images/report2.png) no-repeat center bottom/cover; margin-bottom: 2em; box-sizing: border-box; padding:20px 2.5% 50px 2.5%;}
.name{ color:#b37a19; font-size: 1.1em; margin:0 5px ; }
.img{width:180px; margin:0 auto;}
.btn-make{ display: block; background: url(../images/btn-make.png) no-repeat center center/contain; width:250px; height: 89px; margin:0 auto;}

@media screen and ( max-height:850px) and ( min-width:1080px) {
	.index h1{ height: 250px; margin-bottom: 0.5em;}
}

@media screen and ( max-width:1440px) {
	.page1{ background-size: 1440px,auto;}
	.page2{ background-size: 1440px,auto;}
	.page3{ background-size: 1440px,auto;}
	.page4{ background-size: 1440px,auto;}

	.page3 .content{ max-width:700px;}
}

@media screen and (min-width:1080px) {
    .mobile{display: none;}
}
@media screen and (max-width:1080px) {
	body{ font-size: 16px;}
    .desk{display: none;}
	.page1{ background-size:contain,auto;}
	.page2{ background-size:contain,auto;}
	.page3{ background-size:contain,auto;}
	.page4{ background-size:contain,auto;}
	.map{ padding: 0 2.5%;}
	.cloud_m{display:block; background: url(../images/雲2.png) no-repeat center center/cover, url(../images/雲1.png) no-repeat center center/cover; position: absolute; inset: 0 0 0 0; }
}
@media screen and (max-width:768px) {
	header{ padding:70px 2.5% 0 2.5%;}
	.title-bg:before{width:158px; height: 45px;transform: translate(80%, -50%); }
	.title-bg:after{width:142px; height: 45px;    transform: translate(-70%, 35%);}
	.events{ grid-template-columns: 30% 70%; gap:10px; margin: 15px;}
	.page2 .content{ grid-template-columns: repeat(2,1fr); gap:40px 15px;}
	.page2 .content2{ grid-template-columns: repeat(2,1fr); gap:40px 15px;}
	.wrap{ padding:100px 2.5% 0 2.5%; }
	.indexbtn{ padding:50px 5%; gap:10px; font-size: 14px; grid-template-columns: repeat(2,1fr);}
	.indexbtn a span{ display: block; max-width: 150px; margin:0 auto;}
}

/***********POBAR***********/
.pobar{ display:flex; padding: 5px 15px;  width:100%; box-sizing: border-box; font-size:16px; font-weight: 500; position: absolute; top:0; left: 0; z-index: 99;}
.menu{ text-align: right; flex: 1;z-index: 20; position: relative;}
.btn-menu{display:inline-block; line-height: 44px; width:25px; margin:5px 0 0 0;}
.btn-close{ position:absolute; top:8px; right: 15px;}
.logo{width:80px;}
#option{margin:0; display: none; position: fixed; right: 0; top:0; transition: all 0.5s; padding: 50px 5px 20px 5px;  background:#03253ddd; width:50%; max-width:300px; height: 100vh; box-sizing: border-box; z-index: 15; box-shadow: -5px 0 10px #0000002e;}
#option li{ display: block; text-align: center; margin: 30px 0;}
#option a{color:#fff; text-decoration: none;}
#option img{ width:25px; margin:0 auto;}
.menu.show #option{display: block;}
#gotop{ position:fixed; bottom:20px; right:20px; cursor: pointer; z-index:99;}

/*************/
@media screen and (max-width:468px){
	.pobar{ padding:5px; margin-bottom:25px;}
	.logo{width:65px;}
	#gotop{ bottom:20px; right:20px;}
	
}