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

body {
    box-sizing: border-box;
    font-family: "Noto Sans TC",微軟正黑體,Arial,Helvetica,heiti tc,SimHei,Microsoft JhengHei,serif;
    margin: 0;
    padding: 0;
    text-align: left;
}
table {border: 0 none;border-collapse: collapse;margin: 0;padding: 0;}  
img {border: 0 none;}
h1, h2, h3, h4, h5, h6, ul, ol, li, p, div, blockquote, cite, em, tt, dfn { font-family:"Noto Sans TC",微軟正黑體,Arial,Helvetica,heiti tc,SimHei,Microsoft JhengHei,serif; font-weight: normal;margin: 0;padding: 0;}
dfn, strong, em {font-style: normal;}
li {list-style: outside none none;}
section a { cursor: pointer; outline: medium none; font-family: "Noto Sans TC","微軟正黑體",Arial,Helvetica,heiti tc,SimHei,Microsoft JhengHei,serif; display: block; color: black;}
.centerBox a{position: relative; transform: scale(1); transition: 0.2s all;}
.centerBox a:hover{position: relative; transition: 0.2s all;}
p{ text-align: justify;}
.nobar{ overflow:hidden;}
section{ width:100%; overflow: hidden; position: relative; margin:0 auto;}
.centerBox{ width:100%; max-width:1200px; overflow: hidden; position: relative; margin:0 auto;}
.mbOnly{ display:none;} .mbHide{ display:inline-block;}

h2, #foreignAuthors h2{ width: 100%; text-align: center; padding-top: 20px; margin-bottom: 20px; z-index: 10;}
h2 img { max-width: 100%;}

/*TOP*/
.top {display: block; background-image: url("../images/bg_all01_01.jpg"); background-position: top center; height: 852px; width: 100%; overflow: hidden;}
.top h1{ position: absolute; display: block; left: 50%; z-index: 1; background-image: url("../images/h1_all.png"); width: 861px; height: 345px; margin: 450px 0px 0px -430px;  animation:h1f 3s ease-in-out infinite; animation-delay:4s}
.logo { position: absolute; display: inline-block; left: 100px; top: 0; z-index: 80;}
.top p{ position: absolute; display: inline-block; left: 48px; top: 355px;}
.kv{ position: relative; display: inline-block; float: right;}

/*CHINESE*/
.chinese{ background-image: url("../images/bg_all01_02.jpg"), url("../images/bg_all01_04.jpg"), url("../images/bg_all01_03.jpg"); background-repeat: no-repeat, no-repeat , repeat  ; background-position: center top, center bottom , center top ; position: relative;}

.cast01, .cast02, .cast03, .cast04, .cast05{ display: block; position: absolute; left: 50%;height: 500px; z-index: 2;}
.cast01{ margin:100px 0px 0px -550px; animation:ca01 4s ease-in-out infinite;}
.cast02{ margin:400px 0px 0px 370px; animation:ca02 6s ease-in-out infinite;}
.cast03{ margin:150px 0px 0px -520px;animation:ca03 7s ease-in-out infinite; }
.cast04{ margin:100px 0px 0px -850px; animation:ca04 5s ease-in-out infinite;}
.cast05{ margin:140px 0px 0px -600px; animation:ca05 11s ease-in-out infinite;}


@keyframes ca01{
    0%{margin:100px 0px 0px -550px; }
	30%{margin:100px 0px 0px -560px;}
	60%{margin:105px 0px 0px -550px;}
	100%{margin:100px 0px 0px -550px;}
}
@keyframes ca02{
    0%{margin:400px 0px 0px 370px; }
	30%{margin:405px 0px 0px 380px;}
	60%{margin:390px 0px 0px 375px;}
	100%{margin:400px 0px 0px 370px;}
}
@keyframes ca03{
    0%{margin:150px 0px 0px -520px }
	30%{margin:140px 0px 0px -510px}
	60%{margin:155px 0px 0px -525px}
	100%{margin:150px 0px 0px -520px}
}
@keyframes ca04{
    0%{margin:100px 0px 0px -850px }
	30%{margin:105px 0px 0px -860px}
	60%{margin:90px 0px 0px -855px}
	100%{margin:100px 0px 0px -850px}
}
@keyframes ca05{
    0%{margin:140px 0px 0px -600px }
	30%{margin:150px 0px 0px -605px}
	60%{margin:145px 0px 0px -595px}
	100%{margin:140px 0px 0px -600px}
}
@keyframes h1f{
    0%{}
	29%{filter: invert(0%);}
	30%{filter: invert(100%);}
	31%{filter: brightness(1)}
	32%{filter: invert(100%);}
	33%{filter: brightness(3)}
	34%{filter: invert(100%);}
	35%{filter: brightness(2)}
	36%{filter: invert(0%);}
}
.chinese span img{display: block}

