@charset "utf-8";

/****活動用****/
.blackbarnew{
    top:0;
	left:0;
	width:100%;
	height:30px;
    padding:0 10px;
	background-color:#000;
	position: fixed;
	z-index:999;
	overflow: hidden;}

.yeslogo{font-size: 12px; color: #fff; line-height: 30px; letter-spacing: 2px; float: left;}

.yeslogo i{margin-right: 8px; float: left;}

.yeslogo i img{width: 10px; margin-top: 10px;}

.yesgogo{font-size: 12px; color: #fff; line-height: 30px; letter-spacing: 2px; float: right;}

.yesyes{font-size: 15px; color: #fff; font-weight: bold; line-height: 30px; letter-spacing: 1px; margin-right: 4px;}

@media screen and (max-width:736px) {
    /*.blackbarnew{display: none;} */
}

/****活動用END****/

div.ltnheader,ol,ul {
list-style:none;
margin:0;
padding:0
}

div.ltnheader a {
text-decoration:none;
color:#000
}

div.ltnheader * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
font-family:"微軟正黑體"
}

div.ltnheader {
width:100%;
height:77px;
overflow:hidden;
color:#000;
background-color:#fff;
z-index:300;
/*border-bottom:1px solid #ddd!important;*/
position:fixed!important;
top:0!important
}

div.ltnheader div.Hcon {
min-width:1260px;
width:1260px;
height:90px;
margin:-5px auto 0
}

div.ltnheader div.Hcon .logo {
display:inline-block;
float:left;
width:157px;
height:86px;
margin:0
}

div.ltnheader div.Hcon .logo a.logo_B {
display:inline-block;
width:157px;
height:auto;
padding:10px 0 0
}

div.ltnheader div.Hcon .logo a.logo_B img {
width:157px;
height:70px
}

div.ltnheader div.Hcon .logo a.logo_S {
display:none
}

div.ltnheader ul {
display:inline-block;
float:left;
max-width:1100px;
width:1100px;
height:45px;
margin:0
}

div.ltnheader ul li {
float:left;
margin:0 0 0 14px;
position:relative
}

div.ltnheader ul li a {
line-height:45px;
width:38px;
font-size:18px;
display:inline-block
}

div.ltnheader ul li a:hover {
color:#c00
}

.headerP_high {
width:100%;
height:90px
}

div.ltnheader div.Hcon .useMobi {
height:45px;
margin:38px 0 0;
float:left
}

div.ltnheader div.Hcon .useMobi ul li img.newChannel {
width:35px;
position:absolute;
top:-10px;
left:0
}

@media screen and (max-width:1260px) {
div.ltnheader,div.ltnheader div.Hcon {
width:100%
}

div.ltnheader div.Hcon .logo {
margin:0 0 0 20px
}

div.ltnheader div.Hcon .useMobi {
height:80px;
margin:0;
width:700px
}

div.ltnheader div.Hcon .useMobi ul {
width:700px;
max-width:700px;
height:60px;
margin:20px 0 0
}

div.ltnheader div.Hcon .useMobi ul li {
position:static
}

div.ltnheader div.Hcon .useMobi ul li img.newChannel {
position:static
}

div.ltnheader div.Hcon .useMobi ul li a {
line-height:1.6;
width:38px;
font-size:17px
}
}

@media screen and (max-width:800px) {
div.ltnheader {
border-bottom:0 solid #ddd!important
}
}

@media screen and (max-width:960px) {
body#ltnRWD div.ltnheader div.Hcon ul {
width:1125px;
max-width:1125px
}

.Hcon ul {
width:700px;
max-width:700px
}
}

@media screen and (max-width:800px) {
div.ltnheader {
height:58px;
overflow-x:scroll;
overflow-y:hidden;
margin:0 0 -8px
}

div.ltnheader div.Hcon {
height:50px;
width:1275px;
margin:0!important
}

div.ltnheader div.Hcon .logo {
display:inline-block;
width:125px;
height:50px;
margin:0 auto;
float:left;
background-color:#eee
}

div.ltnheader div.Hcon .logo a.logo_B {
display:none
}

div.ltnheader div.Hcon .logo a.logo_S {
display:inline-block;
width:115px;
height:auto;
margin:7px 0 0
}

div.ltnheader div.Hcon .logo a.logo_S img {
width:115px;
margin:0 0 0 6px
}

div.ltnheader div.Hcon .useMobi {
display:inline-block;
float:left;
max-width:1150px;
width:1150px;
height:50px;
margin:-1px 0 0;
background-color:#eee
}

div.ltnheader div.Hcon .useMobi ul {
display:inline-block;
max-width:1150px;
width:1150px;
margin:0
}

div.ltnheader div.Hcon .useMobi ul li a {
line-height:54px!important
}

div.ltnheader div.Hcon .useMobi ul li img.newChannel {
display:none
}
}

.xheader {
width:100%;
border-bottom:1px solid #ddd;
position:fixed;
top:0;
left:0;
z-index:999;
background-color:#fff
}

.xheaders {
max-width:970px;
margin:0 auto;
overflow:hidden;
height:60px
}

.logo {
float:left
}

.logo img {
padding-top:2px
}

.ltngo {
float:right;
color:#666;
line-height:64px;
transition:all .3s;
font-size:16px
}

.ltngo img {
margin-left:8px
}

.ltngo:hover {
color:#000
}

@media screen and (max-width: 800px) {
.xheaders {
padding:0 16px
}
}

@media screen and (max-width: 736px) {
.xheader_ltn {
border-bottom:0 solid #ddd
}

.xheaders_ltn {
height:60px;
padding:0
}

.xheader {
border-bottom:0 solid #ddd
}

.xheaders {
height:50px
}

.ltngo {
line-height:54px
}

.logo img {
width:224px;
padding-top:4px
}
}

@media screen and (max-width: 320px) {
.xheaders {
padding:0 12px
}
}

.pad {
display:none
}

.phone {
display:none
}

.web {
display:block
}

@media screen and (max-width: 800px) {
.web {
display:none
}

.phone {
display:none
}

.pad {
display:block
}
}

@media screen and (max-width: 736px) {
.web {
display:none
}

.pad {
display:none
}

.phone {
display:block
}
}

/*menubar*/
.headerbar{width: 100%; height: 60px;background-color: #fff; position: fixed; top: 30px; z-index: 999; border-bottom: 0px solid #00a0e9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);}

.header_logo{/*width: 180px; */height: 60px; float: left;  text-align: right; padding: 0 26px;}

.icon_logo{  
    width: 34px;
    margin-right: 6px;
    margin-left: 24px;
    vertical-align: middle;
    float: left;
    margin-top: 15px;
}

.header_logo h2{
    float: left;
    font-size: 24px;
    letter-spacing: 2px;
    line-height: 64px;
    color: #1286da;
}

.menu{float: right;overflow: hidden;}

.menu > li{float:left;}

.menu > li div{  line-height: 66px;  height: 60px;  color: #666; padding: 0 32px; font-size: 18px; transition: all .3s;
    border-bottom: 2px solid #fff; }

.menu > li div:hover{ color: #1286da;}



@media screen and (max-width: 736px) {
.headerbar{top:30px;height: 44px;}

.header_logo{display: none;}
  
.menu{width: 100%;}

.menu > li{width: calc(100% / 3);border-right: 0px solid #eee;}

.menu > li div{font-size: 16px; text-align: center; line-height: 46px; height: 44px; padding: 0 0px;}
    
.menu > li span{display: none;}

}

.menu_ok {
    color: #1286da !important;
    border-bottom: 2px solid #fff !important;
}

/*menubar end*/

.work_content {
max-width:1010px;
margin:0px auto 0;
overflow:hidden;
padding:20px 20px;
background-color: #fff;
border-radius: 8px 8px 0 0;
}

.work_content_left {
width:calc(100% - 320px);
float:left
}

.work_content_right {
width:300px;
margin-left:20px;
float:right
}

@media screen and (max-width: 1260px) {
.work_content {padding:20px 16px;margin: 0px auto 0;}
}

@media screen and (max-width: 800px) {
.work_content {
padding:20px 16px;
margin:0px auto 0;
border-radius: 0;
}

.work_content_right {
width:100%
}

.work_content_left {
width:calc(100%)
}
}

@media screen and (max-width: 736px) {
.work_content {
padding:20px 16px;
margin:0px auto 0;
}
}

.work_video {
width:100%;
margin-bottom:20px
}

.work_container {
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden
}

.work_container iframe,.work_container object,.work_container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%
}

.work_news {
width:100%;
margin-bottom:20px;
position:relative
}

.work_news > h1 {
width:100%;
color:#1286da;
font-size:16px;
padding:8px 0;
border-bottom:1.4px #1286da solid;
}

/*.work_news > h1::before{
    content: "";
    width: 18px;
    height: 18px;
    float: left;
    background-image: url("../img/icon_note.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px;
    margin-top: -2px;
}*/

.work_news > h1 > a{
   float: right;
    color: #888;
    font-size: 14px;
}

/*.work_news > h1 > a:hover{color:#000;}*/

.work_news > ul > li {
padding:16px 0;
border-bottom:1px solid #ddd;
overflow:hidden;
}

.work_news > ul > li:nth-last-child(1){border-bottom:0px solid #ddd;}







.newsbox{width: 100%;overflow: hidden;/*background-color: #fff;*/}

.news_img{ width: 240px; max-height: 122px; display: flex;  justify-content: center;   align-items: center; overflow:hidden;float: left;  transition: all .3s;}




.news_font{width: calc(100% - 240px); float: left; padding: 0 12px 0 14px; color: #545454; text-align: left; line-height: 1.5; position: relative; z-index: 88;}

.news_font > h4{font-size: 20px; color: #333;  line-height: 1.3;  margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; margin-top: 0;}

.news_font > p{
    line-height: 1.4;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 0;
    font-size: 14px;
    color: #888;
    }

@media screen and (max-width: 736px) {
.news_img{max-height:none;}
.news_font{padding: 0;}
}


.detail{width:100%; overflow: hidden; margin-top: 8px;}

.detail > li{float:left;padding-right: 12px;font-size: 12px;color: #759be4;}

.viewers::before {
    content: "";
    width: 18px;
    height: 18px;
    float: left;
    background-image: url("../img/icon_eyes.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px;
    margin-top: -1px;
    margin-right: 2px;
}

.likes::before {
    content: "";
    width: 18px;
    height: 18px;
    float: left;
    background-image: url("../img/icon_like.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px;
    margin-top: -2px;
}

@media screen and (max-width: 736px) {
.news_img{width: 100%; height: auto;    margin-bottom: 8px;} 
.news_font{width: 100%;}
}


.work_news_list {
overflow:hidden;
clear:both;
padding-top:16px;
position:relative
}

.work_news_list li {
margin-bottom:10px;
color:#0099e9;
overflow:hidden;
width:100%;
line-height:1.5
}

.work_news_list li:last-child {
margin:0
}

.work_news_list li a {
font-size:16px;
color:#0099e9;
transition:all .3s
}

.work_news_list li a:hover {
color:#0080c2
}

.work_news_list li h2 {
float:left;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
max-width:100%
}

.work_news_list li h2:before {
content:"●";
margin:0 4px;
color:#0080c2
}

.work_news_list li font {
color:#a98300;
white-space:nowrap;
margin-left:22px
}

.work_news_2 {
width:100%;
margin-bottom:20px;
position:relative
}

.work_news_2 > ul {
overflow:hidden
}

.work_news_2 > ul > li {
width:calc(50% - 10px);
margin-right:20px;
float:left
}

.work_news_2 > ul > li:last-child {
margin-right:0
}

@media screen and (max-width: 800px) {
.work_news_2 {
margin-bottom:0
}
}

@media screen and (max-width: 736px) {
.work_news_2 > ul > li {
width:calc(100%);
margin-right:0
}

.work_news_list li {
overflow:auto;
text-overflow:inherit;
white-space:inherit
}

.work_news_list li font {
display:block;
font-size:16px;
margin-left:22px;
clear:both
}

.work_news_list li h2 {
width:100%;
margin-bottom:2px
}

.work_news_list li a {
font-size:18px
}
}

.work_list_2 {
width:100%;
position:relative
}

.work_list_2 > h1 {
width:100%;
background-color:#00a7bb;
color:#fff;
font-size:16px;
padding:8px
}

.work_list_2 > ul {
overflow:hidden
}

.work_list_2 > ul > li {
padding:14px 0 12px;
width:100%;
border-bottom:1px solid #ddd
}

.work_list_2 > ul > li > a img {
width:100%;
margin-bottom:8px
}

.work_list_2 > ul > li > h1 {
line-height:1.5;
margin-bottom:0;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical
}

.work_list_2 > ul > li > h1 a {
color:#333;
font-size:16px;
transition:all .3s
}

.work_list_2 > ul > li > h1 a:hover {
color:#00a7bb
}

.work_news_3 {
width:100%;
margin-bottom:20px;
position:relative
}

.work_news_3 > h1 {
width:100%;
background-color:#00a7bb;
color:#fff;
font-size:16px;
padding:8px
}

.work_news_3 > ul > li {
padding:14px 0;
border-bottom:1px solid #ddd;
overflow:hidden
}

.work_news_3 > ul > li > a img {
width:120px;
height:70px
}

.work_news_3 > ul > li > a {
float:left;
margin-right:12px
}

.work_news_3 > ul > li > h1 {
line-height:1.5;
margin-bottom:0;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
margin-top:0
}

.work_news_3 > ul > li > h1 a {
color:#333;
font-size:16px;
transition:all .3s
}

.work_news_3 > ul > li > h1 a:hover {
color:#00a7bb
}

.work_news_3 > ul > li > h2 {
line-height:1.5;
margin-bottom:0;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
margin-top:-2px
}

.work_news_3 > ul > li > h2 a {
color:#0099e9;
font-size:16px;
transition:all .3s
}

.work_news_3 > ul > li > h2 a:hover {
color:#0080c2
}
/*menubar end*/


.search_box {
width:100%;
margin-bottom:14px;
overflow:hidden;
position:relative;
}

.search_box input {
width:calc(100% - 40px);
height:40px;
line-height:40px;
border:1px solid #00968f;
border-right:0;
font-size:18px;
padding:0 8px;
background-color:#fff;
border-radius:4px 0 0 4px;
color:#333;
transition:all .3s
}

.search_box input:focus {
background-color:#fffede;
}

.search_go {
width:40px;
height:40px;
float:right;
background-image:url(../img/icon_search.png);
background-position:right;
background-repeat:no-repeat;
background-size:30px;
background-color:#00968f;
line-height:40px;
color:#fff;
font-size:20px;
font-weight:700;
padding-left:12px;
border-radius:0 4px 4px 0;
cursor:pointer;
transition: all .3s;
}









.fb_box,.good_box {
width:100%;
margin-bottom:20px;
position:relative
}

@media screen and (max-width: 800px) {
.good_box {
width:calc(32% - 10px);
float:right
}
}

@media screen and (max-width: 736px) {
.good_box {
width:100%;
float:none
}
}

.hot_work {
width:100%;
margin-bottom:20px;
position:relative
}

.hot_work > h3 {
width:100%;
color:#ff2951;
font-size:16px;
padding:8px 8px 8px 0;
border-bottom:1.4px #ff2951 solid;
}

.hot_work > h3 > a{
   float: right;
    color: #888;
    font-size: 14px;
}

/*.hot_work > h1::before {
    content: "";
    width: 18px;
    height: 18px;
    float: left;
    background-image: url("../img/icon_star.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px;
    margin-top: -2px;
    margin-right: 3px;
}*/

.hot_work > ul > li {
border-bottom:1px solid #ddd;
padding:14px 0 12px;
overflow:hidden
}

.hot_work > ul > li:nth-last-child(1){border-bottom:0px solid #ddd;}

.hot_work > ul > li:hover{background-color: #fff7fa;}

.hot_work > ul > li b {
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    font-weight: 100;
    background-color: #ff90a5;
    color: #fff;
    border-radius: 3px;
    float: left;
    margin-left: 5px;
    font-size: 14px;
}

.hot_work > ul > li div {
float:left;
width:calc(100% - 30px);
padding-left:10px
}

.hot_work > ul > li h2 {
width:100%;
font-size:16px;
line-height:1.5;
overflow:hidden;
color:#333;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
transition:all .3s
}



.hot_work > ul > li h3 {
width:90px;
font-size:14px;
line-height:1.5;
float:left;
overflow:hidden;
color:#888;
text-overflow:ellipsis;
white-space:nowrap
}

.hot_work > ul > li p {
width:calc(100% - 90px);
font-size:14px;
line-height:1.5;
float:right;
overflow:hidden;
color:#d02121;
text-align:right;
text-overflow:ellipsis;
white-space:nowrap
}

/*.hot_work > ul > li h2:hover {
color: #00968f;
}*/

@media screen and (max-width: 800px) {
.hot_work {
width:calc(68% - 10px);
float:left
}
}

@media screen and (max-width: 736px) {
.hot_work {
width:100%;
float:none
}

.hot_work > ul > li h2 {
font-size:18px
}

.hot_work > ul > li h3 {
font-size:14px;
width:100px
}

.hot_work > ul > li p {
font-size:14px;
width:calc(100% - 100px)
}
}

.la_box {
width:100%;
margin-bottom:20px;
overflow:hidden;
position:relative
}

.la_box ul {
overflow:hidden
}

.la_box li {
width:100%;
margin-bottom:17px;
overflow:hidden
}

.la_box li img {
width:100%
}

.la_box li:last-child {
margin-bottom:0
}

@media screen and (max-width: 800px) {
.la_box li {
width:calc(100% / 3);
float:left;
margin-bottom:0;
padding:0 10px
}

.la_box ul {
margin:0 -10px
}
}

@media screen and (max-width: 736px) {
.la_box li {
width:calc(100%);
float:none;
margin-bottom:17px;
padding:0
}

.la_box ul {
margin:0
}
}

.work_news_4 {
width:100%;
margin-bottom:10px;
position:relative
}

.work_news_4 > h1 {
width: 100%;
    color: #3f6abd;
    font-size: 16px;
    padding: 8px 0;
    border-bottom: 1.4px #3f6abd solid;
}

.work_news_4 > ul {
overflow:hidden
}

.work_news_4 > ul > li {
width:calc(33.3% - 10px);
margin-right:15px;
float:left;
margin-bottom:10px
}

.work_news_4 > ul > li:nth-child(3n+3) {
margin-right:0
}

.work_news_4 > ul > li > a img {
width:100%;
height:120px;
margin-bottom:8px
}

.work_news_4 > ul > li > h1 {
line-height:1.5;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
margin-top:0
}

.work_news_4 > ul > li > h1 a {
color:#333;
font-size:16px;
transition:all .3s
}

.work_news_4 > ul > li > h1 a:hover {
color:#00a7bb
}

@media screen and (max-width: 736px) {
.work_news_4 > ul > li {
width:100%;
display:none;
margin-right:0
}

.work_news_4 > ul > li:first-child {
display:block
}

.work_news_4 > ul > li > a img {
width:100%;
height:auto
}

.work_news_4 > ul > li > h1 {
-webkit-line-clamp:1
}
}

.foc_top {
width:100%;
overflow:hidden;
margin-bottom:20px;
position:relative
}

.bbslide {
width:100%;
position:relative
}

.bbslide img {
width:100%;
position: relative;
z-index: 3;
}

.bbphoto{width: 100%;overflow: hidden;height: 330px;}

.bbslidef {
    width: 100%;
    position: relative;
    background-color: #eee;
    z-index: 88;
    padding: 12px 12px;
    line-height: 1.5;
    margin-top: -3px;
  }

.bbslidef h2 {
font-size:22px;
width:100%;
color:#333;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.bbslidef p {
font-size:16px;
width:100%;
color:#fff;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}



@media screen and (max-width: 980px) {


.bbphoto{height: 380px;}

}


@media screen and (max-width: 736px) {
.bbslidef {
padding:8px 16px;
}

.bbslidef h2 {
font-size:20px;
white-space:inherit;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
height: 60px;
}

.bbphoto{height: auto;}

}

.tag {
position:absolute;
top:-145px
}
@media screen and (max-width: 800px) {
.tag {
top:-110px
}
}


@media screen and (max-width: 736px) {
.tag {
top:-110px
}
}


.footer {
width:100%;
background-color:#eee;
color:#666;
padding:16px 0;
text-align:center;
font-size:15px
}

@media screen and (max-width: 736px) {
.footer {
line-height:1.5
}

.mbrs {
display:block;
margin-top:4px
}
}

/*tool*/
.tool_box{width: 100%;  margin-bottom: 20px;}
.tool_box > ul{overflow: hidden;}
.tool_box > ul > li{float: left;width: calc(50% - 4px); margin-right: 8px;}
.tool_box > ul > li:nth-last-child(1){margin-right: 0px;}

.tool_s{width: 100%;border-radius: 4px; background-color: #ffffff;transition: all .3s; overflow: hidden;  
    text-align: center;    border: 1px #3f6abd solid; height: 40px; line-height: 40px;}

.tool_s:hover{background-color:#fffede;}

.tool_s > h1{    display: inline-block;font-size: 18px;   color: #3f6abd; /*font-weight: bold;*/}

/*.tool_s:hover{border: 1px #3f6abd solid;}
.tool_s > h1:hover{color: #3f6abd;}*/

.tool_icon{ width: 20px;display: inline-block; vertical-align: middle;/* margin-right: 4px;*/position: relative;  margin-top: -5px;
transition: all .3s;}


/*path*/

.path {color:#888;margin-bottom: 12px; line-height: 1.5;}

.path a{color:#888;}

.path a:hover{color:#0080c2;}

/*--------------------頁碼--------------------*/
.web0812{display: block;}

@media screen and (max-width: 736px) {
    .web0812{display: none;}
}

.job_list_nex0812 {
  padding: 0px 0;
  text-align: center;
  font-size:13px;
  margin-bottom: 20px;
  }
.job_list_nex0812 span {
  border: 1px solid #666;
  margin: 0 1px;
  padding: 5px 9px;
  text-decoration: none;
  vertical-align: middle;
  color: #ffffff;
  background-color: #666;
  }
.job_list_nex0812 a {
  border: 1px solid #666;
  color: #666;
  margin: 4px 1px;
  padding: 5px 9px;
  text-decoration: none;
  vertical-align: middle;
  height: 27px;
  display: inline-block;
  }
.job_list_nex0812 a:hover {
  border: 1px solid #666;
  color: #ffffff;
  background-color:#666;
  }

.topset {
  background-color:#666;
  } 

.job_list_nex0812 input[type="text"]{width: 80px; height: 27px; border:1px solid #666; outline: 0; margin: 0 8px; padding: 0 4px;}


.job_list_nex0812 input[type="button"]{width: 60px;height: 27px;outline: 0;background-color: #3f6abd;color: #fffdc2;border:0;margin-left: 8px;border-radius: 4px;}

/*NEWS*/
.news{width:100%;/*padding: 8px 0 0;*/}

.news h1{font-size: 24px; font-weight: bold; color: #333; margin-bottom: 10px; line-height: 1.3; transition: all .3s;}

.news > h2{font-size: 18px; font-weight: bold; color: #333; margin-bottom: 24px; line-height: 1.5; transition: all .3s;}

.news > p{ font-size: 16px; color: #333;  margin-bottom: 20px; line-height: 1.5;}

.news a{font-weight: bold; color: #333;}

.news b{font-weight: bold;}

.author{ overflow: hidden; margin-bottom: 20px;}
.author > li{float: left; font-size:14px; color: #888;line-height: 1.5; margin-right: 12px;}

.news_tool{overflow: hidden; margin-bottom: 20px;}
.news_tool > li:nth-child(1){float: left;}
.news_tool > li:nth-child(2){float: right;}

.fontsize{overflow: hidden;}
.fontsize > li{margin-right: 8px;float: left;}
.fontsize > li:nth-last-child(1){margin-right: 0;}

.size{width: 25px; height: 25px; line-height: 25px; border-radius: 4px; border: 1px #888 solid; font-size: 14px;color: #888;padding: 0 4px;}
.size_ok{background-color: #666;color: #FFFFFF;border: 1px #666 solid;}

.share{overflow: hidden; text-align: right;}
.share > li{display: inline-block; margin-right: 5px;}
.share > li:nth-last-child(1){margin-right: 0;}
.share > li i{font-size:24px; }

.share_icon{position: relative;}

.imgbox{ width: 100%; margin-bottom: 20px;}
.imgbox > p{color: #888;line-height: 1.5;font-size: 14px; margin-top: 4px;}


.videobox{margin-bottom:20px;}
.videobox > p{color: #888;line-height: 1.5;font-size: 14px; margin-top: 4px;}

.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video iframe, .videobox object, .videobox embed {
position: absolute;
top: 0;left: 0;
width: 100%;
height: 100%;}

/*worklist*/
.worklist{width: 100%;  margin-bottom: 20px; position: relative;}

.worklist > h3 {
width:100%;
color:#ff2951;
font-size:16px;
padding:8px 0;
border-bottom:1.4px #ff2951 solid;
}

/*.worklist > h1::before{
    content: "";
    width: 18px;
    height: 18px;
    float: left;
    background-image: url("../img/icon_note2.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px;
    margin-top: -2px;
}*/

.worklist > h3 > a{
   float: right;
    color: #888;
    font-size: 14px;
}

.worklist > li{padding: 8px 0;}

.worksbox{overflow: hidden;}
.worksbox > li{padding: 8px 0; border-bottom: 1px solid #ddd; line-height: 1.5;}
.worksbox > li:nth-last-child(1){border-bottom: 0px solid #ddd;}

.worksbox > li:hover{background-color: #fff7fa;}

.works{width: 100%; overflow: hidden;}
.works > li{float: left; font-size: 16px; color: #333;}
.works > li:nth-child(1){float: left;width: 60%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #333;}
.works > li:nth-child(2){float: left;width: 40%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #888;}

@media screen and (max-width: 736px) {
.works > li:nth-child(1){width: 100%;}
.works > li:nth-child(2){width: 100%;font-size: 14px;}  
}

/*book*/
.bookinfo{width: 100%;overflow: hidden;margin-bottom: 20px; border: 1px #ddd solid;     padding: 16px 16px 32px;}
.bookinfo_ok{  padding: 16px;}
.bookinfo_img{width: 180px;  overflow: hidden; float: left;  transition: all .3s;}
.bookinfo_font { width: calc(100% - 180px);  float: left;  padding-left:20px;  color: #545454;  text-align: left;  line-height: 1.5;
    position: relative;   z-index: 88;}

.bookinfo_font > h2{font-size: 18px; font-weight: bold; color: #333;   margin-bottom: 4px;  line-height: 1.5; transition: all .3s;}
.bookinfo_font > p{font-size: 14px;color: #888; margin-bottom: 8px;}

.foncemore {  font-size: 14px;  color: #3f6abd; position: absolute;  right: 0;text-align: right;}
/*.foncemore:hover{color:#0080c2;}*/

@media screen and (max-width:736px) {
    .bookinfo_img{display: none;}  
    .bookinfo_font { width: 100%; }
}

@media screen and (max-width:980px) {
.newsad{width: 100%;}
}

/*follow*/

.follow{width:100%;background: #f5f5f5;padding: 20px 12px 14px; text-align: center;    clear: both;transition: all .3s;}

.follow > h2{font-size:18px; color:#3f6abd; margin-bottom: 8px; font-weight: bold;}

.email{width:100%; overflow: hidden; margin-bottom: 14px;}

.email > input{width: calc(100% - 48px);height: 40px;line-height: 40px;border: 1px solid #3f6abd;font-size: 18px;padding: 0 8px;background-color: #fff;border-radius: 4px 0 0 4px;color: #333;transition: all .3s;float: left;}

.email > input:focus{background-color:#fffede;}

.send{
    width:48px;
    height:40px;
    line-height:40px;
    padding:0 8px;
    background:#3f6abd;
    color:#FFFFFF;
    display: inline-block;
    float: right;
    border-radius: 0 4px 4px 0;
    }



.socialmedia{overflow:hidden; display: inline-block; }

.socialmedia > li{display: inline-block; margin-right: 8px;  float: left;}

.followicon{position: relative; transition: all .3s;}

/*查看更多*/
.work_news_updown{width: 100%;
    margin-bottom: 20px;
    position: relative;}

.work_news_updown > h1 {
width:100%;
color:#3f6abd;
font-size:16px;
padding:8px 0;
border-bottom:1.4px #3f6abd solid;
margin-bottom: 20px;
}

.work_news_updown > h1::before{
    content: "";
    width: 18px;
    height: 18px;
    float: left;
    background-image: url("../img/icon_note.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px;
    margin-top: -2px;
}

.work_news_updown > h1 > a{
   float: right;
    color: #888;
    font-size: 14px;
}

.work_news_updown > ul{overflow: hidden;}
.work_news_updown > ul > li{width: calc(100% / 3 - 12px); margin-right: 18px;float: left;  vertical-align: top;margin-bottom: 20px;}
.work_news_updown > ul > li:nth-child(3n+3){margin-right: 0;}

.work_news_updown > ul > li > img{width: 100%;   max-height: 280px;   display: flex;   justify-content: center;  align-items: center;
      overflow:hidden;}

.news_font02{padding: 8px 0;}

.news_font02 > h1{    font-size: 16px;
    color: #333;
    line-height: 1.3;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 0;
}

.news_font02 > p{line-height: 1.4;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 0;
    font-size: 14px;
    color: #888;}

.news_img02{height: 200px;overflow: hidden;}

@media screen and (max-width: 736px) {
.work_news_updown > ul > li{width:100%;margin:0 0 20px;}
.work_news_updown > ul > li:nth-last-child(1){ margin-bottom:0; }
.news_font02 > h1{font-size: 20px;}
}

/*hashtag*/

.hashtag{width: 100%; margin-bottom: 20px;}
.hashtag > ul{overflow:hidden;}
.hashtag > ul > li{float:left;margin-right: 12px;line-height: 1.5;background-color: #ecf8ff;margin-bottom: 8px;padding: 2px 6px;   
    border-radius: 4px;}
.hashtag > ul > li >a{font-weight: normal;color: #888;}
.hashtag > ul > li >a:hover{color: #0080c2;}


/*likes*/
.likeshare{overflow: hidden; margin-bottom: 12px;}
.likeshare > li{float: left;}
.likeshare > li:nth-child(1){width: calc(100% - 80px);/* line-height: 1.5; */color:#888;font-size: 18px;}
.likeshare > li:nth-child(2){width: 80px;}

.ilike{color:#888;font-size: 18px;transition: all .3s; line-height: 1.5;margin-right: 4px;}

.ilike::before {
    content: "";
    width: 25px;
    height: 25px;
    float: left;
    background-image:url("../img/share_heart01.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 25px;
    margin-top: 1px;
    margin-right: 4px;
}

/*default*/
.default{width:100%;overflow: hidden;/*border: 1px #eee solid;*/margin-bottom:20px;text-align: center; }
.default_img{width: 300px;margin: 0 auto; transition: all .3s;}
.default_font > h1{color: #888; font-size: 20px; line-height: 1.5;}




.ddbg{margin-top: 90px; position: relative; z-index: -1; background-color:#fff; width: 100%; margin-bottom: -30px; text-align: center; padding:44px 0  84px; line-height: 1.5;
background-image: url(../img/bg01.jpg); background-repeat: no-repeat; background-size: cover; background-position:center;
/*text-shadow: 0 0 3px rgba(100,0,0,0.5);*/}

.ddbg h2{font-size: 60px; color: #fff; margin-bottom: 4px; position: relative; z-index: 2; letter-spacing: 4px;}
.ddbg p{font-size: 20px; color: #eee; position: relative; z-index: 2;}



.ddbg:after{content: ""; position: absolute; top:0; right: 0; bottom: 0; left: 0; background-color: rgba(18,134,218,0.8); z-index: 0;}



@media screen and (max-width: 736px) {
.ddbg {
margin-top: 74px;
margin-bottom: 0px;
padding:18px 20px 22px;
}

.ddbg h2{font-size: 30px;  margin-bottom: 4px;}
.ddbg p{font-size: 16px; }

.ddbg span{display: block;}

}





.work_content2 {
max-width:1010px;
margin:90px auto 0;
overflow:hidden;
padding:30px 20px 20px;
background-color: #fff;

}



@media screen and (max-width: 1260px) {
.work_content2 {padding:20px 16px;margin: 90px auto 0;}
}

@media screen and (max-width: 800px) {
.work_content2 {
padding:30px 16px 20px;
margin:90px auto 0
}


}

@media screen and (max-width: 736px) {
.work_content2 {
padding:20px 16px;
margin:74px auto 0;
}
}



body{background-color: #ebf6ff;}



.work_news2 {
width:100%;
margin-bottom:10px;
position:relative
}

.work_news2 > h3 {
width:100%;
color:#1286da;
font-size:16px;
padding:8px 0;
border-bottom:1.4px #1286da solid;
margin-bottom: 10px;
}

.work_news2 > h3 > a{
   float: right;
    color: #888;
    font-size: 14px;
}

.work_news2 > ul{overflow: hidden;}

.work_news2 > ul > li {padding:0px 0 0;border-bottom:0px solid #ddd;overflow:hidden;float: left;width: calc(50% - 8px);margin-right: 16px;min-height: 246px;vertical-align: top;margin-bottom: 10px;}

.work_news2 > ul > li:nth-last-child(1){border-bottom:0px solid #ddd;}

.work_news2 > ul > li:nth-child(2n+2){ margin-right: 0 }

.newsbox2{width: 100%;overflow: hidden;/*background-color: #fff;*/}

.news_img2{ width: 100%; height: 180px; display: flex;  justify-content: center;   align-items: center; overflow:hidden; transition: all .3s; margin-bottom:8px;}


.news_font2{width: calc(100%); padding: 0px 0 0px; color: #545454; text-align: left; line-height: 1.5; position: relative; z-index: 88;}

.news_font2 > h4{font-size: 20px; color: #333;  line-height: 1.3;   margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; margin-top: 0;}

.news_font2 > p{
    line-height: 1.4;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 0;
    font-size: 14px;
    color: #888;
    }


    @media screen and (max-width: 980px) {

.work_news2 > h3 {
margin-bottom: 16px;
}
.news_font2{padding: 0;}

.news_img2{margin-bottom: 8px;}

.work_news2 > ul > li{margin-bottom: 16px;min-height: 244px;}

}

    @media screen and (max-width: 736px) {


.work_news2 > ul > li{margin-bottom: 16px;min-height: inherit;width: 100%;border-bottom:1px solid #ddd;padding-bottom: 8px;}

.work_news2{margin-bottom:0;}

.news_img2{height: inherit;}


}

/*seemore*/
.seemore{width: 100%;font-size: 18px;color: #1286da;height: 50px;/* font-weight: bold; */text-align: center;    margin-bottom: 20px;}

.seemore p {
    /* padding: 8px; */
    border-radius: 4px;
    display: inline-block;
    width: 100%;
    border: 1px solid #1286da;
    letter-spacing: 4px;
    text-indent: 4px;
    /* background-color: #0fb3b9; */
    transition: all .3s;
    color: #1286da;
    height: 36px;
    line-height: 36px;
}