@import url('icomoon/style.css');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/earlyaccess/cwtexkai.css');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('reset.css');
/*========================================*/

body,html{font-family:'Open Sans',"微軟正黑體",serif;font-size:1rem;line-height:1;position:relative;}
a{transition:all linear 0.2s;color:rgba(39,57,71,1);text-decoration:none;}
a:hover,a:focus{color:rgba(39,57,71,.8);}
body{background: transparent url('../img/bg-white.png') repeat-x 0 0;background-size:100% 270px; line-height: inherit;}
.content{ display: block; width:1024px;margin:0 auto;position:relative;/*z-index: 0;*/}
.content:after, ul.item:after, .logoImg a:after{content: "";display: block;height: 0;clear: both;visibility: hidden;}
.content:nth-child(1):before{position:absolute;z-index:0;left:0;top:0;content:"";width:230px;height:100%;background: #273947;}
.contentB{position:relative}
.sticky{ position: relative;}
.sticky:after{content: "";display: block;height: 0;clear: both;visibility: hidden;}
.sticky-wrap{position:absolute; width: 46px; right: -60px;}
.sticky .save{ position: fixed; top: 40%; margin-top: -23px; display: block; width: 46px; height: 46px; background: transparent url(../../assets/img/icon-save.png) no-repeat 0 0; background-size: 90% 90%; text-indent: -9999px; z-index: 99;}
.sticky .save:hover{ opacity:.75; }
.topContent{/*height: 125px;*/position:relative; }
.leftInfo{float:left;width:230px;color:#FFF;position:relative; padding: 15px 0 0 0;}
.footer .leftInfo{width:150px;}
.rightContent{width:calc(100% - 160px);float:right;padding:5px 0 5px 5px;}
.topContent >.leftInfo{text-align:center;padding:.5rem 0 0 0;}
.topContent >.leftInfo i{font-size:7.1875rem;}
.topContent >.leftInfo.ff{padding:30px 0 0 0;}
.topContent >.leftInfo.ff i{font-size:6.875rem;}
.topContent >.leftInfo span{font-size:1.25rem;font-weight:600;}
.topContent >.leftInfo .mon{font-size:1rem;font-weight:normal; margin-right:1.25rem; position: absolute;right: 0;bottom: -.75rem;}
.spTxt{font-family:'cwTeXKai';}
.rightTitle{padding:0 0;float:left; position: relative;}
.rightTitle h1{ position: relative; color:rgba(39,57,71,.8); font-weight: bold; font-size: 5rem; letter-spacing: 1rem; margin: 1.5rem 0 0 .5rem;}
.rightTitle.ff  h1{margin: 2.5rem 0 0 .5rem;}
.rightTitle h1:before{ display: block; position: absolute;left: -.5rem;bottom: -37px; content: "LANYANG MUSEUM E-NEWSLETTER"; z-index: 3; width:23rem;height:30px; line-height: 30px; background: #7e90a1; font-size: 1.25rem; font-family: Candara; font-weight: normal;white-space: nowrap; padding-left: 0rem; text-align: center; letter-spacing: 0px; color: #fff; }
.rightTitle .engTxt{ display: none; }
.logoImg { float: right;padding-top: 1.125rem;}
.topContent a>img{width:195px;height:auto;float:right; margin-bottom: 10px;}
.yearTxt{color:#626262;padding:1px 0 0 10px; position: relative;}
.yearTxt>ul{margin:1.75rem 105px 0 0; padding: 0;}
.yearTxt>ul.ff{margin:2.75rem 105px 0 0; padding: 0;}
.yearTxt>ul:after{content: "";display: block;height: 0;clear: both;visibility: hidden;}
.yearTxt>ul>li{list-style-type: none; float: left; }
.yearTxt>ul>li:nth-child(n+2){margin-left: 1.5rem;}
.yearTxt>ul>li>a{color: #333333; font-size: .875rem; font-weight: bold;}
.yearTxt>ul>li>a:hover{text-decoration: underline;}


.banner{display: block;padding: 2.5rem 20px 0 20px; margin-bottom: 10px; position: relative;/*z-index: -5;*/background:transparent url('../img/bannerImg.png') no-repeat;background-size:100% 100%;background: transparent none no-repeat;}
.banner:before{position:absolute;left:0;top:0;content:"";width:1024px;height:260px;background: #273947;;z-index: -9; min-height: 165px;}
.banner.detail:before{height:275px;}
.banner .yearTxt{position: absolute;top: -60px;right: 0; z-index: 9;}
.yearTxt b {
    float: right;
    font-size: 1.4375rem;
    text-align: left;
    padding:12px 7px 0 0;
    color: #fff;
    position: absolute;
    right: 0;
    top: 4px;
}
.yearTxt b:before {
    border-width: 0 123px 123px 0;
    border-color: transparent #7e90a1 transparent transparent;  
    right: 0;
    z-index: -1;
}
.yearTxt b:before{position: absolute;width: 0;height: 0;border-style: solid;content: "";display: block;top: 0;}
.banner .yearTxt.ff{/*top: -83px;*/}
.banner a{width:100%; display: block; z-index: 15;}
.banner img{width:100%;}
.leftCol{float:left;width:calc(100% - 280px);padding: 0 0 0 0;}
.rightCol{width:100%;position:relative;}
.leftCol+.rightCol{float:right;width:255px;color:#FFF;padding:0 0 5px 0; background-color: transparent;}

.List{clear:both;}
.List li{font-size:1.125rem;display:inline-block;padding:5px 5px 0 5px;margin:0 10px 15px 5px;position:relative;letter-spacing: 2px;}
.List li:after{position:absolute;z-index:-1;width:0;height:0;border-style:solid;border-width:0 25px 25px 0;border-color:transparent #ddd transparent transparent;content:"";display:block;top:0;right:0;}
.List li.aa:after{border-color:transparent #87a60d transparent transparent;}
.List li.bb:after{border-color:transparent #e9512c transparent transparent;}
.List li.cc:after{border-color:transparent #faac18 transparent transparent;}
.List li.dd:after{border-color:transparent #a1bcc3 transparent transparent;}
.List li.ee:after{border-color:transparent #551d42 transparent transparent;}
.List li.ff:after{border-color:transparent #a34d7a transparent transparent;}
.List li.gg:after{border-color:transparent #3c5e67 transparent transparent;}
.List li.hh:after{border-color:transparent #bd8e0c transparent transparent;}

.info {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.item{list-style-type: none; margin: 0; padding: 0;}
.item > li{width:100%; list-style-type: none; margin: 0; padding: 0;}
.item > li .itemLink{position:relative;border:1px solid #ccc;background:#fff;display:block;margin: 0 0 20px 0; top: 10px;}
.item > li+li .itemLink{margin: 20px 0; top: 0;}
.item > li.finalLink a:hover{opacity:.9;}
.item > li.finalLink a{color:#FFF; height: 170px;}
.item > li .itemLink:after{position:absolute;content:"";display:none;width:0px;height:0px;border-style:solid;border-width:0 50px 50px 0;z-index:3;right:0;top:0;border-color:transparent #000 transparent transparent;}
.item > li.finalLink .itemLink:after{display:none;}
.item > li.finalLink .info{width:calc(50% - 20px);float:left;padding:50px 0px 0 20px;line-height:1.8;}
.item > li.finalLink .info i{padding:5px 0 0 0;}
.item > li.finalLink .infoImg{width:calc(50% - 20px);float:left;line-height:170px;text-align:right;padding:0 20px 0 0;}
/*.item > li.aaa a.itemLink:after{border-color:transparent #87a60d transparent transparent;}
.item > li.bbb a.itemLink:after{border-color:transparent #e9512c transparent transparent;}
.item > li.ccc a.itemLink:after{border-color:transparent #faac18 transparent transparent;}
.item > li.ddd a.itemLink:after{border-color:transparent #a1bcc3 transparent transparent;}
.item > li.eee a.itemLink:after{border-color:transparent #551d42 transparent transparent;}
.item > li.fff a.itemLink:after{border-color:transparent #a34d7a transparent transparent;}
.item > li.ggg a.itemLink:after{border-color:transparent #3c5e67 transparent transparent;}
.item > li.hhh a.itemLink:after{border-color:transparent #bd8e0c transparent transparent;}
.item > li a.itemLink:before{position:absolute;display:block;font:17px 'icomoon'!important;color:#FFF;z-index:4;right:6px;top:6px;}
.item > li.hand a.itemLink:before{content:"\e901";}
.item > li.eye a.itemLink:before{content:"\e900";}
.item > li.mouth a.itemLink:before{content:"\e903";font:15px 'icomoon'!important;}
.item > li.tool a.itemLink:before{content:"\e904";}*/
.item li .infoTxt{width:100%;height:170px;overflow:auto; overflow:hidden;}
.item li .infoTxt+.imgInfo{height:170px;}

.leftCol .item > li .itemLink{height:170px; }
.leftCol .item > li .itemLink .readMore, .rightCol .item > li .itemLink .readMore{ width: auto; display: inline; color: #687f2e;}
.leftCol .item > li .itemLink .readMore:hover, .rightCol .item > li .itemLink .readMore:hover{ text-decoration: underline;}
.leftCol .item li .infoTxt{width:70%;float: left;}
.leftCol .item li .infoTxt+.imgInfo{width:30%;height:170px;float: right;}
.leftCol .item li.focus .infoTxt+.imgInfo{width:67.5%;height:340px;}
.leftCol .item > li.focus{ background: rgba(210,210,210,1);margin-bottom: 30px; height: 360px;}
.leftCol .item > li.focus a.itemLink{margin: 0 10px 10px 10px; padding-top: 0; width: 97%;height:340px; }
.leftCol .item li.focus .infoTxt{width: 32.5%;height:340px;}
.rightCol .item > li .itemLink{height:363px; }
.rightCol li .infoTxt{height:193px;}
.item li .infoTxt.fullInfoTxt{width:100%;background:url('../img/bg.png') no-repeat;background-position:right bottom;}
.item li .infoTxt h3{font-size:1.25rem;color:#000;font-weight:600;text-align:justify;line-height:1.2;margin:15px 30px 10px 15px;}
.item li .infoTxt h3 a{color:#000;}
.item li .infoTxt h3.a span{
    font-size: 1.5rem;
    width: 34px;
    height: 34px;
    line-height: 34px;
    display: inline-block;
    text-align: center;
    position: relative;
    margin-right: 5px;
    color: #fff;
}
.item li .infoTxt h3 a:hover{color:#87a60d; text-decoration: underline;}
.rightCol .item li .infoTxt h3{max-height: 73px; overflow:hidden;}
.item li .infoTxt.fullInfoTxt h3{margin:15px 30px 10px 15px; max-height: 73px; overflow: hidden;}
.item li .imgInfo{width:100%;overflow:hidden;height:auto;}
.item li.focus .imgInfo{width: 67.5%;float:right;height:340px;}
.item li .imgInfo img{object-fit:cover;width:100%;height:170px;object-position:center center;transform:scale(1,1);-ms-transform:scale(1,1);-moz-transform:scale(1,1);-webkit-transform:scale(1,1);-o-transform:scale(1,1);opacity:1;transition:transform 0.5s ease-in-out,opacity 0.2s;-moz-transition:-moz-transform 0.5s ease-in-out,opacity 0.2s;-webkit-transition:-webkit-transform 0.5s ease-in-out,opacity 0.2s;*/}
.item li.focus .imgInfo img{height: 340px;}
.item li .itemLink:hover .dateInfo,.item li .itemLink:hover .tagInfo{color:#333;}
.item li .itemLink:hover .imgInfo img{transform:scale(1.05,1.05);-ms-transform:scale(1.05,1.05);-moz-transform:scale(1.05,1.05);-webkit-transform:scale(1.05,1.05);-o-transform:scale(1.05,1.05);opacity:0.9;}
.spTitle{margin:0 0 15px 0;display:block;font-size:1.5rem;font-weight:600;}
.leftCol .spTitle a, .leftCol .spTitle .a{color:#273947;}
.rightCol .spTitle a{color:#f3f3f3;}
.spTitle.south a{color:#B81C2B;}
.spTitle a span, .spTitle .a span{font-size:2.5rem;width:50px;height:50px; display: inline-block;text-align:center;line-height:50px;position:relative;margin-right: 5px;}
.leftCol .spTitle a span, .leftCol .spTitle .a span, .item li .infoTxt h3.a span{color:#fff;background:#273947;}
.rightCol .spTitle a span{color:#273947;background:#f3f3f3;}
.spTitle a span:after, .spTitle .a span:after, .item li .infoTxt h3.a span:after{border-color: #273947 transparent transparent transparent;position:absolute;z-index:2;left:0px;bottom:-10px;content:"";display:block;width:0px;height:0px;border-style:solid;z-index:3;border-width:10px 10px 0 0;}
.rightCol .spTitle a span, .rightCol .spTitle .a span {background: #7e90a1;}
.rightCol .spTitle a span:after, .rightCol .spTitle .a span:after, .rightCol .item li .infoTxt h3.a span:after{border-color: #7e90a1 transparent transparent transparent;}
.leftCol .spTitle a span:after, .leftCol .spTitle .a span:after{border-color:#273947 transparent transparent transparent;}
.rightCol .spTitle a span:after{border-color:#f3f3f3 transparent transparent transparent;}
.spTitle a b{float:right;font-size:1rem;line-height:60px;}
.leftCol .spTitle a b, .leftCol .spTitle .a b{color:#273947;}
.rightCol .spTitle a b{color:#f3f3f3;}
.spTitle a:hover b, .spTitle .a:hover b{color:#737373;}
.spTitle a b i, .spTitle .a b i{margin:0 0 0 2px;}
.txtInfo {
    color: #777;
    line-height: 1.4;
    margin: 0 15px 5px 15px;
    position: relative;
}
.item>li.aa a.itemLink:after {border-color: transparent #87a60d transparent transparent;}
.item>li.hh a.itemLink:after {border-color: transparent #bd8e0c transparent transparent;}

.dateInfo{color:#666;line-height:1.5;padding:0 0 15px 0;margin:0 15px 0 15px;position:relative;}
.leftCol .infoTxt .dateInfo{max-height: 268px; overflow-y: hidden;padding: 0 0 0 0;margin: 0 0 10px 15px;}
.leftCol .item+.item .infoTxt .dateInfo{max-height: 76px; overflow-y: hidden;padding: 0 0 0 0;margin: 0 10px 10px 15px;}
.rightCol .infoTxt .dateInfo{max-height: 73px; overflow-y: hidden;padding: 0 0 0 0;margin: 0 15px 10px 15px;}
.tagInfo{color:#666;line-height:1.4;padding:0 5px 0 20px;margin:0 15px 0px 15px;position:relative; height: 24px; overflow: hidden; font-size: .813rem;}
.tagInfo:after{position:absolute;z-index:2;left:0;top:0;display:block;width:100%;height:auto;}
.tagInfo:after{content:"\f044";font: normal normal normal 13px/1 FontAwesome !important; top: 4px;}
.rightCol .tagInfo{max-height: 20px; overflow-y:hidden; }
/*.mCSB_scrollTools{width:6px;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background:#7c8a95;width:6px;border-radius:0px;}
.mCSB_scrollTools .mCSB_draggerRail{width:auto;border-radius:0px;background:#a8b1b8;}
.mCSB_inside > .mCSB_container{margin-right:0px;}*/

.rightContentB{padding:0 15px 0px 15px;width:calc(100% - 180px); margin-bottom: 30px;}
.footer{ padding-top:50px;background:url('../img/footer.png') no-repeat bottom center; background-size:contain;}
.footer .content:nth-child(1):before {background: transparent;}
.leftInfo .picB {
    text-align: center;
    padding: 20px 0px 20px 0;
    overflow: hidden;
    width: 100%;
    height: 139px;
    background: url(../img/footerLogo-dark.png) no-repeat 20px 10px;
    background-size: 110px 139px;
}
.footerBox{padding:30px 0 140px 0;display:block;width:100%;font-weight:600;color:#000;}
.footerBox a{color:#000;}
.footerBox h4 a{color:#516372;}
.footerBox a:hover{opacity:.7;}
.footerBox h4{font-size:1.25rem;margin:0 0 15px 0;text-transform:uppercase;}
.footerBox h5{font-size:1.125rem;margin:0 0 8px 0;color:#000;}
.footerBox h5 i{color:#516372;margin:0 3px 0 0;}
.footerBox p{font-size:.9375rem;}


.userBlk {
    padding: 1.25rem;
    line-height: 1.7rem;
    word-break: break-word;
    background-color: #ffffff;
}
.userBlk a{color: #007bff; display: inline; z-index: initial;}
.userBlk a:hover{ text-decoration: underline;}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin: 0 0 30px 0;
    width: 100%;
}
.video-container iframe, .video-container object, .video-container embed, .video-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.userBlk h1, .userBlk h2, .userBlk h3, .userBlk h4, .userBlk h5, .userBlk h6{
    margin-bottom: 0.5rem;
    font-family: inherit;
    font-weight: bold;
    line-height: 1.2;
    color: inherit;
}
.h1{ font-size: 2.25rem;font-weight: bold; margin-bottom: 1rem; color: #ffffff; line-height: 1.125em;}
.h1 .tagInfo {
    color: #ffffff;
    line-height: 1.5;
    padding: 12px 5px 0 20px;
    margin: 0 0 0px 20px;
    position: relative;
    font-size: .913rem;
    float: right;
}
.h1 .tagInfo:after {
    top: 16px;
    color: #ffffff;
}
.userBlk h1{font-size: 2rem;}
.userBlk h2{font-size: 1.75rem;}
.userBlk h3{font-size: 1.5rem;}
.userBlk h4{font-size: 1.25rem;}
.userBlk h5{font-size: 1rem;}
.userBlk h6{font-size: 0.875rem;}
.userBlk p{
    text-align: justify;
    text-justify: inter-word;
    text-justify: inter-ideograph;
    -ms-text-justify: inter-ideograph; /*IE9*/
    -moz-text-align-last:justify; /*Firefox*/
    -webkit-text-align-last:justify; /*Chrome*/
}
.userBlk table{ border-top: 1px solid rgba(126,144,166,.25); margin-bottom: 1.5rem; width: 100%;}
.userBlk table caption{ text-align: left; margin-bottom: .25rem; font-weight: bold; }
.userBlk table th, .userBlk table td{padding: .25rem .5rem; font-size: .875rem;}
.userBlk table th{ background-color: rgba(126,144,166,.25) ; border-bottom: 1px solid rgba(126,144,166,.25);}
.userBlk table thead th{ text-align: center; font-weight: bold;}
.userBlk table td{ border-bottom: 1px solid rgba(126,144,166,.25);}
.userBlk figure{margin-bottom: 1.5rem;}
.one-column {
    text-align: justify;
    text-justify: inter-word;
    text-justify: inter-ideograph;
    -ms-text-justify: inter-ideograph; /*IE9*/
    -moz-text-align-last:justify; /*Firefox*/
    -webkit-text-align-last:justify; /*Chrome*/
}
.two-column {
  /*padding: 1em;*/
  -moz-column-count: 2;
  -moz-column-gap: 1em;
  -webkit-column-count: 2;
  -webkit-column-gap: 1em;
  column-count: 2;
  column-gap: 2em;
    text-align: justify;
    text-justify: inter-word;
    text-justify: inter-ideograph;
    -ms-text-justify: inter-ideograph; /*IE9*/
    -moz-text-align-last:justify; /*Firefox*/
    -webkit-text-align-last:justify; /*Chrome*/
}
button, html [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
    font-family:'Open Sans',"微軟正黑體",serif;
}
.btnBlk {
    text-align: center;
    padding: 20px 0;
    position: relative;
}
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .25rem .5rem;
    font-size: 0.875em;
    line-height: 1.5;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    border-width: 1px 1px 1px 1px;
    font-size: 0.875rem;
    min-height: 27px;
}
.btnBlk .btn {min-width: 75px;}
[class*='btn-outline-'] {background-color: #ffffff;}
.btn-outline-primary {
    color: rgba(100,100,100,1);
    border-color: rgba(150,150,150,1);
}
.btn-outline-primary:hover {
    color: rgba(150,150,150,0.6);
    background-color: rgba(230,230,230,0.6);
    border-color: rgba(150,150,150,0.6);
}