/*------MOBILE FIRST------*/
/*@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);*/

body { font-size: 1.1em; font-family: "source-han-sans-traditional", "LiHei Pro  Medium", "Microsoft JhengHei", "PMingLiU", sans-serif; font-style: normal; font-weight: 200; color: #313131; }
.bar-long { height: 5px; background-color: #7cc699; width: 0; z-index: 1000; position: fixed; top: 0; left: 0; z-index: 94;}
.hide { display: none !important; }
.mbr { display: block; }
.coverLink { display: block; width: 100%; height: 100%; position: absolute; left: 0; top:0; }
span.fa { margin-left: .1rem; }
a.label { position: absolute; top:-60px;}
/*--HEADER--*/
header { position: fixed; left: 0; top: 0; width: 100%; height: 50px; padding-top: 5px; z-index: 90; background-color: #FFF; box-shadow: rgba(0,0,0,.5) 0 0 10px; display: flex; justify-content: flex-start; align-items: center; }
header .chLogo { width: 55px; padding: 0 .3rem 0 .6rem;}
header .topSlogan a { font-weight: 400; color: #094; }

/*--NAV--*/
.nav { position: fixed; right: .8rem; top: 5px; z-index: 92; width: 45px; height: 50px; display: flex; justify-content: flex-end; align-items: center; background-color: #FFF; }
.nav .hamburger { width: 85%; height: 4px; background-color: #094; text-align: center; }
.nav .hamburger:before,.nav .hamburger:after { content: ""; width: 100%; height: 4px; background-color: #094; position: absolute; left: 0; }
.nav .hamburger:before { top:10px; }
.nav .hamburger:after { bottom:10px; }
.nav .hamburger .text { display: none; }

/*--MENU--*/
.menu { position: fixed; left: 0; top: -100%; width: 100%; height: 100%; overflow-y: auto; z-index: 85; background-color: #fff; line-height: 1.4; }
.menu.show { top: 0; }
.menu a,.menu span.submenu { position: relative; display: block; color: #313131; padding:1rem 1.3rem; border-bottom: 1px solid #ddd; }
.menu a:before,.menu a:after { content: ""; width: 12px; height: 1px; background-color: #888; position: absolute; right: .8rem; top:50%; margin-top: -4px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.menu a:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: 4px;}
.menu span.submenu:before,.menu span.submenu:after { content: ""; width: 12px; height: 1px; background-color: #888; position: absolute; right: .8rem; top:50%; margin-top: -4px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: 1px;}
.menu span.submenu:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-right: 8px;}
.menu span.check:before,.menu span.check:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -1px;}
.menu span.check:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.menu > ul { padding-top: 60px; }
.menu > ul > li > ul { border-bottom: 3px solid #ddd; display: none; }
.menu > ul > li > ul > li { position: relative; background-color: #fffeeb; }
.menu > ul > li > ul > li:before { content: ""; position: absolute; left: 1rem; top: 26px; background-color: #888; width: 6px; height: 6px; -webkit-border-radius: 6px; border-radius: 6px;}
.menu > ul > li > ul > li > a { padding-left: 1.8rem; }
.menu > ul > li > ul > li > ul { display: flex; }
.menu > ul > li > ul > li > ul > li { flex: 0 0 50%; }
.menu > ul > li > ul > li > ul > li:first-child { border-right: 1px dotted #ddd; }
.menu > ul > li > ul > li > ul > li a { background-color: #ee8723; color: #FFF; padding: 1rem 0; text-align: center; }
.menu > ul > li > ul > li > ul > li a:before,.menu > ul > li > ul > li > ul > li a:after { display: none; }
.menu > ul > li > ul > li .submenu { padding-left: 1.7rem; }
/*.menu > ul > li:nth-child(4) { display: none; }*/

/*--MENU close--*/
.menuClose { position: fixed; right: .5rem; top: 5px; width: 50px; height: 50px; background-color: #FFF; display: none; z-index: 95;}
.menuClose:before, .menuClose:after { content: ""; position: absolute; top:24px; left: 8px; width: 75%; height: 4px; background-color: #094; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.menuClose:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

/*--MAIN--*/
main { padding-top: 55px; width: 100%; overflow-x: hidden; }
.content { padding: 0 1.4rem; }
.sharesBox { display: flex; align-items: flex-start; padding-left: 1.4rem; }
.sharesBox > div { margin-right: .5rem; }
.sharesBox > div:first-child { top:-9px; }
/*--ARTICLE--*/
article,section.max { max-width: 1180px; margin:auto; line-height: 1.8; }
article p { margin-bottom: .8rem; letter-spacing: .01rem;}

/*--FOOTER--*/
footer { border-top: 1px solid #e8e8e8; padding: 1.4rem; padding-bottom: 65px; text-align: center; color: #666; font-size: 16px; font-size: .889rem; line-height: 1.8;}
footer .links { display: flex; flex-wrap: wrap; justify-content: center;}
footer .links li { border-right: 1px dotted #ccc; padding:0 10px; line-height: 1.4; margin-bottom: .5rem;}
footer .links li:last-child { border-right: none; }
footer .links a { position: relative; color: #636261;}
footer .links a:after { content: ""; width: 0; height: 1px; position: absolute; left: 50%; bottom:-3px; background-color: #f08300; transition: all .3s; }
footer .links a:hover:after { width: 100%; left: 0; }
footer .editors { display: flex; justify-content: center; flex-wrap: wrap; }
footer .editors > li { margin: 0 .5rem; }
.goTop { background-color: rgba(132,132,132,.7); background-image: url(../images/top.png); background-repeat: no-repeat; -webkit-background-size: 23px; background-size: 23px; background-position: center center; width: 45px; height: 45px; position: fixed; right: 1rem; bottom: 3.8rem; z-index: 80; }
.fixShares { position: fixed; left: 0; bottom: 0; z-index: 82; width: 100%; height: 45px; box-shadow: rgba(0,0,0,.5) 0 0 10px; display: flex; align-items: center; font-size: .9rem;}
.fixShares > div { flex: 0 0 33%; line-height: 45px; text-align: center; background-color: rgba(255,255,255,.95);}
.fixShares > div a { display: block;}
.fixShares > div:hover {  background-color: rgba(255,255,255,.8);}
.fixShares img { width: 25px; display: inline-block; vertical-align: middle; margin-right: .3rem; }
.fixShares .fb a { color: #3b579d;}
.fixShares .fb img { margin-bottom: 2px; }
.fixShares .line a { color: #00c300; }
.fixShares .linefriend a { color: #FFF; }
.fixShares > div.linefriend { flex:0 0 34%; background-color: rgba(0,195,0,.95); }
.fixShares > div.linefriend:hover {  background-color: rgba(0,195,0,.8);}

/*RWD Youtube 以及 Vimeo*/
.videoIframeBox { max-width: 720px; margin: auto; margin-bottom: 1rem; }
.video-container { position:relative; padding-bottom:48.5%; padding-top:30px;height:0;overflow:hidden; }
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%;}

/*大於768時-75%*/
@media screen and (min-width: 768px){
	body { font-size: 1.2rem;}
	.mbr { display: inline; margin-left: .4em; }
	.sharesBox > div:first-child { top:-9px; }
	.fixShares { display: none; }
	.mobileonly { display: none !important; }
	.video-container { padding-bottom:53.5%;}
}