.chFrame{ width: 100%; margin: 30px auto 10px; overflow: hidden; text-align: center;}
.chFrame li, .frFrame li { display: inline-block; overflow: hidden;  width: 32%; margin: 0 .5% 20px; max-width: 388px; border-radius: 15px; line-height: 0;}

.chFrame li:first-child, .frFrame li:first-child{ width: 40%; display: block; text-align: center; max-width: 490px; margin: 0 auto 20px;} 
.chFrame li:first-child .nameTag, .frFrame li:first-child .nameTag{ height: 0px; padding-bottom: 13%;}
.chFrame li img,.frFrame li img{ width: 100%;}
.chFrame li .nameTag, .frFrame li .nameTag { width: 100%; height: 0px; padding-bottom: 13%;  text-align: center; background-repeat: no-repeat; background-position: center 0%; background-size: 100% auto; transition: 0.2s all;}
.chFrame li:hover .nameTag, .frFrame li:hover .nameTag{background-position: center 100%; transition: 0.2s all;}
	.chFrame li .nameTag.chTop1name{ background-image: url("../images/name/auName-chTop1.png");}
	.chFrame li .nameTag.chTop2name{ background-image: url("../images/name/auName-chTop2.png");}
	.chFrame li .nameTag.chTop3name{ background-image: url("../images/name/auName-chTop3.png");}
	.chFrame li .nameTag.chTop4name{ background-image: url("../images/name/auName-chTop4.png");}
	.chFrame li .nameTag.chTop5name{ background-image: url("../images/name/auName-chTop5.png");}
	.chFrame li .nameTag.chTop6name{ background-image: url("../images/name/auName-chTop6.png");}
	.chFrame li .nameTag.chTop7name{ background-image: url("../images/name/auName-chTop7.png");}
	.chFrame li .nameTag.chTop8name{ background-image: url("../images/name/auName-chTop8.png");}
	.chFrame li .nameTag.chTop9name{ background-image: url("../images/name/auName-chTop9.png");}
	.chFrame li .nameTag.chTop10name{ background-image: url("../images/name/auName-chTop10.png");}
/*FOREIGN*/
.foreign{ background-image: url("../images/bg_all01_05.jpg"), url("../images/bg_all01_08.jpg"), url("../images/bg_all01_06.jpg"); background-repeat: no-repeat, no-repeat , repeat  ; background-position: center top, center bottom , center top ; position: relative;}
.frFrame{  z-index: 10; position: relative;}
	.frFrame li .nameTag.frTop1name{ background-image: url("../images/name/auName-frTop1.png");}
	.frFrame li .nameTag.frTop2name{ background-image: url("../images/name/auName-frTop2.png");}
	.frFrame li .nameTag.frTop3name{ background-image: url("../images/name/auName-frTop3.png");}
	.frFrame li .nameTag.frTop4name{ background-image: url("../images/name/auName-frTop4.png");}
	.frFrame li .nameTag.frTop5name{ background-image: url("../images/name/auName-frTop5.png");}
	.frFrame li .nameTag.frTop6name{ background-image: url("../images/name/auName-frTop6.png");}
	.frFrame li .nameTag.frTop7name{ background-image: url("../images/name/auName-frTop7.png");}
	.frFrame li .nameTag.frTop8name{ background-image: url("../images/name/auName-frTop8.png");}
	.frFrame li .nameTag.frTop9name{ background-image: url("../images/name/auName-frTop9.png");}
	.frFrame li .nameTag.frTop10name{ background-image: url("../images/name/auName-frTop10.png");}
