@import url('https://fonts.googleapis.com/css?family=Noto+Serif+TC:700');
/* item */
.item { margin-bottom: 35px; }

/* sm-title */
.sm-title { overflow: hidden; margin-bottom: 15px; background: url(/images/01/index/line.png) repeat-x 50%; }
.sm-title span { padding-right: 3px; background: #fff; font-weight: bold; font-size: 30px; font-family: 'Noto Serif TC', serif; color: #21a1c4; }
.sm-title a { margin-top: 9px; padding: 5px 20px; float: right; background: #fff; border: 1px #21a1c4 solid; border-radius: 30px; -webkit-border-radius: 30px; -mos-border-radius: 30px; font-size: 16px; color: #21a1c4; }

/* ItemAdv */
.ItemAdv {text-align: center;margin-top: 70px;}
.ItemAdv a.photo { display: inline-block; }

/* newsBox */
#newsBox .bd { height: 361px; margin-right: 0; }
#newsBox .bd ul li { position: relative; transition: none; }
#newsBox .bd ul li b { position: absolute; padding: 5px 10px 5px 10px; display: block; background: #3B9ABD; top: 15px; left: 15px; }
#newsBox .bd ul li b a { color: #fff; }
#newsBox .bd ul li a img { height: 360px; }
#newsBox .hd { width: calc((100% + 15px) / 2); }
#newsBox .hd ul li { border: 1px #F0F0F0 solid; border-bottom: 0; }
#newsBox .hd ul li:last-child  { border-bottom: 1px #F0F0F0 solid; }
#newsBox .hd ul li a { padding: 0 15px; height: 71px; border-left: 10px rgba(59, 154, 189, 0.5) solid; color: #464545; font-size: 17px; line-height: 71px; -webkit-line-clamp: 1; }
#newsBox .hd ul li.on a { background: -webkit-gradient(linear,left top,right bottom,color-stop(0,rgba(0,0,0,.15)),color-stop(1,rgba(0,0,0,0))); }

/* voteBox */
#voteBox { float: right; width: calc(100% - 352px); }
#voteBox a.photo { position: relative; }
#voteBox a.photo b { height: 50px; width: 100%; position: absolute; background: rgba(0, 0, 0, 0.6); display: block; text-align: center; color: #fff; font-size: 18px; line-height: 50px; bottom: 0; }

/* voteAdv */
#voteAdv {margin-left: 15px;margin-right: 0;float: right;width: 336px;height: 280px;margin-top: 10px;}
#voteAdv a.photo , #doctorBox .ItemAdv a.photo { display: block; }

/* videoBox */
#videoBox h4 a.text-clamp { margin: 10px 0; height: 47px; font-size: 17px; font-weight: normal; color: #444; -webkit-line-clamp: 2; }

/* doctorBox */ 
#doctorBox .bxslider > div { position: relative; }
#doctorBox .bxslider > div a.photo { position: relative; background-size: auto 100%; background-position: 90% 50%; z-index: 2; }
#doctorBox .bxslider > div .info { position: absolute; padding: 80px; top: 0; z-index: 1; }
#doctorBox .bxslider > div .info p { font-family: 'Noto Sans TC', sans-serif; font-size: 19px; }
#doctorBox .bxslider > div .info p.doctor { margin: 3px 0; }
#doctorBox .bxslider > div .info p.doctor font { margin-right: 10px; font-family: 'Noto Serif TC', serif; font-weight: bold; font-size: 38px; }
#doctorBox .slick-prev ,
#doctorBox .slick-next { background-image: url(/images/01/index/scrrow01.png); background-repeat: no-repeat; background-position: 50% 50%; display: block; left: 0; width: 32px; height: 28px; z-index: 99; opacity: 0.3; }
#doctorBox .slick-next { background-image: url(/images/01/index/scrrow02.png); left:initial; right:0; }
#doctorBox .slick-prev:before , #doctorBox .slick-next:before { display: none; }

/* talkBox */
#talkBox { margin-bottom: 20px; }
#talkBox ul li { overflow: hidden; padding: 10px; border-bottom: 1px #ccc solid; }
#talkBox .newslist ul li{padding: 0px;}
#talkBox .newslist .sm-title{
    margin-bottom: 5px;
}
#talkBox ul li:last-child { border-bottom-color: transparent; }
#talkBox ul li b { padding: 2px 10px 2px 10px; float: left; border: 1px solid #3B9ABD; color: #3B9ABD; vertical-align: middle; }
#talkBox ul li a.text-clamp {margin-left: 20px;float: right;width: calc(100% - 90px);display: -webkit-box;font-size: 17px;color: #444;line-height: 40px;vertical-align: middle;-webkit-line-clamp: 1;}
#talkBox .forumlist { margin-bottom: 35px; }
#talkBox .newslist ul li b {border: 0;width: 45px;}

/* newTextBox */
#newTextBox ul li { overflow: hidden; margin: 10px 0; }
#newTextBox ul li >div , .mobelnews >.typeL ul li >div {  position: relative; float: left; width: 49%; }
#newTextBox ul li >div font , .mobelnews >.typeL ul li >div font { position: absolute; padding: 5px 10px 5px 10px; display: block; background: #3B9ABD; bottom: 5px; left: 5px; }
#newTextBox ul li >div font a , .mobelnews >.typeL ul li >div font a { color: #fff; }
#newTextBox ul li h4 , .mobelnews >.typeL ul li h4 { float: right; width: calc(51% - 10px); }
#newTextBox ul li h4 b , .mobelnews >.typeL ul li h4 b { padding: 30px 0 5px; max-height: 44px; border-bottom: 1px #ccc solid; font-size: 18px; color: #666; -webkit-line-clamp: 2; }
#newTextBox ul li h4 font , .mobelnews >.typeL ul li h4 font { margin-top: 5px; font-weight: normal; font-size: 16px; color: #989898; -webkit-line-clamp: 2; }

/* meqna */
#meqna ul li { position: relative; margin-bottom: 51px; }
#meqna ul li a.go { position: relative; display: block; z-index: 1; }
#meqna ul li .info { position: absolute; padding-left: 120px; width: calc(100% - 120px); background: url(/images/01/index/questionyellow.png) no-repeat 0 50%; top: 0; left: 0; }
#meqna ul li:nth-child(2n) .info { background-image: url(/images/01/index/questiongreen.png); }
#meqna ul li .info h3 { padding: 15px 0 5px; height: 28px; border-bottom: 1px #ccc solid; font-size: 18px; color: #666; -webkit-line-clamp: 1; }
#meqna ul li .info p { height: 58px; font-size: 16px; color: #989898; -webkit-line-clamp: 2; }

/* searchDH */
.searchDH { margin-top: 20px; }
.searchDH a.photo { position: relative; border: 1px #444 solid; border-bottom: 0; display: block; }
.searchDH a.photo:hover { opacity: 0.7; }
.searchDH a.photo font { position: absolute; padding: 10px 0; width: calc(100% - 20px); background: rgb(0,0,0,0.6); left: 10px; bottom: 10px; }
.searchDH a b { margin: 5px 10px; height: 22px; text-align: center; font-size: 16px; -webkit-line-clamp: 1; }
.searchDH a.photo font b { color: #fff; }
.searchDH p { padding: 10px 0; border: 1px #444 solid; border-top: 0; }
.searchDH p a b { color: #444; }

/* encyclopediaBox */
#encyclopediaBox { margin-top: 20px; }
#encyclopediaBox >ul#jsonUL >li { padding-right: 5px; margin-bottom: 20px; width: calc((100% / 6) - 10px); display: inline-block; vertical-align: top; }
#encyclopediaBox >ul#jsonUL >li p { font-weight: bold; font-size: 18px; color: #444; }
#encyclopediaBox >ul#jsonUL >li p a { font-size: 18px; color: #444; }
#encyclopediaBox >ul#jsonUL >li p a i { margin-right: 5px; }
#encyclopediaBox >ul#jsonUL >li ul { margin-left: 12px; }
#encyclopediaBox >ul#jsonUL >li ul li a { color: #444; }

/* mobelnews */
.mobelnews >.typeL {  }
.mobelnews >.typeL:nth-child(2n) { background: #F4F4F4; }
.mobelnews >.typeL ul li { margin-bottom: 15px; }
.mobelnews >.typeL ul li >div , .mobelnews >.typeL ul li h4 { float: none; width: 100%; }
.mobelnews >.typeL ul li h4 b { padding: 10px 0 5px; border-bottom: 0; }
.mobelnews >.typeL ul li h4 font { max-height: 55px; font-size: 12px; line-height: 150%; -webkit-line-clamp: 3; }


@media screen and (max-width: 960px) {
	.item { margin-bottom: 0; }
	.sm-title a { display: none; }
	.mbox , .mobelnews { padding: 15px 3%; width: 94%; }
	#doctorBox , #talkBox , #mnews1 { padding-top: 0; }
	#doctorBox .slick-slider , #newsBox .bd .slick-slider , #talkBox { margin-bottom: 0; }
	.ItemAdv { margin-top: 15px; background: #fff; }
	.ItemAdv a.photo { display: block; }
	#newsBox { position: relative; padding-bottom: 0; }
	#newsBox:before { position: absolute; width: calc(3% + 1px); height: 100%; background: #fff; top: 0; right: 0; z-index: 11; content: ""; }
	#newsBox .bd { padding-bottom: 10px; float: none; width: 100%; height: auto; }
	#newsBox .bd ul li a img { height: auto; }
	#newsBox .bd ul li b { top: auto; bottom: 40px; }
	#newsBox .bd ul li p { height: 36px; -webkit-line-clamp: 1; }
	#newsBox .bd ul li p a { margin-top: 10px; display: block; font-size: 16px; color: #444; }
	#newsBox .hd , #newTextBox ul li h4 font { display: none; }
	#newsBox .slick-dots { display: none !important; bottom: -31px !important; }
	#newsBox .slick-dots li button:before { font-size: 16px !important; }
	#voteAdv { margin-left: 0; float: none; width: 94%; height: auto; display: none;}
	#voteAdv img { width: 8%; }
	#voteBox { width: 94%; }
	#videoBox ul li.col-4 { width: calc((100% - 15px) / 2); }
	#videoBox ul li.col-4:nth-child(2n) { margin-right: 0; }
	#voteBox a.photo b { height: 51px; line-height: 51px; }
	#talkBox .forumlist , #meqna , .searchDH , #encyclopediaBox { display: none; }
	#newTextBox { margin-top: 0; padding-top: 5px; }
	#newTextBox ul li >div , #newTextBox ul li h4 { float: none; width: 100%; }
	#newTextBox ul li h4 b { margin-bottom: 10px; padding: 10px 0 0; height: 20px; border-bottom: 0; -webkit-line-clamp: 1; }
	#meqna { padding-top: 0; display: block; }
	#meqna ul li { margin-bottom: 32px; }
}
@media screen and (max-width: 680px) {
	#voteBox img { display: none; }
	#voteBox a.photo b { position: relative; padding: 20px 20px 57px; width: auto; height: auto; background: #71d8d5; line-height: 170%; font-size: 28px; font-style: italic; font-family: 'Noto Serif TC', serif; bottom: auto; }
	#voteBox a.photo b:after { position: absolute; width: 100%; background: rgba(0, 0, 0, 0.6); display: block; font-family: "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow"; font-size: 18px; font-style: normal; left: 0; bottom: 0; content: "去投票"; }
}
@media screen and (max-width: 620px) {
	#doctorBox .ItemAdv a.photo{background-size: contain;}
	.ItemAdv{background: #fff;}
}
@media screen and (max-width: 580px){
	#videoBox ul li.col-4 { margin-right: 0; width: calc(100% - 15px); }
	#doctorBox .bxslider > div .info{padding: 55px 60px;}
	#doctorBox .bxslider > div .info p{font-size: 16px;}
	#doctorBox .bxslider > div .info p.doctor font{font-size: 32px;}
} 
@media screen and (max-width: 480px) {
	#doctorBox .bxslider > div .info{padding: 55px 40px;}
	#doctorBox .ItemAdv a.photo{height: 225px;}
}
@media screen and (max-width: 440px) {
	#doctorBox .bxslider > div .info p{font-size: 14px;}
	#doctorBox .bxslider > div .info p.doctor font{font-size: 28px;}
}
@media screen and (max-width: 420px) {
	#doctorBox .ItemAdv a.photo{height: 185px;}
}
@media screen and (max-width: 380px) {
	#doctorBox .bxslider > div .info p{font-size: 13px;}
	#doctorBox .bxslider > div .info p.doctor font{font-size: 26px;}
}
@media screen and (max-width: 340px) {
	#doctorBox .bxslider > div .info{padding: 30px 30px;}
}