@import url(//fonts.googleapis.com/earlyaccess/cwtexhei.css);
/*font-family: 'cwTeXHei', sans-serif*/

@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css); 
/*font-family: 'Noto Sans TC', sans-serif;*/
@import url(//fonts.googleapis.com/css?family=Droid+Sans:400,700); 
body {font: 0.9em/1.4em 'Noto Sans TC', sans-serif; color:#000; overflow-x: hidden; overflow-y:scroll; background-color:#fff;} 
html {-webkit-font-smoothing: antialiased;}
a {color:#000; text-decoration: none;transition:0.5s ease;transition-property:all;}
a:hover{text-decoration: none;opacity: 0.5}
input::-webkit-input-placeholder { padding-top: 8px;}

p { font:200 16px/1.7em 'Noto Sans TC', sans-serif;}
h1 { font:500 27px/1.5em 'Noto Sans TC', sans-serif;}
h2 { font:500 18px/1.4em 'Noto Sans TC', sans-serif;}
h3 { font:400 16px/1.4em 'Noto Sans TC', sans-serif;}
h4 { font:200 12px/1.4em 'Noto Sans TC', sans-serif;}
h5 { font-size:0.9em; line-height: 2em;}
.fa.fa-chevron-down{    font-size: 10px;    margin-left: 6px;}
.colour_333 { color:#333}
.colour_9C0002 { color:#9C0002}
.colour_FF0000 { color:#FF0000}
.weight600{ font-weight:600}
.text-center {text-align:center}
.bgcolor_eee { background-color: #eee} 
.bgcolor_ddd { background-color: #ddd} 
.inner_top.pt40{padding-top:40px;}
.slide_content{cursor:pointer;}
/*all*/
.space_01{ float:left;width: 100%; height: 40px}
.space_02{ float:left;width: 100%; height: 20px}
.space_03{ float:left;width: 100%; height: 60px}
.space_04{ float:left;width: 100%; height: 160px}
.space_05{ float:left;width: 100%; height: 200px}
/*外層包圍*/
.pagewrap { width: 100%; margin:0 auto; }

/*header*/
.container_header01 { position:relative; float: left;width:100%; z-index: 15000 }
.container_header01in {position:relative; width:1000px; margin:0 auto;}
.header_logo {position:relative;  float:left;width: 22%; margin: 40px 0 50px 39%;  }
.header_logo a:hover{opacity: 1}
.container_header02 { display: inline; position:relative;float: left; width:100%;  }
.container_header02in {position:relative; width:1000px; margin:0 auto; }
.header_menu_con { float:left;width: 100%; padding: 0 0 12px 0; background: url("../images/line_1000_01.png") bottom left no-repeat;}

.header2_menu_con { float:left;width: 100%;       height: 50px;  float: left;  }
.header2_menu_con ul li{ float:left; padding:10px;}
.header2_menu_con ul li a{     color: #9CAAA8;        font-weight: 500;    padding: 10px;}
.header2_menu_con .menus{width: 100%; float: left;     padding: 0 0 0 19.30%; background: url("../images/lines_1000_01.png") bottom left no-repeat;z-index:999}

.header_menu01_con { float:left;  margin: 0;}
.header_menu01_text { float:left; margin:0 20px 0 20px; font:200 15px/1em 'Noto Sans TC', sans-serif; color:#9caaaa}
.header_menu01_text a { color:#9CAAA8 ;    font-weight: 500; }
.header_menu01_text_btn { float:left; margin:0 20px 0 20px; font:200 15px/1em 'Noto Sans TC', sans-serif; color:#9caaaa}
.header_menu01_text_btn a { color:#c2e76b ; }

.header_menu02_con { float:right;margin: 0 0 0 0}
.header_menu02_icon { float:right; width:20px; margin: -2px 0 0 15px }
.layui-layer-btn .layui-layer-btn0{border-color: #9caaaa !important; background-color: #9caaaa !important;}
/* fullscreen-menu overlay */
#overlay { display: none;}
/* fullscreen-menu */
#nav-icon {display: none;}

/*footer*/
.container_footer01 { position:relative; float: left; width:100%; background-color: #9caaaa}
.container_footerin {position:relative; width:1000px; margin:0 auto;}
.footer_menu {float:left; width: 50%; margin: 30px 0 0 0;}
.footer_menu_text { float:left; margin: 0 30px 0 0; font:200 14px/1em 'Noto Sans TC', sans-serif;}
.footer_menu_text a {color:#fff}
.footer_logo {float:right; width: 50%; margin: 20px 0;}
b ,strong{font-weight:bold !important;}
.homepic{width:100%;}
/*index*/
.container_section01 { position:relative; float: left; width:100%;z-index: 5000 ;    margin-top: 20px;}
.container_section01in {position:relative; width:1000px; margin:0 auto;}
.index_banner { float:left; width:100%; }
 
.container_section02 { position:relative; float: left; width:100%;z-index: 5000;  }
.container_section02in {position:relative; width:1000px; margin:0 auto 0 auto;}
.section_left { float:left; width: 68%; margin: 20px 0 0 0;}
.section_left_inner01 { margin: 3px 0 0 0;}
.section_right { float:right; width: 26%; margin: 41px 0 0 0;}
.section_right_inner01 { margin: 13px 0 0 0;}
#logos{cursor:pointer}
.hides{background:#fff;display:none;}
.hides img {width:100%}	
.comesoon{      font-weight: 100;  text-align: center;    color: #9CAAA8;    font-size: 20px;    margin-top: 200px;}
/*title*/
.contect_title_01 { float:left; width: 100%; padding: 15px 0 10px 0; background: url("../images/line_690_01.png") bottom right no-repeat;}
.contect_title_02 { float:left; width: 100%; padding: 15px 0 10px 0; background: url("../images/line_500_01.png") bottom right no-repeat;}

.contect_box_01 { float:left; width: 100%; margin: 25px 0 20px 0 }
.contect_box_01_left { float:left; width: 47%}
.contect_box_01_right { display: block; float:right; width: 47%}
.contect_box_01_pic {float:left; width: 100% }
.contect_box_01_title_01 {float:left; width: 100%;margin: 10px 0 0 0 }
.contect_box_01_title_02 {float:left; width: 100%;margin: 5px 0 0 0 }

.contect_box_02 { float:left; width: 100%; margin: 15px 0 0 0; background: url("../images/line_690_02.png") bottom right no-repeat; }
.contect_box_02_arrow {float:left;width: 1.1%; margin: 6px 0 0 0;}
.contect_box_02_title_01 {float:left; width: 95%;margin: 0 0 15px 10px }

.contect_box_03 { float:left; width: 100%; margin: 20px 0 0 0; background: url("../images/line_500_02.png") bottom right no-repeat; }
.contect_box_03_title_01 {float:left; width: 100%;margin: 0 0 5px 0 }
.contect_box_03_title_02 {float:left; width: 100%;margin: 0 0 20px 0 }

.contect_box_04 { float:left; width: 100%; margin: 30px 0 0 0; background: url("../images/line_690_02.png") bottom right no-repeat; }
.contect_box_04_title_01 {float:left; width: 100%;margin: 0 0 5px 0 }
.contect_box_04_title_02 {float:left; width: 100%;margin: 0 0 20px 0 }
.contect_box_04_contect_01 {float:left; width: 100%;margin: 0 0 30px 0 }

.contect_box_05 { float:left; width: 100%; margin: 0 0 0 0;  }
.contect_box_05_left { float:left; width: 47%}
.contect_box_05_right { float:right; width: 47%}

.contect_box_05in { float:left; width: 100%; margin: 0 0 0 0; background: url("../images/line_690_02.png") bottom right no-repeat; }
.contect_box_05_title_01 {float:left; width: 100%;margin: 20px 0 5px 0;    height: 20px;overflow: hidden; }
.contect_box_05_title_02 {float:left; width: 100%;margin: 0 0 20px 0 }

.imgshow{height:480px;background: #FFF ;    vertical-align: top;    background-repeat: no-repeat;    background-position: center center;    background-size: cover;-webkit-background-size: cover;}
/*search bar*/
.searchbar_con { float:left; width: 97%; border: 1px solid #9caaaa; }
.searchbar_icon { float:right; width: 5%;padding: 3%}
.searchbar_contect { float:left; width: 85%;}

.searchbar_contect_text01 { width:100%; font: 13px/1em 'Noto Sans TC', sans-serif; letter-spacing:0em; color:#000; padding:3%; border:0px solid #87cdcb; text-align: left; }
.searchbar_contect_text01:focus { outline:none; color:#000}

.searchbar_key {float:left; width: 100%;color: #9caaa8; margin: 5px 0 25px 0 }

/*right bar*/
.advert_box_01 {float:left; width: 100%; margin: 0 0 20px 0}
.fb_box_01 {float:left; width: 100%; margin: 0 0 20px 0}
.right_btn_01 {float:left;width: 100%;margin: 0 0 10px 0}
.right_btn_01 a {color:#fff}
.right_btnin_01 {float:left;width: 100%; font: 17px/1em 'Noto Sans TC', sans-serif; background-color: #9caaaa; text-align: center;padding: 7px 0}

/*inner*/
.inner_top {float:left; width: 100%; padding: 0 0 30px 0; background: url("../images/line_1000_02.png") bottom right no-repeat;    padding-top: 10px;}
.inner_top_left { float:left; width: 48%}
.inner_top_right { float:right; width: 48%} 

.inner_top_photo {float:left;width: 100%;text-align:center}
.inner_top_photo img{max-width:100%;max-height:300px;}
.inner_top_title_01 {float:left; width: 100%;margin: 0 0 5px 0 }
.inner_top_title_02 {float:left; width: 100%;margin: 0 0 20px 0 }
.inner_top_contect_01 {float:left; width: 100%;margin: 0 0 0 0 }
.inner_top_contect_02 {float:left; width: 100%;margin: 15px 0 0 0 }

.inner_title_01 { float:left; width: 100%; margin: 0 0 20px 0;}
.inner_title_02 { float:left; width: 100%; margin: 0 0 20px 0;}
.inner_title_03 { float:left; width: 100%; margin: 0 0 20px 0;}
.inner_contect_01 { float:left; width: 100%; margin: 0 0 20px 0;}

.inner_btn_01 {float:left;width: 20%;margin: 30px 0 0 0}
.inner_btn_01 a {color:#fff}
.inner_btnin_01 {float:left;width: 100%; font: 17px/1em 'Noto Sans TC', sans-serif; background-color: #9caaaa; text-align: center;padding: 7px 0}

.num_01 {float:left; width: 100%; margin: 30px 0 0 0}
.num_01in {float:left;}
.num_01in a {color: #9caaaa}
.num_01_contect {float:left; border:1px solid #9caaaa; padding: 5px 10px; margin: 0 5px 0 0}
.current .num_01_contect {background:#9caaaa;color:#fff}
.slue{display: block;    float: left;    margin-right: 5px; color:#9caaaa}
.readmore{color:#9ea9a8}
/*detail*/
.detail_title_01{float:left; width: 100%;margin: 0 0 5px 0 }
.detail_title_02{float:left; width: 100%;margin: 0 0 10px 0 }
.tags{background:url("../images/tag-16.gif") no-repeat left;padding-left:25px;    font-size: 13px;}
.tags a{color:#9ea9a8;margin-right:10px;}
.tags a:hover{color:#9ea9a8;opacity:1;}
.detail_title_02 h4{display:flex;float:left;line-height: 28px;}
.detail_title_02 .share{display:flex;float:right;     margin-right: 10px;}
.fb-like{display:flex;float:right; }
.fb-comments{width:100%}
.detail_photo_01{float:left; width: 100%;margin: 0 0 30px 0 }
.detail_contect_01 p ,.detail_contect_01 span ,.detail_contect_01,.detail_contect_01 u ,.detail_contect_01 ol li,.detail_contect_01 i,.detail_contect_01 ol li{font-family: 'Droid Sans';}
.detail_contect_01{float:left; width: 100%;margin: 0 0 30px 0 }
.detail_contect_01 ul li{font: 200 16px/1.7em;    text-align: justify;}
.detail_contect_01 u{text-decoration:underline;}
.detail_contect_01 i{font-style: italic !important;}
.detail_contect_01 ol{list-style-type: decimal;font: 200 16px/1.7em 'Noto Sans TC', sans-serif;}  
.detail_contect_01 ol li{ list-style-position:inside;}  
.detail_contect_01 blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
} 
.detail_contect_01 p iframe{
	max-width:100% !important;
}
.detail_contect_01 sup{    vertical-align: super;    font-size: smaller; }
.detail_contect_01 sub{    vertical-align: sub;    font-size: smaller; }
.detail_contect_01 p img{max-width:100% !important;    height: auto !important;}
.detail_icon {float:left; width: 100%;}
.detail_iconin { float:left; width: 3%; margin: 0 10px 30px 0}
#image-gallery li{  position: relative;    background: #fff;    overflow: hidden;   }
#image-gallery li figcaption{    position: absolute;  bottom: -30%;
    background: black;
    background: rgba(0,0,0,0.75);
    color: white;
    padding: 10px 20px;
    opacity: 0;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;}
#image-gallery li:hover figcaption { bottom: 5px;opacity: 1;}

/*author*/
.author_title_01{float:left; width: 100%;margin: 0 0 20px 0 }
.author_contect_01{float:left; width: 100%;margin: 0 0 0 0 }
.author_contectin_01{float:left; width: 100%;margin: 0 0 20px 0 }

.author_detail_box_01 {float:left; width: 100%;margin: 0; padding: 30px 0; background: url("../images/line_690_02.png") bottom right no-repeat;}
.author_detail_box_left {float:left; width: 15%;margin: 0 0 20px 0;}
.author_detail_box_right {float:right; width: 80%;margin: 0 0 20px 0;}

.author_detail_box_photo {float:left; width: 100%;margin: 0 0 0 0}
.author_detail_box_title_01 {float:left; width: 100%;margin: 0 0 10px 0}
.author_detail_box_contect_01 {float:left; width: 100%;margin: 0 0 0 0}

.author_detail_box_title_02 {float:left; width: 100%;margin: 20px 0 0 0}

/*other literary websites*/
.other_box_01 {float:left; width: 100%;margin: 0 0 3.5% 0}
.other_boxin_01 {float:left; width: 31%;margin: 0 3.5% 0 0}
.other_boxin_02 {float:right; width: 31%;margin: 0 0 0 0}
.homeimage{  display:block;width:100%;height:170px;background-size: contain;background-repeat: no-repeat;}
.homeimage:hover{opacity:0.5}
.homepic{display:none;}
.homeimage a{display:block;width:100%;height:200px}
.slide_content_wrap{text-align:center;}
.slide_content_wrap .title h4{font-size: 1.6rem;
    color: #fff;
    padding: 10px;
    display: inline-block;
    font-weight: bold;
    /* background: #000; */
    background-color: rgba( 0, 0, 0, 0.4 );}

/********** MEDIA QUERIES ***********************/
/* for webkit only */
@media screen and (-webkit-min-device-pixel-ratio:0) {  

} 

/* for 980px or less */
@media screen and (max-width: 1024px) {
p { font:200 1em/1.7em 'Noto Sans TC', sans-serif;}
h1 { font:500 1.7em/1.5em 'Noto Sans TC', sans-serif;}
h2 { font:500 1.2em/1.4em 'Noto Sans TC', sans-serif;}
h3 { font:400 1.1em/1.4em 'Noto Sans TC', sans-serif;}
h4 { font:200 0.85em/1.4em 'Noto Sans TC', sans-serif;}
input::-webkit-input-placeholder { padding-top: 5px;}

/*header*/

.container_header01 { position:relative; float: left;width:100%;background-color: #fff; z-index: 15000 }
.container_header01in {position:relative; width:100%; margin:0 auto;}
.header_logo {position:relative;  float:left;width: 18%; margin: 20px 0 20px 41%;  }
.container_header02 { display: none}

.homeimage{  display:block;background-size: contain;
    height: 150px;}
.homepic{display:none;}
/* fullscreen-menu overlay */
#overlay {display: -webkit-box; display: -ms-flexbox; display: flex;
  /* Overlay positioning */
  display: none;  position: absolute; left: 0;  top: 0;  width: 100%;
  /* Want a left- or right sided navigation instead? Just play around with the width! */
  /*height: 100%;*/background-color: #9caaaa;z-index: 10000;}

#overlay div {
  display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; /*height: 100vh;*/
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  -webkit-box-align: center; -ms-flex-align: center; align-items: top;}
#overlay .drop-menu-effect .submenu{display:none;}  

#overlay ul {  list-style: none; margin: 0; padding: 0; text-align: center;}
#overlay ul li {  margin:30px auto;font:300 1.2em/1em 'Noto Sans TC', sans-serif; color: #fff}
#overlay ul li a{color:#fff ; transition:0.5s ease;transition-property:all;}	
#overlay ul li a:hover {opacity: 0.5}
#overlay ul li a img {width: 4%; margin: 0 10px }
	
.overlay_menu { float:left; width: 100%; margin: 150px 0 20px 0 }
	
/* fullscreen-menu */
#nav-icon {display: block; position: relative;left:92%;top:20px; width: 45px; height: 40px;  z-index: 15000;
  /* Bring icon ontop of overlay */
  cursor: pointer;  -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out;  transition: .5s ease-in-out;}

#nav-icon span { position: absolute;  display: block; width: 100%; height: 6px; background: #000;  opacity: 1;  left: 0;
  -webkit-transform: rotate(0deg);  transform: rotate(0deg);  -webkit-transition: .25s ease-in-out;  transition: .25s ease-in-out;}

#nav-icon span:nth-child(1) {top: 0px;}
#nav-icon span:nth-child(2) {top: 15px;}
#nav-icon span:nth-child(3) {top: 30px;}
#nav-icon.animate-icon span:nth-child(1) {top: 15px; -webkit-transform: rotate(135deg); transform: rotate(135deg);height: 1px;}
#nav-icon.animate-icon span:nth-child(2) {opacity: 0; left: -60px;height: 1px;}
#nav-icon.animate-icon span:nth-child(3) {top: 15px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg);height: 1px;}

	
/*footer*/
.container_footer01 { position:relative; float: left; width:100%; background-color: #9caaaa}
.container_footerin {position:relative; width:95%; margin:0 auto;}	
.footer_menu_text { float:left; margin: 0 30px 0 0; font:200 1em/1em 'Noto Sans TC', sans-serif;}

/*index*/
.container_section01in {position:relative; width:100%; margin:0 auto;}
 
.container_section02in {position:relative; width:95%; margin:0 auto 0 auto;}
.section_left { float:left; width: 68%; margin: 20px 0 0 0;}
.section_left_inner01 { margin: 0 0 0 0