/*PHENOM*/
.phenom{ background-image: url("../images/bg_all01_09.jpg"); background-repeat: repeat; position: relative; text-align: center; padding-bottom: 30px;}

.phenomFrame{ display: inline-block; margin-bottom: 12px; padding-bottom: 10px;  position: relative; z-index: 10;}

.phenomFrame li{width: 569px; display: inline-block; position: relative; margin: 2em 0px ;transition: all 0.2s ease-in-out;}
.phenomFrame li:hover{width: 569px; display: inline-block; position: relative; margin: 1em 0px 3em 0px; transition: all 0.2s ease-in-out;}

.phenomFrame li a, .phenomFrame li a img{ display: block; width: 100%}

/*FOLLOW*/
.follow{}
.follow h2{ padding-top: 0;}
.followFrame{ text-align: center; margin: 35px auto 30px;}
.followFrame h3{ display: inline-block; vertical-align: top;}
.followFrame li{ display: inline-block; vertical-align: top;border-right:2px solid #d6bf35; position: relative; padding: 0 15px;}
.followFrame li:last-child{ border: none;}
.followFrame li a{ padding: 54% 0 0;}
.followFrame li img { max-width: 100%;transition: 0.2s all;}
.followFrame li:hover img { transform: scale(.97);transition: 0.2s all;}
.followFrame li .flNameTag{ position: absolute; z-index: 5; top: 0; left: 0; width: 100%; height: 0; padding-bottom: 54%; background-repeat: no-repeat; background-size: 100% auto;transition: 0.2s all;}
.followFrame li .flNameTag.cmcTop1name{ background-image: url("../images/name/flName-cmcTop1.png");} 
.followFrame li:hover .flNameTag.cmcTop1name{ background-image: url("../images/name/flName-cmcTop1h.png");} 
.followFrame li .flNameTag.cmcTop2name{ background-image: url("../images/name/flName-cmcTop2.png");} 
.followFrame li:hover .flNameTag.cmcTop2name{ background-image: url("../images/name/flName-cmcTop2h.png");} 
.followFrame li .flNameTag.cmcTop3name{ background-image: url("../images/name/flName-cmcTop3.png");} 
.followFrame li:hover .flNameTag.cmcTop3name{ background-image: url("../images/name/flName-cmcTop3h.png");} 
.followFrame li .flNameTag.cmcTop4name{ background-image: url("../images/name/flName-cmcTop4.png");} 
.followFrame li:hover .flNameTag.cmcTop4name{ background-image: url("../images/name/flName-cmcTop4h.png");} 
.followFrame li .flNameTag.cmcTop5name{ background-image: url("../images/name/flName-cmcTop5.png");} 
.followFrame li:hover .flNameTag.cmcTop5name{ background-image: url("../images/name/flName-cmcTop5h.png");} 
.followFrame li .flNameTag.xcmcTop1name{ background-image: url("../images/name/flName-xcmcTop1.png");} 
.followFrame li:hover .flNameTag.xcmcTop1name{ background-image: url("../images/name/flName-xcmcTop1h.png");} 
.followFrame li .flNameTag.xcmcTop2name{ background-image: url("../images/name/flName-xcmcTop2.png");} 
.followFrame li:hover .flNameTag.xcmcTop2name{ background-image: url("../images/name/flName-xcmcTop2h.png");} 
.followFrame li .flNameTag.xcmcTop3name{ background-image: url("../images/name/flName-xcmcTop3.png");} 
.followFrame li:hover .flNameTag.xcmcTop3name{ background-image: url("../images/name/flName-xcmcTop3h.png");} 
.followFrame li .flNameTag.xcmcTop4name{ background-image: url("../images/name/flName-xcmcTop4.png");} 
.followFrame li:hover .flNameTag.xcmcTop4name{ background-image: url("../images/name/flName-xcmcTop4h.png");} 
.followFrame li .flNameTag.xcmcTop5name{ background-image: url("../images/name/flName-xcmcTop5.png");} 
.followFrame li:hover .flNameTag.xcmcTop5name{ background-image: url("../images/name/flName-xcmcTop5h.png");} 
.flgenderFrame{ width: 100%; overflow: hidden; margin: 60px auto; text-align: center;}
.flGender{ display: inline-block; width: 40%; margin: 0 1.5%; position: relative; padding-top: 48px;}
.flGender h3{ position: absolute; top: 0; left: 10%; z-index: 10;}
.genderBox{ width: 100%; border-radius: 40px; padding: 35px; position: relative; background-color: #1c1c1c;}
.genderBox li{ border-bottom: 2px solid #d6bf35; line-height: 40px;}
.genderBox li a{ color: white; padding: 8px 30px; width: 100%;}
.genderBox li a:hover{ background-color: #d6bf35;}
.genderBox li a p{ font-size: 23px; width: 100%; letter-spacing: .1em; font-weight: 500;}
.genderBox li a p span{ display: inline-block; width: 40%}
.genderBox li a:hover p{ color: #1c1c1c;}
.genderBox.man{ background-color: white; border: 1px solid #1c1c1c;} 
.genderBox.man li{ border-bottom: 2px solid #5795d0; }
.genderBox.man li a{ color: #1c1c1c;}
.genderBox.man li a:hover{ background-color: #5795d0;}
.genderBox.man li a:hover p{ color: #1c1c1c;}
.copyright {font-weight: normal; color:white; display: block; font-family: Verdana,Geneva,sans-serif; font-size: 14px; line-height: 28px; overflow: hidden; text-align: center; width: 100%; padding: 15px;background-image: url(../images/bg_all01_09.jpg);}

.scrollup { display: none; position: fixed; background-color: black; right: 35px; bottom: 35px; width: 60px; height: 60px; color: white; font-size: 25px; font-weight: 500; line-height: 60px; text-align: center; color: white; z-index: 99999; border-radius: 50%; overflow: hidden;}
.scrollup:hover{}
a.btn_awi{ width:280px; text-align: center; margin: 10px auto; display:block;}


@media screen and (max-width:1300px) {
	.top h1{width: 56%;} .top h1 img{ width:100%;}
	.kv{ width: 40%;} 
	.top p{ left: 0; top: 24vw; width: 50%;}
	.centerBox{ width: 85%; max-width: 1100px;}
	.phenomFrame article{ width: 56%; max-width: 800px;}
	.phenomFrame article h4{ padding: 10px 15px; font-size: 32px;}
	.phenomFrame li{ max-width: calc(44% / 3); height: auto;}
	.phenomFrame li p{ width: 98%; left: 1%; position: relative; margin: 10px auto 0; font-size: 14px; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2;}
	.followFrame li{ padding: 0 12px; max-width: 17%;}
	
}

@media screen and (max-width:800px) {
body {
	box-sizing: border-box;
	margin: 0;
	overflow-x: hidden;
	padding: 0;
	text-align: left;
	}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	box-sizing: border-box;
}
.top {display: block; background-image: url("../images/bg_all01_01_mo.jpg"); background-size: cover; background-position: top center; height: 0; width: 100%; padding-bottom:83.333333333333% }
.top span{display: none; }
.top span, .top h1{display: none; }
	
p{ }
section a:hover{ margin-top:0px; transform: scale(1);}
img{ max-width: 100%;}
.mbOnly{ display:inline-block;} .mbHide{ display:none;}
h2{ margin-bottom: 15px; width: 90%; margin: 10px auto; padding: 0;}
section{ width: 100%; max-width:800px;}
.centerBox{width: 100%;}
	
	.topM{ padding-top: 50px;}
	.chinese{}
	.foreign{ }
	.chFrame, .frFrame{ width: 95%; margin: 15px auto;}
	.chFrame li, .frFrame li,.chFrame li:first-child, .frFrame li:first-child{ width: 48%; margin: 0 .5% 10px; border-radius: 12px; display: inline-block;}
	
	.phenom{}
	.phenomFrame{ width: 95%; }
	.phenomFrame li{ max-width: 95%; display: block; margin: 1em auto 3em auto }
	

.scrollup {bottom: 25px;display: none;opacity: 1; position: fixed; right: 5px; text-align:center; z-index: 999;}
}