@charset "utf-8";

/* CSS Document */
html {padding: 0px;margin: 0; font-size: 20px; position:relative;}
body {position: relative;font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang", "STHeiti", sans-serif, serif; line-height: 120%; color: #555;}

/*Text*/
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.clearfix{zoom:1;}
.clearfix:after{content:'.';display:block;visibility:hidden;clear:both;height:0px;}
.word_break{word-break:break-all;word-wrap:break-word;display:block;}
a {text-decoration: none;color: #09b9fd;}
a:hover{opacity: 0.7;}
.color_01{ color: #c08732;}
.color_02{ color: #d60c18;}
.color_03{ color: #e6cfb3;}
.bold{ font-weight: 700;}

/*Content*/
main section .box{ position: relative; max-width:1080px; padding: 100px 40px; margin: 0 auto;}
main section .anchor{position: absolute; top: -140px; left: 0;}
main section .box img{ max-width: 900px;border-radius:20px;}
main section article{margin: 0 0 1.25rem;}
main section h1{ font-size: 2.5rem; font-weight:bold; color: #c08732; letter-spacing: 1px; text-align: center; margin: 0 0 3rem; }
main section h2{ font-size: 1.4rem; font-weight:500; letter-spacing: 2px; margin: 0 0 2.5rem; line-height: 150%;}
main section h2.tab{ text-align: center;}
main section h2.tab a{ cursor: pointer; color: #cbcbcb; font-weight:400; padding: 0 0.5rem; background: url("../images/tab_line.png") no-repeat right center;}
main section h2.tab a.active{ font-weight:600; color: #c08732;}
main section h2.tab a:last-child{ background: none;}
main section h3{ font-size: 1.2rem; font-weight:500; margin: 0 0 1rem; }
main section h4{ font-size: 1rem; font-weight:500; margin: 0 0 1rem; }
main section h5{ font-size: 0.8rem; font-weight:400; margin: 0 0 0.5rem; }
main section p{ letter-spacing: 1px; line-height: 180%; margin-bottom: 1.25rem;}
main section .remark{font-size: 1rem; color:#c08732; margin: 0 0 2.5rem;}
main section .img{ text-align: center;}
main section div.col_2{column-count:2;column-gap:50px;}
main section ul li{line-height: 180%;}
main section ul.ul_01{list-style:decimal; padding:0 0 0 25px;}
main section ul.ul_01 li{ padding-bottom:7px; margin:0 0 15px;}
main section ul.ul_02{list-style:disc;padding:0 0 0 17px;}
main section ul.ul_02 li{ padding-bottom:7px; margin:0 0 15px;}
main section .table{ margin: 0 0 1rem; border-bottom: 1px solid #ceb698;}
main section .table .row{ border-top: 1px solid #ceb698; padding: 1rem 0; display: flex; flex-flow:row nowrap;}
main section .table .row .title{ font-weight: 700; line-height: 180%; padding: 0 2rem 0 0; min-width: 200px;}
main section .table .row .data{flex-grow:1;}
main section .row a{ margin: 0;}


header {
	width: 100%; max-height: 140px; height: 7.2vw; min-height: 80px;
	position: fixed; z-index: 99; top: 0px; left: 0px;
	background-color: #fff;
}
header .logo_box {
    height: 100%;
	position: absolute; left: 2.6vw/*50px*/; top: 0;
	display: flex; flex-flow:row wrap;justify-content: center;align-items: center; 
}

header .logo_box .logo {display: block; background:url("../images/logo.png") no-repeat; background-size: contain; max-width:360px; width:18.7vw; min-width:270px; max-height: 80px; height:4.1vw; min-height: 60px;}

nav {
    height: 100%;
    position: absolute; top: 0; right:2.4vw/*45px*/; z-index: 999;
	display: flex; flex-flow:row wrap;justify-content: center;align-items: center;
}


nav .pc_menu li {
    display: inline-block;
	font-family: 'Noto Sans TC';font-weight: 500;
    font-size: 1.3rem;
    padding-right: 25px;
}

nav li a{color:#555;}
nav li a:hover{color:#c08732;}

nav .links{height:36px;}
nav a.btn_line{display:inline-block; background:url(../images/btn_line.png) no-repeat left top; width:36px; height:36px; padding-right:12px;}
nav a.btn_line:hover{opacity: 0.7;}
nav a.btn_fb{display:inline-block; background:url(../images/btn_fb.png) no-repeat left top; width:36px; height:36px;}
nav a.btn_fb:hover{opacity: 0.7;}

a.btn_apply_s{display:inline-block;background:url(../images/btn_apply_s.png) no-repeat; width:39px; height:640px; position:absolute; top:0px; right:2.3vw/*45px*/; z-index:89; background-image: url(../images/btn_apply_s.png);}
a.btn_apply_s:hover{opacity: 0.7;}

/*Pad*/
nav .btn_apply_pad{display: none;}
nav a.btn_apply{ display:inline-block; background: #bc7203; color:#fff; line-height: 65px; height: 65px; width: 100%; font-size: 1.2rem; font-weight:500; text-align: center; z-index: 9; position: fixed; bottom:0px; left: 0px;  }

/*Phone*/
header .phone_menu{ position: absolute; top: 80px; right:0px; width: 100%; background: #f3e4ce; display:none;}
header .open{ display:block;}
header .phone_menu ul{padding: 2rem 0;}
header .phone_menu li{ display:block; width: 100%; text-align: center;font-size: 1.2rem;}
header .phone_menu li a{ display:block; width: 100%; line-height: 220%; color: #c08732;}

/*Phone Burger Menu*/
.burger-box{ display: none; cursor:pointer;width: 35px; height: 35px; padding-left:12px;}
.burger{width: 100%; height: 5px; background-color: #c08732; position: relative; top: 15px; transition:background-color .01s .5s;}
.burger::before{content:""; width: 100%; height: 5px; background-color: #c08732; position: absolute; top: -12px;}
.burger::after{content:""; width: 100%; height: 5px; background-color: #c08732; position: absolute; bottom: -12px;}
.burger-box.active .burger{background-color: transparent; transition:background-color .01s .2s;}
.burger-box.close .burger::before{animation: backturn1 .4s .2s ease-in-out reverse both,backmoveDown .3s .55s ease-in  reverse both;}
.burger-box.active .burger::before{animation:moveDown .3s ease-in forwards,turn1 .4s .2s ease-in forwards;}
.burger-box.close .burger::after{animation: backturn2 .45s .1s ease-in reverse both,backmoveUp .3s .55s ease-in  reverse both;}
.burger-box.active .burger::after{animation:moveUp .3s ease-in forwards ,turn2 .4s .2s ease-in forwards;}

@keyframes moveDown{ 0%{top: -12px;}100%{top:0;}}
@keyframes backmoveDown{0%{top: -12px;}100%{top:0;}}
@keyframes moveUp{0%{bottom: -12px;}100%{bottom:0;}}
@keyframes backmoveUp{0%{bottom: -12px;}100%{bottom:0;}}

@keyframes turn1{0%{transform:rotate(0deg);}90%{transform:rotate(50deg);}100%{transform:rotate(45deg);}}
@keyframes backturn1{0%{transform:rotate(0deg);}90%{transform:rotate(50deg);}100%{transform:rotate(45deg);}}

@keyframes turn2{0%{transform:rotate(0deg);}90%{transform:rotate(145deg);}100%{transform:rotate(135deg);}}
@keyframes backturn2{0%{transform:rotate(0deg);}90%{transform:rotate(145deg);}100%{transform:rotate(135deg);}}

.vision_header{ max-height: 140px; height: 7.2vw; min-height: 80px;}

.vision { max-height: 790px; height:41.1vw; min-height: 700px; background:url("../images/bg_book.png") no-repeat left top #eeeee7; background-size: contain;}
.vision .vision_phone{ display: none;}
.vision .bd{ position: relative; width: 927px; height: 700px; padding: 35px 0 0 0; margin: 0 auto;}
.vision .headline{ position: relative; width: 61%/*496px*/; height:100%;}

.vision .headline_01{ display: block; position: absolute; top:0px; left: 0px; display: block;  background:url("../images/vision_headline_hd.png") no-repeat; background-size: contain; width: 100%; height:55%;}
.vision .headline_02{ display: block; position: absolute; bottom:0px; left: 0px; display: block;  background:url("../images/vision_headline_ft.png") no-repeat; background-size: contain; width: 100%; height:45%;}
.vision .vision_book{display: block; position: absolute; top:0px; right: 0px; display: block;  background:url("../images/vision_book.png") no-repeat; background-size: contain; max-width: 325px; width:37%/*325px*/; height:100%;}


section.intro {background: #fff;}
section.intro .box{ position: relative; max-width:900px;}
section.intro h1{ margin: 0 0 1.5rem;}
section.intro article{margin: 0 0 3rem;}
section.intro article .img{ margin: 0 0 2.5rem;}
section.intro article .text{ max-width: 860px; margin: 0 auto;}
section.intro img{ width: 100%; max-width: 900px;}
section.intro img.left{ width:430px; margin:5px 30px 20px 0px; padding:0px;}
section.intro img.right{ width:430px; margin:5px 0px 40px 30px; padding:0px;}

section.agenda { background: #f3e4ce;}
section.agenda p.agenda_data{ text-align: center;}
section.agenda .row .time{ font-size: 1.2rem; font-weight: 500; padding: 0 2rem 0 0; min-width: 180px; margin: 0 0 0.5rem; }
section.agenda .row span{ font-size: 0.8rem; color:#c4e7ff;}
section.agenda .declare{ font-size: 0.8rem; color: #555; background:#f7f7f0; padding:1.5rem 2rem 1rem; border: 5px solid #e6cfb3;}
section.agenda .declare h4{ color: #c08732;}
section.agenda .declare li{ list-style:disc; margin: 0 0 1rem 1.25rem;}

section.speakers{}
/*section.speakers .box{ padding: 120px 40px 60px;}*/
section.speakers .speaker{ margin: 0 0 2.25rem;}
section.speakers .speaker h1{ margin: 0 0 4rem;}
section.speakers .speaker .hd{ border-top:7px solid #e6cfb3; border-bottom:1px solid #e6cfb3; padding: 1.25rem 0 0.5rem; margin: 0 0 2.5rem;}
section.speakers .table{ margin: 0; border-bottom: 0px;}
section.speakers .table .row{ border-top: 0px; padding: 0;}
section.speakers .speaker .bd .img{ margin: 0 0 2rem;padding: 0 3rem 0 0;}
section.speakers .speaker .bd h3{ font-size: 1.7rem; line-height: 120%; margin: 0 0 2rem;}
section.speakers .speaker .bd h5{ color: #ce9e63; margin: 0 0 0.75rem;}

section.traffic{ background: #eeeee7;}
section.traffic h2{ margin: 0 0 1.5rem;}
section.traffic .map { text-align: right; margin: 0 0 2rem;}
section.traffic .map iframe{ width: 100%; height: 25vw; min-height:300px; border:0px; border: 5px solid #e6cfb3;}
section.traffic .map a{ font-size: 0.8rem; }

section.readmore{ background: #f8f8f8;}
section.readmore .news .title{color:#c08732;} 
section.readmore .news a{color:#555; line-height: 180%;} 
section.readmore .bookslist{ margin: 0 0 1.5rem;}
section.readmore .bookslist .row{ margin: 0 0 1rem; }
section.readmore .bookslist .col{ max-width: 240px; margin: 0 auto 2rem; padding: 0 1.5rem;}
section.readmore .bookslist .col .img{ margin: 0 auto 1rem;}
section.readmore .bookslist .col .img img{ width:100%; max-width: 500px;}
section.readmore .bookslist .col .img a:hover img{opacity: 0.5; cursor: pointer;}
section.readmore .bookslist .col .text h4{ text-align: center; font-size: 0.95rem;}
section.readmore .bookslist .col .text a{color:#555; }
section.readmore .ft{ text-align: center;}
section.readmore .ft .remark{ color: #59BBEE; margin: 0 0 1rem; }

a.btn_top{ display:block; background:url(../images/btn_top.png) no-repeat; width:62px; height:75px; margin:5rem auto 0; animation: btn_top infinite 2s;
-moz-animation: btn_top infinite 2s;	/* Firefox */
-webkit-animation: btn_top infinite 2s;	/* Safari 和 Chrome */
-o-animation: btn_top infinite 2s;	/* Opera */}
a.btn_top:hover{
animation:paused;
-moz-animation:paused;	/* Firefox */
-webkit-animation:paused;	/* Safari 和 Chrome */
-o-animation:paused;	/* Opera */
}
a.btn_top:hover{ 
animation:paused;
-moz-animation:paused;	/* Firefox */
-webkit-animation:paused;	/* Safari 和 Chrome */
-o-animation:paused;	/* Opera */
}
@-webkit-keyframes btn_top /* Safari 和 Chrome */
{
0% { background-position:0px 6px}
50% {background-position:0px 0px}
100% { background-position:0px 6px}
}
@keyframes btn_top
{
0% { background-position:0px 6px}
50% {background-position:0px 0px}
100% { background-position:0px 6px}
}

@-moz-keyframes btn_top /* Firefox */
{
0% { background-position:0px 6px}
50% {background-position:0px 0px}
100% { background-position:0px 6px}
}

@-o-keyframes btn_top /* Opera */
{
0% { background-position:0px 6px}
50% {background-position:0px 0px}
100% { background-position:0px 6px}
}
a.btn_top:hover{opacity:0.6;}

footer{ background: #fff; text-align: center; padding:40px;}
footer .copyright{color:#c08732; margin: 0 0.5rem 0 0;}
footer .hd{ margin: 0 0 1.5rem;}
footer .email{ margin: 0 0.5rem 0 0; color: #555; text-decoration: underline;}
footer span{ padding: 0 0.2rem;line-height: 180%;}
footer a.btn{display:inline-block; line-height: 180%; color:#fff; padding:0 15px 0; border-radius: 30px;}
footer .web a.btn{background:#83c738;}
footer .fb a.btn{background:#4267b2;}
footer a.btn:hover{color:#fff;opacity: 0.5;}
footer .ft{ padding: 0 0 2rem;}
footer .footer_line{ background:#dadada; height: 1px;  width: 86px; margin: 0 auto; }

footer .sponsors{ }
footer .sponsors .box{ max-width:1440px; margin: 0 auto; padding: 30px 0 0; text-align: left;}
footer .sponsors .box h3{ font-size: 0.8rem; font-weight: bold; margin: 0 0 0.5rem;}
footer .sponsors .box .hd,footer .sponsors .box .ft{display: flex; flex-flow:row wrap;justify-content: center;align-items: center;margin: 0;}
footer .sponsors .box .col{margin: 0 30px 0 0;}
footer .sponsors .box .col:last-child{margin:0;}
footer .sponsors .box .col span{display:inline-block; margin: 0 1rem 1rem 0;} 
footer .sponsors .box .col img{ min-height: 25px; max-height:52px; height:2.7vw;}