File: /www/wwwroot/ceshishi.xompoa.com/static/css/StyleSheet1.css
#dibu {
background-color: #f3f3f3;
height: auto;
width: 100%;
position: fixed;
bottom: 0;
font-size: 16px;
line-height: 15px;
color: #000;
text-align: center;
border-top: 1px solid #c3c3c3;
padding: 0.5rem 0;
}
.clear {
*zoom: 1
}
.clear:after {
content: "";
display: table;
clear: both
}
.right {
float: right
}
.center {
margin-left: auto;
margin-right: auto
}
.fwbold {
font-weight: 700
}
.fstyle_oblique {
font-style: oblique
}
.fs10pt {
font-size: 10pt !important
}
.justify {
display: block;
width: 100%;
text-align: justify
}
.textcenter {
text-align: center !important
}
.justify span {
position: relative;
top: 12px
}
.justify::before {
content: "";
display: block;
width: 100%;
margin-bottom: -12px
}
.justify::after {
content: "";
display: inline-block;
width: 100%
}
.symbol-close, .symbol-minus, .symbol-plus {
position: relative;
padding: 0;
border: none;
background-color: transparent;
cursor: pointer
}
.symbol-close::before, .symbol-close::after, .symbol-minus::before, .symbol-minus::after, .symbol-plus::before, .symbol-plus::after {
display: block;
content: "";
width: 100%;
height: 1px;
background-color: #3e3a39;
position: absolute;
top: 50%;
left: 0
}
.symbol-close::before {
transform: rotate(45deg)
}
.symbol-close::after {
transform: rotate(-45deg)
}
.symbol-minus::before {
transform: rotate(0)
}
.symbol-minus::after {
display: none
}
.symbol-plus::before {
transform: rotate(0)
}
.symbol-plus::after {
transform: rotate(90deg)
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline
}
html {
line-height: 1
}
ol, ul {
list-style: none
}
article ol {
list-style: decimal;
padding-left: 28px
}
.line {
margin-right: 3px
}
.line_add_friend {
float: left
}
.line_share {
display: inline-block;
margin-left: 3px
}
article ul.show_item {
list-style: disc;
padding-left: 28px
}
table {
border-collapse: collapse;
border-spacing: 0
}
caption, th, td {
text-align: left;
font-weight: 400;
vertical-align: middle
}
q, blockquote {
quotes: none
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none
}
a img {
border: none
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block
}
html {
height: 100%
}
body {
position: relative;
width: 100%;
margin: 0 auto;
overflow-x: hidden;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
a, .link {
display: block;
color: #3e3a39;
text-decoration: none;
font-size: 13px;
font-family: inherit;
line-height: 13px;
cursor: pointer;
border: none;
padding: 0;
background-color: transparent
}
a:hover, .link:hover {
color: #727171
}
img {
object-fit: cover
}
menu {
list-style: none
}
mark {
background-color: transparent;
border: none;
color: #ff9a00
}
button, .btn {
display: block;
text-align: center;
cursor: pointer
}
button, input, optgroup, select, textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button, [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button
}
input, .input {
box-sizing: border-box;
width: 100%;
padding: 6px;
border: none;
background-color: #fff;
line-height: 23px;
font-size: 12px;
color: #727171;
font-family: "Roboto",sans-serif;
letter-spacing: 1px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 0 1px 0 #fff;
-webkit-box-shadow: 0 0 1px 0 #fff;
box-shadow: 0 0 1px 0 #fff;
-moz-transition: box-shadow .4s;
-o-transition: box-shadow .4s;
-webkit-transition: box-shadow .4s;
transition: box-shadow .4s
}
input[type="checkbox"], .input[type="checkbox"] {
width: auto;
box-shadow: none
}
input:focus, .input:focus {
outline: none;
-moz-box-shadow: 0 0 1px 0 gray;
-webkit-box-shadow: 0 0 1px 0 gray;
box-shadow: 0 0 1px 0 gray
}
.wp320 {
text-align: center !important;
margin: 5px 0
}
.img-scale img {
position: relative;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
max-width: 100%;
height: auto
}
#cboxContent {
background-color: #fff;
margin-top: 10px
}
@media (max-width: 1024px) {
#cboxContent {
margin-top: 0
}
}
#cboxLoadedContent {
border: 5px solid #86c81e;
background-color: transparent
}
#cboxLoadingGraphic {
position: inherit;
background: none;
font: normal normal normal 14px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 48px;
text-align: center;
animation: fa-spin 2s infinite linear
}
#cboxLoadingGraphic::before {
content: "";
position: inherit;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 48px;
height: 48px;
margin: auto
}
@media (max-width: 768px) {
.slideout-menu {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 0;
width: 256px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: none
}
.cboxContent {
width: 300px !important
}
.cboxLoadedContent {
width: 300px !important
}
.slideout-panel {
position: relative;
z-index: 1
}
.slideout-open, .slideout-open body, .slideout-open .slideout-panel {
*overflow: hidden
}
.slideout-open .slideout-menu {
display: block
}
}
.menu-mobile {
display: none;
left: auto
}
.menu-mobile .title {
background-color: #fde884;
padding: 13px 15px
}
.menu-mobile ul li {
font-size: 16px;
font-weight: 700;
padding: 13px 15px;
border-bottom: 1px solid #fde884
}
.menu-mobile ul li a {
font-size: 16px;
font-weight: 700
}
.menu-mobile ul li .go {
position: absolute;
right: 0;
font-size: 20px
}
.menu-pc {
display: block
}
.menu-pc .parner {
float: right
}
.menu-pc .parner .parner-info {
font-weight: 700;
font-size: 15px
}
.menu-pc .parner a {
display: inline-block;
font-weight: 700;
font-size: 15px
}
.menu-pc .search-member {
padding-top: 11px
}
.menu-pc .search-member .search {
float: left;
padding: 5px 0
}
.menu-pc .search-member .search .search-input {
float: left;
position: relative;
width: 260px;
border: 1px solid #86c81e;
border-radius: 3px
}
.searchMenu {
float: left;
padding: 5px 0
}
.searchMenu_hospital {
float: left;
padding: 5px 0
}
.searchMenu ul {
display: inline-flex
}
.searchMenu ul li {
background: #86c81e;
padding: 6px 10px;
color: #fff;
margin-right: 3px;
border-radius: 3px;
outline: none;
line-height: 18px;
font-size: 15px;
cursor: pointer
}
.searchMenu ul li:hover {
background: #f90
}
.searchMenu a {
color: #fff;
font-size: 15px;
line-height: unset
}
.searchMenu_hospital a {
color: #fff;
font-size: 15px;
line-height: unset
}
.searchMenu_hospital ul li {
background: #fff;
padding: 6px 10px;
border-color: #86c81e;
margin-right: 3px;
border-radius: 3px;
outline: none;
line-height: 18px;
font-size: 15px;
cursor: pointer
}
.menu-pc .search-member .search .search-input input[type="text"] {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 90%;
webkit-box-shadow: 0 0 0 0 #fff;
box-shadow: 0 0 0 0 #fff;
padding: 5px 8px;
line-height: 18px;
border: 0 solid;
color: #86c81e;
font-size: 15px;
border-radius: 3px
}
.menu-pc .search-member .search .searchMenu {
width: 26%;
height: 26px;
float: right;
text-align: center;
padding: 2px 5px 2px 0;
background: #86c81e
}
.menu-pc .search-member .search .searchMenu .searchSelected {
color: #fff;
cursor: pointer;
font-size: 15px;
padding-top: 5px;
padding-left: 5px
}
.menu-pc .search-member .search .searchMenu .searchTab {
position: absolute;
color: #86c81e;
width: 26%;
border: 1px solid #86c81e;
border-top: none;
background: #fff;
height: auto;
z-index: 20;
float: left;
padding: 2px
}
.menu-pc .search-member .search .searchMenu .searchTab li {
line-height: 28px;
color: #86c81e;
font-size: 15px;
cursor: pointer;
width: 100%;
float: left;
text-align: center
}
.menu-pc .search-member .search .searchMenu .searchTab li.selected {
background: #edf3fc;
color: #f6a41c;
font-weight: 700
}
.menu-pc .search-member .search .search-input input[type="text"]:-moz-placeholder {
color: #86c81e
}
.menu-pc .search-member .search .search-input input[type="text"]::-moz-placeholder {
color: #86c81e
}
.menu-pc .search-member .search .search-input input[type="text"]:-ms-input-placeholder {
color: #86c81e
}
.menu-pc .search-member .search .search-input input[type="text"]::-webkit-input-placeholder {
color: #86c81e
}
.menu-pc .search-member .search .search-input a {
width: 15px;
height: 15px;
position: absolute;
top: 8px;
right: 8px
}
.menu-pc .search-member .search .search-hot {
padding-left: 6px;
font-size: 12px;
letter-spacing: .05em
}
.menu-pc .search-member .search .search-hot .tag {
display: inline-block;
font-size: 12px;
letter-spacing: .05em;
line-height: 30px
}
.menu-pc .search-member .member {
float: right;
padding: 5px 0
}
.menu-pc .search-member .member .member-info {
float: left;
padding: 11px 0;
font-size: 15px;
font-weight: 700;
margin-right: 8px
}
.menu-pc .search-member .member .member-info .member-name {
margin-right: 5px
}
.menu-pc .search-member .member .member-info a {
display: inline-block;
font-size: 15px;
font-weight: 700;
margin-right: 15px
}
.menu-pc .search-member .member .spacingfix {
float: left
}
.menu-pc .search-member .member .spacingfix a {
font-size: 0;
width: 32px;
height: 32px;
float: left;
border-radius: 50px
}
.menu-pc .search-member .member .spacingfix a + a {
margin-left: 10px
}
.menu-pc .search-member .member .spacingfix a:hover {
background-color: #F7D90F
}
.menu-pc .search-member .member .spacingfix a:active {
background-color: #d3c792
}
.menu-pc .menu-navigation .menu-navigation-info {
width: 100%;
display: table
}
.menu-pc .menu-navigation .menu-navigation-info > li {
position: relative;
display: table-cell;
text-align: center
}
.menu-pc .menu-navigation .menu-navigation-info > li .menu-name {
padding-top: 3px
}
.menu-pc .menu-navigation .menu-navigation-info > li .menu-name-book {
padding-top: 3px
}
.menu-pc .menu-navigation .menu-navigation-info > li + li .menu-name-book, .menu-pc .menu-navigation .menu-navigation-info > li + li .menu-name-book, .menu-pc .menu-navigation .menu-navigation-info > li + li .menu-name-book {
background-color: #fdc808
}
.menu-pc .menu-navigation .menu-navigation-info .menu-name-book {
position: relative
}
.menu-pc .menu-navigation .menu-navigation-info > li .menu-name-book > a {
background-color: #fdc808;
padding: 10px 0
}
.menu-pc .menu-navigation .menu-navigation-info > li .menu-name-book .name {
color: #3e3a39;
display: block;
font-size: 18px;
font-weight: 700;
letter-spacing: .075em;
line-height: 26px;
padding: 0 12px
}
.menu-pc .menu-navigation .menu-navigation-info > li .menu-name > a {
background-color: #fde884;
padding: 10px 0
}
.menu-pc .menu-navigation .menu-navigation-info > li .menu-name .name {
color: #3e3a39;
display: block;
font-size: 18px;
font-weight: 700;
letter-spacing: .075em;
line-height: 26px;
padding: 0 12px
}
.menu-pc .menu-navigation .menu-navigation-info .menu-name-book .name {
border-left: 0 solid #fff
}
.menu-pc .menu-navigation .menu-navigation-info > li + li .name {
border-left: 1px solid #fff
}
.menu-pc .menu-navigation .menu-navigation-info > li + li:hover .menu-hover, .menu-pc .menu-navigation .menu-navigation-info > li + li:active .menu-hover, .menu-pc .menu-navigation .menu-navigation-info > li + li.active .menu-hover {
position: absolute;
top: 0;
right: -3px;
width: 0;
height: 0;
border-bottom: 3px solid #fe9d09;
border-right: 3px solid transparent
}
.menu-pc .menu-navigation .menu-navigation-info > .menu-book .menu-hover, .menu-pc .menu-navigation .menu-navigation-info > .menu-book .menu-hover, .menu-pc .menu-navigation .menu-navigation-info > .menu-book .menu-hover {
position: absolute;
top: 0;
right: -3px;
width: 0;
height: 0;
border-bottom: 3px solid #fe9d09;
border-right: 3px solid transparent
}
.menu-pc .menu-navigation .menu-navigation-info > li + li:hover .menu-name, .menu-pc .menu-navigation .menu-navigation-info > li + li:active .menu-name, .menu-pc .menu-navigation .menu-navigation-info > li + li.active .menu-name {
background-color: #fdc808
}
.menu-pc .menu-navigation .menu-navigation-info > li + li:hover .menu-name > a, .menu-pc .menu-navigation .menu-navigation-info > li + li:active .menu-name > a, .menu-pc .menu-navigation .menu-navigation-info > li + li.active .menu-name > a {
background-color: #fdc808
}
.menu-pc .menu-navigation .menu-navigation-info > li + li:hover .menu-name .name, .menu-pc .menu-navigation .menu-navigation-info > li + li:active .menu-name .name, .menu-pc .menu-navigation .menu-navigation-info > li + li.active .menu-name .name {
border-left-color: #fdc808
}
.menu-pc .menu-navigation .menu-navigation-info .menu-all-categories {
z-index: 8;
display: none;
width: 100%;
position: absolute;
background-color: #fff
}
.menu-pc .menu-navigation .menu-navigation-info .menu-all-categories ul {
border: 1px solid #fde884
}
.menu-pc .menu-navigation .menu-navigation-info .menu-all-categories ul li {
padding: 0 10px;
text-align: left
}
.menu-pc .menu-navigation .menu-navigation-info .menu-all-categories ul li a {
padding: 10px 0;
font-size: 18px;
font-weight: 700
}
.menu-pc .menu-navigation .menu-navigation-info .menu-all-categories ul li + li a {
border-top: 1px solid #fde884
}
.menu-pc .hot_topic {
float: left
}
.menu-pc .search-hot {
float: left;
font-size: 15px;
margin-bottom: 5px
}
.menu-pc .tag {
display: inline-block;
color: #000;
font-size: 15px
}
.menu-pc .tag:hover {
color: #86c81e
}
.menu-pc .hot_tag {
color: #86c81e;
display: inline-block
}
.ad-banner .ad-banner-pc {
margin: 0 auto;
margin-top: 5px;
margin-bottom: 35px
}
.ad-banner .ad-banner-pc.index-banner {
width: 100%
}
.ad-banner .text-center {
text-align: center;
margin-top: 10px;
margin-bottom: 10px
}
.ad-banner .text-center div.CAN_ad table {
margin: 0 auto
}
.ad-banner .ad-banner-mobile {
margin: 0 auto;
margin-bottom: 15px
}
.ad-banner .t15 {
margin-top: 15px
}
.ad-banner .ad-banner-pc {
width: 970px;
height: auto;
display: block;
margin-bottom: 5px
}
.ad-banner .ad-banner-mobile {
width: 300px;
height: 100px;
display: none
}
.ad-banner .ad-banner-mobile-250 {
width: 300px;
height: 250px;
margin: 0 auto;
margin-bottom: 15px;
display: none
}
.ad-list .ad-banner-mobile-250 {
text-align: center
}
.ab-banner .ad-banner-mobile-250 div.CAN_ad table {
margin: 0 auto
}
.maplayer audio {
width: 80%;
*height: 35px;
overflow: hidden;
vertical-align: middle
}
.maplayer audio::-internal-media-controls-download-button {
display: none
}
.maplayer audio::-webkit-media-controls-enclosure {
overflow: hidden
}
.maplayer audio::-webkit-media-controls-panel {
width: calc(100% + 30px)
}
.maplayer .tts_credit {
width: 100%;
text-align: end;
font-size: 10px;
padding-bottom: 5px
}
.maplayer .tts_credit a {
display: inline;
color: #2ea7e0
}
.audio_speak {
vertical-align: middle
}
.audio_speaktoyou {
vertical-align: middle;
font-weight: 700;
font-size: 20px
}
div#article_page > details > ol li {
font-size: 16px;
letter-spacing: 0;
word-break: break-all;
word-wrap: break-word
}
div#article_page > details > ol li a {
font-size: 16px
}
@media screen and (min-width: 0px) and (max-width: 768px) {
.maplayer audio {
width: 65%
}
.menu-pc {
display: none
}
.ad-banner .ad-banner-pc {
display: none
}
.ad-banner .ad-banner-mobile {
display: block
}
.ad-banner .ad-banner-mobile-250 {
display: block;
text-align: center
}
}
.header .header-top {
background-color: #86c81e;
color: #fff;
padding: 11px 0 9px;
-moz-box-shadow: 0 5px 5px 0 rgba(97,97,97,0.1);
-webkit-box-shadow: 0 5px 5px 0 rgba(97,97,97,0.1);
box-shadow: 0 5px 5px 0 rgba(97,97,97,0.1)
}
.header .header-top .left, .header .header-top .right {
width: 50%
}
.header .header-top .logo-yahoo {
background-image: url(https://www.henjr.com/3/images/logo-yahoo.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 141px;
height: 60px;
font-size: 0
}
.header .header-top .logo-health {
background-image: url(https://www.henjr.com/3/images/logo-health.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 161px;
height: 60px;
font-size: 0;
margin-top: -6px
}
.header .header-top .ad-banner {
width: 100%;
max-width: 468px;
height: 60px
}
.header .header-top .right a {
float: right
}
.header .header-top .right .desc {
color: #fff;
font-size: 12px;
text-align: center;
line-height: 60px;
float: right;
margin-right: 15px;
letter-spacing: .095em
}
.header .header-bottom {
margin: 0 -5px;
display: block;
background-color: #fff;
-moz-box-shadow: inset 0 0 5px 3px rgba(97,97,97,0.08);
-webkit-box-shadow: inset 0 0 5px 3px rgba(97,97,97,0.08);
box-shadow: inset 0 0 5px 3px rgba(97,97,97,0.08)
}
.header .header-bottom a {
display: inline-block;
width: calc(100% / 3);
font-size: 15px;
font-weight: 700;
letter-spacing: .1em;
padding: 15px 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
.header .header-bottom .text-left {
text-align: left
}
.header .header-bottom .text-center {
text-align: center
}
.header .header-bottom .text-right {
text-align: right
}
.header .toggle-button {
display: none;
position: absolute;
top: 20px;
right: 25px;
background-color: transparent;
border: none;
width: 23px;
height: 22px;
outline: none
}
.header .search-button {
display: none;
position: absolute;
top: 19px;
right: 63px;
background-color: transparent;
border: none;
width: 24px;
height: 24px;
outline: none
}
.header .search {
display: none;
padding: 0 25px 10px;
background-color: #86c81e;
-moz-box-shadow: 0 5px 5px 0 rgba(97,97,97,0.1);
-webkit-box-shadow: 0 5px 5px 0 rgba(97,97,97,0.1);
box-shadow: 0 5px 5px 0 rgba(97,97,97,0.1)
}
.header .search .search-input {
float: left;
position: relative;
width: 100%;
border-radius: 3px
}
.header .search .search-input .msearchbar {
width: 100%;
float: right
}
.header .search .search-input input[type="text"] {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
outline: none;
padding: 5px 8px;
line-height: 18px;
color: #86c81e;
border-radius: 3px;
font-size: 15px
}
.header .search .msearchMenu {
width: 20%;
height: auto;
float: left;
-webkit-padding-before: 7px;
padding-top: 7px;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center
}
.header .search .msearchMenu .msearchSelected {
color: #fff;
font-size: 16px;
*background-color: #86c81e
}
.header .search .msearchMenu .msearchTab {
position: absolute;
float: left;
top: 28px;
left: -.3%;
color: #86c81e;
width: 20%;
border-left: 1px solid #fff;
background: #fff;
z-index: 20;
text-align: center
}
.header .search .msearchMenu .msearchTab li {
line-height: 28px;
color: #86c81e;
font-size: 16px;
width: 100%;
float: left;
text-align: center
}
.header .search .msearchMenu .msearchTab li.selected {
background: #edf3fc;
color: #f6a41c
}
.header .search .search-input input[type="text"]:-moz-placeholder {
color: #86c81e
}
.header .search .search-input input[type="text"]::-moz-placeholder {
color: #86c81e
}
.header .search .search-input input[type="text"]:-ms-input-placeholder {
color: #86c81e
}
.header .search .search-input input[type="text"]::-webkit-input-placeholder {
color: #86c81e
}
.header .search .search-input a {
width: 15px;
height: 15px;
position: absolute;
top: 8px;
right: 8px
}
@media screen and (min-width: 0px) and (max-width: 768px) {
.header {
background-color: #fff
}
.header .header-top {
padding: 15px 0
}
.header .header-top .left, .header .header-top .right {
width: auto;
float: left
}
.header .header-top .logo-yahoo {
width: 112.8px;
height: 33.6px;
margin-right: 10px
}
.header .header-top .logo-health {
width: 128.8px;
height: 36.8px
}
.header .header-top .right .desc {
display: none
}
.header .header-top .right .ad-banner {
display: none
}
.header .header-bottom {
display: none
}
.header .toggle-button, .header .search-button {
display: block
}
}
@media screen and (min-width: 0px) and (max-width: 320px) {
.header .header-top .logo-yahoo {
display: none
}
}
.hot-search {
padding-top: 70px
}
.hot-search .health-keywords {
width: 10%;
height: 55px;
background-color: #f4f4f4;
color: #7dc612;
line-height: 25px;
letter-spacing: 5px;
font-size: 110%;
text-align: center
}
.hot-search .health-keywords span.sc {
font-size: 130%;
font-weight: bolder;
color: #cc3f2a
}
.hot-search .keyword-list {
width: 90%;
overflow: hidden
}
.hot-search .keyword-list .kitem {
line-height: 25px;
margin: 0 0 5px 5px;
padding: 0 5px;
background-color: #FFF
}
.hot-search .keyword-list .tag {
float: left;
font-size: 17px;
letter-spacing: .095em;
font-weight: 700;
line-height: 1.1em;
margin-top: 5px
}
.hot-search .keyword-list .tag:hover {
color: #fdc908
}
.hot-search .keyword-list .tag:active {
color: #86c81e
}
.footer .footer-top {
background-color: #86c81e;
color: #fff;
padding: 45px 0;
-moz-box-shadow: inset 0 5px 5px 0 rgba(97,97,97,0.2);
-webkit-box-shadow: inset 0 5px 5px 0 rgba(97,97,97,0.2);
box-shadow: inset 0 5px 5px 0 rgba(97,97,97,0.2)
}
.footer .footer-top .left, .footer .footer-top .right, .footer .footer-top .footer_middle, .footer .footer-top .right-social {
width: 25%
}
.footer .footer-top .left ul li, .footer .footer-top .left ul * {
display: inline-block;
color: #fff;
line-height: 30px;
font-size: 17px;
letter-spacing: .06em
}
.footer .footer-top .left ul li a {
color: #fff;
font-size: 17px;
line-height: 20px;
border-right: 1px solid #fff;
padding-right: 17px
}
.footer .footer-top .footer_middle {
margin-top: 4px;
float: left
}
.footer .footer-top .footer_middle ul {
float: right
}
.footer .footer-top .footer_middle ul li {
margin: 3px 0;
padding-right: 10px
}
.footer .footer-top .footer_middle ul li a {
color: #fff;
font-size: 17px;
line-height: 30px;
padding-right: 17px;
display: inline-block
}
.footer .footer-top .right {
margin-top: 4px
}
.footer .footer-top .right ul {
float: right
}
.footer .footer-top .right ul li {
margin: 3px 0;
padding-right: 10px
}
.footer .footer-top .right ul li a {
color: #fff;
font-size: 17px;
line-height: 30px;
padding-right: 17px
}
.footer .footer-top .right ul li:last-child {
padding-right: 0
}
.footer .footer-top .right ul li:last-child a {
border-right: 0;
padding-right: 0
}
.footer .footer-top .right-social {
margin-top: 4px;
float: left
}
.footer .footer-top .right-social ul {
float: right
}
.footer .footer-top .right-social ul li {
margin: 3px 0;
padding-right: 10px
}
.footer .footer-top .right-social ul li a {
color: #fff;
font-size: 17px;
line-height: 30px;
padding-right: 17px
}
.footer .footer-top .right .spacingfix {
float: right;
margin-top: 28px
}
.footer .footer-top .left .spacingfix a {
font-size: 0;
width: 32px;
height: 32px;
float: left;
margin-right: 5px;
margin-top: 7px
}
.footer .footer-top .right .spacingfix a {
font-size: 0;
width: 32px;
height: 32px;
float: left
}
.footer .footer-top .right .spacingfix a + a {
margin-left: 10px
}
.footer-title {
font-size: 19px !important;
font-weight: 800 !important;
margin-bottom: 7px !important
}
.footer-title2 {
font-size: 17px !important;
font-weight: 800 !important;
margin-bottom: 7px !important;
margin-top: 7px !important
}
.footer .footer-bottom {
text-align: center;
background-color: #999;
color: #fff;
padding: 20px 0;
font-size: 13px;
letter-spacing: .06em
}
.footer .footer-bottom p {
line-height: 1.5em
}
.footer .footer-bottom a {
line-height: 1.5em;
color: #fff
}
.footerimg {
vertical-align: middle
}
.right-social .fab, .right-social .fas {
font-size: 20px;
margin-right: 10px;
vertical-align: middle;
width: 20px;
height: 20px;
position: relative;
text-align: center;
display: inline-block
}
@media screen and (min-width: 0px) and (max-width: 767px) {
.footer .footer-top .left {
width: 100%;
padding-left: 15px
}
.footer .footer-top .right, .footer .footer-top .footer_middle, .footer .footer-top .right-social {
width: 50%
}
.footer .footer-top .right, .footer .footer-top .footer_middle {
margin-top: 20px
}
.footer .footer-top .right ul {
float: none
}
.footer .footer-top .right-social ul {
float: left
}
.footer .footer-top .right .spacingfix {
float: none;
margin-top: 12px
}
.footer .footer-bottom .left, .footer .footer-bottom .right {
width: 100%
}
}
@media screen and (min-width: 0px) and (max-width: 768px) {
.hot-search .health-keywords {
font-size: 110%;
letter-spacing: 0
}
.hot-search .health-keywords span {
display: none
}
.hot-search .health-keywords:after {
content: "搜\AHot";
font-weight: 700
}
.hot-search .keyword-list {
height: 50px;
overflow: hidden
}
}
.article-header {
position: relative;
background-color: #86c81e;
padding: 9px 11px 8px 16px
}
.article-header .title {
font-size: 18px;
font-weight: 700;
letter-spacing: .12em;
float: left;
font-weight: bolder
}
.article-header .more {
font-size: 15px;
line-height: 18px;
float: right;
color: #fff
}
.article-header .calendar {
position: absolute;
top: 7px;
right: 17px;
width: 21px;
height: 21px
}
.article-header .calendar i {
width: 21px;
height: 21px
}
.article-grid {
margin: 0 -7px;
margin-bottom: 22px
}
.article-grid .grid {
float: left;
padding: 0 7px;
padding-top: 14px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.article-grid .grid .grid-img {
position: relative;
background-repeat: no-repeat;
background-position: center center;
background-size: cover
}
.article-grid .grid .grid-img .icon-video-play {
position: absolute;
display: block;
width: 40px;
height: 40px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-size: 40%;
background-position: center;
border-radius: 100px;
background-color: rgba(255,255,255,0.7)
}
.article-grid .grid .grid-img img {
width: 100%
}
.article-grid .grid .grid-img img.img-square {
height: 142px
}
.article-grid .grid .grid-img img.img-4 {
height: 74px
}
.article-grid .grid .grid-img img.img-3 {
height: 101px
}
.article-grid .grid .grid-img img.img-2 {
height: 152px
}
.article-grid .grid .grid-article {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 7px 2px 0
}
.article-grid .grid .grid-article .content {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 66px;
overflow: hidden;
font-size: 14px;
line-height: 1.5em;
letter-spacing: .1em;
text-align: justify
}
.article-grid .grid .grid-article .detail .title {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 37px;
font-size: 15px;
line-height: 1.3em;
letter-spacing: .09em;
overflow: hidden;
font-weight: 700;
margin-bottom: 6px;
text-align: justify
}
.article-grid .grid .grid-article .detail .content {
font-size: 15px;
line-height: 1.5em
}
.article-grid .grid .grid-article .feature {
cursor: default;
float: right;
font-size: 15px;
letter-spacing: .025em;
margin-top: 7px
}
.article-grid .grid .grid-article .feature .origin-price {
text-decoration: line-through;
color: #cc3f29;
margin-right: 10px
}
.article-grid .grid .grid-article .feature .icon-eye {
padding: 6px 7px;
width: 14px;
height: 12px;
margin-right: 3px
}
.article-list .list {
width: 100%;
float: left;
padding: 4.5% 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #a0d757
}
.article-list .list .list-img {
width: 44%;
float: left;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative
}
.article-list .list .list-img img {
width: 100%;
height: 140px
}
.article-list .list .list-img .icon-video-play {
position: absolute;
display: block;
width: 60px;
height: 60px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-size: 40%;
background-position: center;
border-radius: 100px;
background-color: rgba(255,255,255,0.7)
}
.article-list .list .list-article {
width: 56%;
float: right;
padding-left: 14px;
padding-top: 5px;
padding-bottom: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.article-list .list .list-article .title a {
font-size: 19px;
line-height: 1em;
letter-spacing: .033em;
font-weight: 700;
color: #088357;
height: 2em;
overflow: hidden;
margin-bottom: 7px;
text-align: justify
}
.article-list .list .list-article .info {
margin-top: 7px;
margin-bottom: 12px
}
.article-list .list .list-article .info .left {
margin-top: 6px
}
.article-list .list .list-article .info .date {
float: left;
font-size: 14px;
font-weight: 700
}
.article-list .list .list-article .info .author {
float: left;
font-size: 14px;
font-weight: 700;
letter-spacing: .055em;
margin-left: 5px;
padding-left: 5px;
border-left: 1px solid #000
}
.article-list .list .list-article .info .feature a, .article-list .list .list-article .info .feature > span {
float: left;
margin-left: 3px
}
.article-list .list .list-article .info .feature .icon {
width: 20px;
height: 20px
}
.article-list .list .list-article .info .feature .number i {
display: inline-block;
vertical-align: middle
}
.article-list .list .list-article .info .feature .number span {
float: right;
font-size: 15px;
line-height: 21px;
padding-left: 3px;
padding-right: 5px
}
.article-list .list .list-article .info .feature .google {
background-color: #cc3f29;
background-size: 11px auto
}
.article-list .list .list-article .info .feature .google:hover {
background-color: #d56554
}
.article-list .list .list-article .info .feature .google:active {
background-color: #b2776e
}
.article-list .list .list-article .info .feature .fb {
background-color: #316ea0;
background-size: 6px auto
}
.article-list .list .list-article .info .feature .fb:hover {
background-color: #5a8ab2
}
.article-list .list .list-article .info .feature .fb:active {
background-color: #708698
}
.article-list .list .list-article .info .feature .line {
background-color: #00bf00;
background-size: 14px auto
}
.article-list .list .list-article .info .feature .line:hover {
background-color: #33ca33
}
.article-list .list .list-article .info .feature .line:active {
background-color: #6a8d6a
}
.article-list .list .list-article .info .feature .sms {
background-color: #fdc601;
background-size: 14px auto
}
.article-list .list .list-article .info .feature .sms:hover {
background-color: #fed93c
}
.article-list .list .list-article .info .feature .sms:active {
background-color: #d0bf71
}
.article-list .list .list-article .info .feature .eye {
background-size: 18px auto
}
.article-list .list .list-article .content {
font-size: 16px;
line-height: 1.4em;
min-height: 4.1em;
max-height: 7em;
overflow: hidden;
text-align: justify
}
.article-list .list .list-article .ad-content {
font-size: 16px;
line-height: 1.4em;
height: 8.4em;
overflow: hidden;
text-align: justify
}
.article-list .img-square .list-img {
width: 23%
}
.article-list .img-square .list-article {
width: 77%
}
.article-detail .trail {
*display: none !important;
margin-bottom: 25px;
white-space: nowrap
}
.article-detail .trail a {
display: inline-block;
font-size: 15px;
letter-spacing: .095em;
font-weight: 700
}
.article-detail .trail .active {
color: #7ec512
}
.article-detail .trail span {
*margin: 0 1px;
font-size: 13px;
vertical-align: top
}
.article-detail .trail .ellipsis {
overflow: hidden;
text-overflow: ellipsis;
width: 250px
}
.article-detail .article .title {
font-size: 25px;
letter-spacing: .013em;
font-weight: 700;
line-height: 1.15em;
margin-bottom: 10px
}
.article-detail .article .date-author {
margin-bottom: 6px
}
.article-detail .article .date-author .date, .article-detail .article .date-author .autor {
display: inline-block;
font-size: 13px;
letter-spacing: .035em;
font-weight: 700;
line-height: 1.15em
}
.article-detail .article .date-author .date {
margin-right: 15px
}
.article-detail .tag-view {
margin-bottom: 6px
}
.article-detail .tag-view .tag-list .tag {
float: left;
font-size: 17px;
letter-spacing: .095em;
font-weight: 700;
line-height: 1em;
color: #7ec512;
margin-top: 3px
}
.article-detail .tag-view .tag-list a + a {
float: left;
border-left: 1px solid #7ec512;
padding-left: 10px;
margin-left: 10px
}
.article-detail .tag-view .feature .icon {
width: 20px;
height: 20px
}
.article-detail .tag-view .feature .number {
float: left;
margin-left: 3px
}
.article-detail .tag-view .feature .number i {
display: inline-block;
vertical-align: middle
}
.article-detail .tag-view .feature .number span {
float: right;
font-size: 15px;
line-height: 21px;
padding-left: 3px;
padding-right: 5px;
color: #3e3a39
}
.article-detail .article {
margin-bottom: 40px
}
.article-detail .article .img {
position: relative;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin-bottom: 20px;
max-width: 100%;
height: auto
}
.article-detail .article .img .icon-video-play {
position: absolute;
display: block;
width: 90px;
height: 90px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-size: 40%;
background-position: center;
border-radius: 100px;
background-color: rgba(255,255,255,0.7)
}
.article-detail .article .img img {
visibility: hidden;
width: 100%;
height: 100%
}
.article-detail .article .content * {
font-size: 20px;
line-height: 1.75em;
letter-spacing: .075em;
text-align: justify
}
.article-detail .article .content p {
margin-block-start: 1em;
margin-block-end: 1em
}
.article-detail .article .gboard {
text-align: center;
height: 350px;
background-color: #799352
}
.article-detail .article .gboard:before {
content: "";
height: 100%;
display: inline-grid;
vertical-align: middle
}
.article-detail {
padding: 0 10px
}
.article-detail .article .gboard span.stitle {
font-size: 56px;
color: #fff;
display: inline-grid;
vertical-align: middle
}
.article-detail .article span.sname {
color: #f60
}
.article-detail .article p.dashline {
border-bottom: 2px dashed #000
}
.main-container .tag-info {
margin: 5px 0 12px
}
.main-container .tag-info .title {
font-size: 26px;
letter-spacing: .12em;
font-weight: bolder;
text-align: left;
padding-bottom: 5px
}
.main-container .tag-info article {
font-size: 20px;
letter-spacing: .1em;
text-align: left;
line-height: 1.4em
}
.article-detail .article .content .video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden
}
.article-detail .article .content .video-container iframe, .article-detail .article .content .video-container object, .article-detail .article .content .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.article-detail .article .content a {
color: green;
display: inline-block
}
.article-detail .article .content a.ulinks {
color: blue;
text-decoration: underline
}
.article-detail .article .content table, .article-detail .article .content caption, .article-detail .article .content tbody, .article-detail .article .content tfoot, .article-detail .article .content thead, .article-detail .article .content tr, .article-detail .article .content th, .article-detail .article .content td {
border-color: grey;
border-width: 1px;
border-style: solid
}
.article-detail .share {
margin: 0 -7px;
margin-bottom: 40px;
text-align: center
}
.article-detail .share .share-btn {
width: calc(100% / 4);
float: left;
padding: 0 7px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.article-detail .share .share-btn a {
color: #fff;
font-size: 20px;
line-height: 2.1em
}
.article-detail .share .share-btn a span {
background-position: center left;
padding-left: 20px;
display: inline-block
}
.article-detail .share .share-btn .instagram {
background-color: #cc3f29
}
.article-detail .share .share-btn .instagram span {
padding-left: 24px
}
.article-detail .share .share-btn .instagram:hover {
background-color: #d56554
}
.article-detail .share .share-btn .instagram:active {
background-color: #b2776e
}
.article-detail .share .share-btn .fb {
background-color: #316ea0
}
.article-detail .share .share-btn .fb span {
padding-left: 18px
}
.article-detail .share .share-btn .fb:hover {
background-color: #5a8ab2
}
.article-detail .share .share-btn .fb:active {
background-color: #708698
}
.article-detail .share .share-btn .line {
background-color: #00bf00
}
.article-detail .share .share-btn .line span {
padding-left: 28px
}
.article-detail .share .share-btn .line:hover {
background-color: #33ca33
}
.article-detail .share .share-btn .line:active {
background-color: #6a8d6a
}
.article-detail .share .share-btn .weibo {
background-color: #fdc601
}
.article-detail .share .share-btn .weibo span {
padding-left: 26px
}
.article-detail .share .share-btn .weibo:hover {
background-color: #fed93c
}
.article-detail .share .share-btn .weibo:active {
background-color: #d0bf71
}
.article-detail .more-articles {
padding-bottom: 50px
}
.article-detail .more-articles .header {
font-size: 18px;
font-weight: 700;
letter-spacing: .115em;
margin-bottom: 30px
}
.article-detail .more-articles .recommend {
margin-bottom: 40px
}
.article-detail .more-articles .also-extend .also-read, .article-detail .more-articles .also-extend .extend-read {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 50%
}
.article-detail .more-articles .also-extend .also-read {
padding-right: 20px
}
.article-detail .more-articles .also-extend .extend-read {
padding-left: 20px
}
.article-detail .more-articles .also-extend .title {
margin-top: 18px;
position: relative
}
.article-detail .more-articles .also-extend .title span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
width: 4px;
height: 4px;
border-radius: 10px;
background-color: #7ec512
}
.article-detail .more-articles .also-extend .title a {
font-size: 16px;
letter-spacing: .06em;
line-height: 1em;
height: 1em;
padding-left: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
@media screen and (min-width: 0px) and (max-width: 768px) {
.article-grid .grid {
width: 100% !important
}
.article-grid .grid .grid-img {
width: 44%;
float: left
}
.article-grid .grid .grid-img img {
width: 100%
}
.article-grid .grid .grid-img img.img-square, .article-grid .grid .grid-img img.img-4, .article-grid .grid .grid-img img.img-3, .article-grid .grid .grid-img img.img-2 {
height: 172px
}
.article-grid .grid .grid-article {
padding: 2px 0 2px 8px;
width: 56%;
float: right
}
.article-grid .grid .grid-article .detail .title {
font-size: 18px;
height: auto;
max-height: 3.9em;
letter-spacing: .033em
}
.article-grid .grid .grid-article .detail .content {
font-size: 18px;
height: auto;
max-height: 81px
}
.article-list .list .list-img img {
height: 172px
}
.article-list .list .list-article {
padding: 2px 0 2px 8px
}
.article-list .list .list-article .title a {
height: auto;
line-height: 1.3em;
max-height: 3.9em
}
.article-list .list .list-article .ad-content {
height: auto;
max-height: 5.6em
}
.article-detail .more-articles .also-extend .also-read, .article-detail .more-articles .also-extend .extend-read {
width: 100%;
padding: 10px 0
}
.article-detail .share {
margin: 0 -2px;
margin-bottom: 40px;
text-align: center
}
.article-detail .share .share-btn {
width: calc(100% / 2);
padding: 2px
}
.article-grid .grid .grid-article .content {
font-size: 16px;
height: 76px;
font-weight: 700
}
}
@media screen and (min-width: 520px) and (max-width: 619px) {
.article-grid .grid .grid-img img.img-square, .article-grid .grid .grid-img img.img-4, .article-grid .grid .grid-img img.img-3, .article-grid .grid .grid-img img.img-2 {
height: 138px
}
.article-list .list .list-img img {
height: 138px
}
}
@media screen and (min-width: 420px) and (max-width: 519px) {
.article-grid .grid .grid-img img.img-square, .article-grid .grid .grid-img img.img-4, .article-grid .grid .grid-img img.img-3, .article-grid .grid .grid-img img.img-2 {
height: 115px
}
.article-list .list .list-img img {
height: 125px
}
}
@media screen and (max-width: 419px) {
.article-grid .grid .grid-img img.img-square, .article-grid .grid .grid-img img.img-4, .article-grid .grid .grid-img img.img-3, .article-grid .grid .grid-img img.img-2 {
height: 83px
}
.article-list .list .list-img img {
height: 83px
}
}
@media screen and (max-width: 320px) {
.article-detail .article .content * {
font-size: 17px
}
.article-detail .article .gboard {
height: 187px !important
}
.article-detail .article .gboard span.stitle {
font-size: 30px !important
}
}
.sidebar-container .article-header {
background-color: #7ec512
}
.sidebar-container .article-header .title {
font-size: 18px;
letter-spacing: .12em
}
.sidebar-container .article-list .list .list-article {
padding: 8px 0 8px 8px
}
.sidebar-container .article-list .list .list-article .content {
font-size: 15px;
line-height: 1.27em;
height: 58px;
min-height: 58px;
font-weight: 700
}
.sidebar-container .article-list .list img {
width: 100%;
height: 69px
}
.sidebar-container .article-list .list.img-square .list-article {
padding: 5px 0 5px 8px
}
.sidebar-container .article-list .list.img-square .list-article .title a {
font-size: 16px;
letter-spacing: .04em;
height: 16px
}
.sidebar-container .article-list .list.img-square .list-article .content {
height: 39px;
min-height: 39px;
font-weight: 400
}
.sidebar-container .ad-list {
margin-top: 14px
}
.sidebar-container .ad-list .list .list-img {
background-repeat: no-repeat;
background-position: center center;
background-size: cover
}
.sidebar-container .ad-list .list .list-img img {
width: 100%;
height: 100%
}
.sidebar-container .health {
position: relative
}
.sidebar-container .health .article-header .title {
letter-spacing: .5px
}
.sidebar-container .health .lead-health-icon {
position: absolute;
top: 2px;
left: 16px
}
.sidebar-container .subscribe {
margin-top: 15px;
margin-bottom: 30px
}
.sidebar-container .subscribe i {
display: inline-block;
margin-top: 1px;
float: left;
width: 11px;
height: 13px
}
.sidebar-container .subscribe p {
color: #4d4d4d;
font-weight: 700;
font-size: 16px;
letter-spacing: .157em;
overflow: hidden;
padding-left: 5px
}
.sidebar-container .subscribe .subscribe-out {
height: 5px;
width: 100%;
padding: 10px 0 15px
}
.sidebar-container .subscribe .subscribe-out .subscribe-input {
float: left;
position: relative;
width: 100%
}
.sidebar-container .subscribe .subscribe-out .subscribe-input input[type="text"] {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
outline: none;
padding: 0 12px;
line-height: 30px;
border: 1px solid #86c81e;
border-radius: 0;
color: #7ec512;
font-size: 14px
}
.sidebar-container .subscribe .subscribe-out .subscribe-input input[type="text"]:-moz-placeholder {
color: #7ec512;
font-size: 14px
}
.sidebar-container .subscribe .subscribe-out .subscribe-input input[type="text"]::-moz-placeholder {
color: #7ec512;
font-size: 14px
}
.sidebar-container .subscribe .subscribe-out .subscribe-input input[type="text"]:-ms-input-placeholder {
color: #7ec512;
font-size: 14px
}
.sidebar-container .subscribe .subscribe-out .subscribe-input input[type="text"]::-webkit-input-placeholder {
color: #7ec512;
font-size: 14px
}
.sidebar-container .subscribe .subscribe-out .subscribe-input a {
position: absolute;
background-color: #7ec512;
color: #fff;
top: 0;
right: 0;
width: 95px;
height: 100%
}
.sidebar-container .subscribe .subscribe-out .subscribe-input a:hover {
background-color: #9ed150
}
.sidebar-container .subscribe .subscribe-out .subscribe-input a:active, .sidebar-container .subscribe .subscribe-out .subscribe-input a.active {
background-color: #98af72
}
.sidebar-container .subscribe .subscribe-out .subscribe-input a .submit {
display: block;
font-weight: 700;
font-size: 14px;
line-height: 14px;
letter-spacing: .157em;
text-align: center;
padding: 8px 0
}
.sidebar-container .fb .ad-list .list a {
height: 216px
}
.sidebar-container .line .line-inner {
background-color: rgba(126,197,18,0.3);
color: #86c81e;
height: 300px;
text-align: center;
font-size: 18px;
letter-spacing: .05em
}
.sidebar-container .line .line-inner p {
padding-top: 20px
}
.sidebar-container .line .line-inner .qrcode {
padding: 7px;
background-color: #fff;
margin-top: 20px
}
.sidebar-container .line .line-inner .line-button {
width: 147px;
height: 44px;
margin: auto;
padding-top: 15px
}
.sidebar-container .line .line-inner .line-button a {
background-color: #5bb211;
color: #fff;
font-size: 20px;
letter-spacing: .05em;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 0 0 7px 0 rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,0.4);
box-shadow: 0 0 7px 0 rgba(0,0,0,0.4);
background-image: url(https://www.henjr.com/3/images/1e224f0b9c5646338aa99ee7b547028d.gif);
background-size: 100%;
background-image: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#a5d67b),color-stop(100%,#5bb211));
background-image: -moz-linear-gradient(top,#a5d67b,#5bb211);
background-image: -webkit-linear-gradient(top,#a5d67b,#5bb211);
background-image: linear-gradient(to bottom,#a5d67b,#5bb211)
}
.sidebar-container .line .line-inner .line-button a img {
padding: 8px 0
}
.sidebar-container .line .line-inner .line-button a span {
position: relative;
top: -15px;
padding-left: 6px
}
@media screen and (min-width: 0px) and (max-width: 768px) {
.sidebar-container .article-list .list .list-img img {
height: 172px
}
.sidebar-container .article-list .list .list-article .content {
font-size: 18px;
height: auto;
max-height: 63px
}
.sidebar-container .projects .article-list .list .list-article .title a {
font-size: 18px;
height: 20px
}
.sidebar-container .projects .article-list .list .list-article .content {
height: auto;
max-height: 41px
}
.sidebar-container .projects .article-list .list .txt {
display: none
}
}
@media screen and (min-width: 520px) and (max-width: 619px) {
.sidebar-container .article-list .list .list-img img {
height: 138px
}
}
@media screen and (min-width: 420px) and (max-width: 519px) {
.sidebar-container .article-list .list .list-img img {
height: 125px
}
}
@media screen and (max-width: 419px) {
.sidebar-container .article-list .list .list-img img {
height: 83px
}
.tabcontent .search_input {
width: auto
}
}
.pager {
width: 100%;
text-align: center;
margin-top: 44px;
margin-bottom: 44px
}
.pager .pagination li {
display: inline-block;
background-color: #d6d7d9;
border-radius: 2px;
margin: 0 2px
}
.pager .pagination li span, .pager .pagination li a {
display: block;
font-size: 18px;
width: 31px;
height: 31px;
line-height: 35px
}
.pager .pagination li:hover, .pager .pagination li.active {
background-color: #7ec512
}
.pager .pagination li a.actbtn {
width: auto !important;
padding: 0 5px
}
.slider .item {
position: relative
}
.slider .item img {
width: 100%;
height: 319px
}
.slider .item img.img-square {
height: 142px
}
.slider .item .icon-video-play {
position: absolute;
display: block;
width: 90px;
height: 90px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-size: 40%;
background-position: center;
border-radius: 100px;
background-color: rgba(255,255,255,0.7)
}
.slider .owl-theme .owl-controls {
margin-top: 7px;
margin-bottom: 18px
}
.slider .owl-theme .owl-controls .owl-pagination .owl-page span {
width: 10px;
height: 10px;
background-color: transparent;
border: 1px solid #7ec512;
opacity: 1;
margin: 0 2px
}
.slider .owl-theme .owl-controls .owl-pagination .owl-page.active span {
background-color: #7ec512
}
.slider .owl-theme .owl-controls .owl-buttons .owl-prev, .slider .owl-theme .owl-controls .owl-buttons .owl-next {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-color: transparent;
width: 26px;
height: 63px;
opacity: 1;
font-size: 0
}
.slider .owl-theme .owl-controls .owl-buttons .owl-prev {
left: 15px;
background-image: url(https://www.henjr.com/3/images/slider-prev.png)
}
.slider .owl-theme .owl-controls .owl-buttons .owl-next {
right: 15px;
background-image: url(https://www.henjr.com/3/images/slider-next.png)
}
.slider #slider-items {
padding-top: 68px;
margin-top: -68px;
margin-left: -14px
}
.slider #slider-items .owl-item .item {
margin-left: 14px
}
.slider #slider-items .owl-item p {
padding-top: 5px;
font-size: 14px;
line-height: 1.5em;
letter-spacing: .1em;
height: 63px
}
.slider #slider-items .owl-controls .owl-pagination {
position: absolute;
top: 50px;
right: 0
}
.slider #slider-items .owl-controls .owl-pagination .owl-page span {
width: 10px;
height: 10px
}
.slider #slider-items .owl-controls .owl-buttons .owl-prev, .slider #slider-items .owl-controls .owl-buttons .owl-next {
width: 16px;
height: 40px
}
.slider #slider-items .owl-controls .owl-buttons .owl-prev {
left: 14px
}
.m-slider .owl-theme .owl-controls .owl-buttons .owl-prev, .m-slider .owl-theme .owl-controls .owl-buttons .owl-next {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;
opacity: 1;
font-size: 0
}
.m-slider .owl-wrapper-outer {
height: 71px
}
.m-slider .owl-theme .owl-controls .owl-buttons .owl-prev {
left: 5px;
background-image: url(https://www.henjr.com/3/images/arrow_l.png)
}
.m-slider .owl-theme .owl-controls .owl-buttons .owl-next {
right: 5px;
background-image: url(https://www.henjr.com/3/images/arrow_r.png)
}
.m-slider .media-slider {
padding-top: 12px
}
.m-slider .media-slider .owl-item .item {
margin-left: 10px
}
.m-slider .media-slider .owl-controls .owl-pagination {
position: absolute;
top: 50px;
right: 0
}
.m-slider .media-slider .owl-controls .owl-buttons .owl-prev, .m-slider .media-slider .owl-controls .owl-buttons .owl-next {
width: 16px;
height: 66px
}
.m-slider .media-slider .owl-controls .owl-buttons .owl-prev {
left: -10px;
opacity: .5
}
.m-slider .media-slider .owl-controls .owl-buttons .owl-next {
right: -10px;
opacity: .5
}
.ec-page .article-wall-container {
padding-top: 6px
}
.ec-page .article-wall-container .nav-categories {
width: 200px !important;
display: table;
padding: 0 5px
}
.ec-page .article-wall-container .nav-categories li {
position: relative;
display: table-cell;
text-align: center
}
.ec-page .article-wall-container .nav-categories li .menu-name {
padding-top: 3px
}
.ec-page .article-wall-container .nav-categories li .menu-name > a {
color: #fff;
padding: 5px
}
.ec-page .article-wall-container .nav-categories li .menu-name .name {
display: block;
font-size: 18px;
font-weight: 700;
letter-spacing: .075em;
line-height: 26px;
padding: 0 12px
}
.ec-page .article-wall-container .nav-categories li + li .name {
border-left: 1px solid #fff
}
.ec-page .article-wall-container .nav-categories li:hover .menu-name, .ec-page .article-wall-container .nav-categories li:active .menu-name, .ec-page .article-wall-container .nav-categories li.active .menu-name {
background-color: #009a88;
border-radius: 5px
}
.ec-page .article-wall-container .nav-categories li:hover .menu-name > a, .ec-page .article-wall-container .nav-categories li:active .menu-name > a, .ec-page .article-wall-container .nav-categories li.active .menu-name > a {
background-color: #009a88
}
.ec-page .article-wall-container .nav-categories li:hover .menu-name .name, .ec-page .article-wall-container .nav-categories li:active .menu-name .name, .ec-page .article-wall-container .nav-categories li.active .menu-name .name {
border-left-color: #009a88
}
.sun-ec-block .nav-categories li .menu-name > a {
background-color: #ea5514 !important
}
.sun-ec-block .nav-categories li.active .menu-name {
background-color: #ea5514 !important
}
.sun-ec-block .nav-categories li.active .menu-name > a {
background-color: #ea5514 !important;
padding: 5px !important
}
.tbs-block div.tbs-hr {
border-width: 1px;
border-style: solid;
border-color: #ea5514
}
.sun-tbs ul.clearfix {
background-color: #fefdee !important
}
.sun-tbs ul li h3 a {
color: #ed7100 !important
}
.sun-tbs ul li p {
color: #595757 !important;
font-size: 14px;
line-height: 1.7em
}
.sun-tbs ul li strong {
color: #6b3906;
font-size: 14px;
line-height: 1.7em
}
.tbs-block {
position: relative;
text-align: left
}
.ad-tab ul.nav-categories li div a {
font-size: 18px;
font-weight: 700;
letter-spacing: .055em;
line-height: 20px;
*padding: 0 5px
}
.tbs-block ul li h3 a {
color: #006400;
font-size: 14px;
line-height: 1.5em;
font-weight: 700
}
.tbs-block {
display: none
}
.tbs-block.current {
display: inherit;
padding: 0 5px;
width: 100%
}
.tbs-block ul.clearfix {
padding: 5px;
background-color: #e9ebee
}
.tbs-block ul.clearfix li {
display: inline-table;
max-width: 128px;
width: auto;
padding-left: 10px
}
.tbs-block ul.clearfix img {
width: auto
}
.search-filter-select {
display: inherit;
background-color: #86c81e;
border-radius: 4px
}
.search-filter-select select {
padding: 0 5px 0 6px;
font-size: 17px;
margin: 3px 3px 3px 0;
letter-spacing: .095em;
font-family: "Microsoft JhengHei","微軟正黑體",Arial
}
.search-filter-select span {
align-self: center;
color: #fff;
padding: 0 5px
}
.flex-right {
display: flex;
float: right
}
@media screen and (min-width: 620px) and (max-width: 768px) {
.slider .item img {
height: 391px
}
.index-page .container {
padding-top: 402px
}
.index-page .container .main-container .slider-container {
position: absolute;
top: 80px;
left: 0;
width: 100%
}
.index-page .container .main-container .no-ad {
top: 79px
}
}
@media screen and (min-width: 520px) and (max-width: 619px) {
.slider .item img {
height: 314px
}
.index-page .container {
padding-top: 325px
}
.index-page .container .main-container .slider-container {
position: absolute;
top: 194px;
left: 0;
width: 100%
}
.index-page .container .main-container .no-ad {
top: 79px
}
}
@media screen and (min-width: 420px) and (max-width: 519px) {
.slider .item img {
height: 262px
}
.index-page .container {
padding-top: 273px
}
.index-page .container .main-container .slider-container {
position: absolute;
top: 194px;
left: 0;
width: 100%
}
.index-page .container .main-container .no-ad {
top: 79px
}
}
@media screen and (max-width: 419px) {
.slider .item img {
height: 100%;
max-height: 210px
}
.sidebar-container .top-articles, .cp-topArticles {
padding-top: 25px
}
.index-page .container {
padding-top: 220px
}
.index-page .container .main-container .slider-container {
position: absolute;
top: 194px;
left: 0;
width: 100%
}
.index-page .container .main-container .no-ad {
top: 79px
}
}
.member .trail {
margin-bottom: 30px
}
.member .trail a {
display: inline-block;
font-size: 15px;
letter-spacing: .095em;
font-weight: 700
}
.member .trail .active {
color: #f8c409
}
.member .trail span {
margin: 0 5px
}
.member .member-bg {
background-color: #fff
}
.member .member-control .member-btn {
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.35);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.35);
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.35);
padding: 13px 0;
border-radius: 3px;
display: block;
text-align: center
}
.member .member-control .input-title {
font-size: 21px;
font-weight: 700;
letter-spacing: .335em
}
.member .member-control .input-title .sub-title {
display: block;
font-size: 15px;
letter-spacing: .075em;
margin-top: 5px
}
.member .member-control .input-text {
border: 1px solid #fceeaf;
border-radius: 0;
font-size: 17px;
letter-spacing: .095em;
font-family: "Microsoft JhengHei","微軟正黑體",Arial
}
.member .member-control .input-select {
border: 1px solid #fde884;
background-color: #fff;
border-radius: 0;
-moz-appearance: none;
-webkit-appearance: none;
padding: 6px 30px 6px 8px;
font-size: 17px;
letter-spacing: .095em;
background: url(https://www.henjr.com/3/images/select-arrow.png) right center no-repeat #fff;
font-family: Microsoft JhengHei
}
.member .member-control .input-select:hover {
background: url(https://www.henjr.com/3/images/select-arrow_hover.png) right center no-repeat #fff
}
.member .member-control .radio-box, .member .member-control .check-box {
display: none
}
.member .member-control .radio-box + label, .member .member-control .check-box + label {
float: left
}
.member .member-control .radio-box + label span, .member .member-control .check-box + input + label span {
display: inline-block;
width: 21px;
height: 21px;
margin-right: 6px;
margin-bottom: -4px;
background: url(https://www.henjr.com/3/images/circle-checkbox-uncheck.png) left top no-repeat
}
.member .member-control .radio-box:checked + label span, .member .member-control .check-box:checked + input + label span {
background: url(https://www.henjr.com/3/images/circle-checkbox-checked.png) left top no-repeat
}
.member .member-control .radio-box + label {
font-size: 17px;
letter-spacing: .095em
}
.member .member-control .check-box + label {
font-size: 17px;
letter-spacing: .055em;
line-height: 1.3em
}
.member .member-control .fb-btn, .member .member-control .line-btn, .member .member-control .email-btn {
font-size: 17px;
font-weight: 700;
color: #fff;
line-height: 1em
}
.social_register_in_em {
margin-bottom: 5%
}
.member .member-control .fb-btn {
background-color: #316ea0;
border-color: #2e6da4;
width: 50%;
display: inline-block;
cursor: pointer;
font-family: 微軟正黑體
}
.member .member-control .fb-btn:hover {
background-color: #5a8ab2
}
.member .member-control .fb-btn:active {
background-color: #708698
}
.member .member-control .email-btn {
background-color: #f8c409
}
.member .member-control .check-btn {
font-size: 17px;
font-weight: 700;
color: #fff;
line-height: 1em;
letter-spacing: .135em;
background-color: #f8c409
}
.member .member-control .check-btn:hover {
background-color: #fed93c
}
.member .member-control .check-btn:active {
background-color: #d1bf76
}
.member .member-control .form-input {
padding-bottom: 50px
}
.member .member-control .form-input div {
position: relative
}
.member .member-control .form-input div + div {
padding-top: 22px
}
.member .member-control .form-input .input-left {
display: inline-block;
float: left;
width: 20%;
padding: 10px 0
}
.member .member-control .form-input .input-right {
display: inline-block;
width: 80%;
font-family: 微軟正黑體
}
.member .member-control .member-login {
padding: 102px 100px
}
.member .member-control .member-login .input-title {
letter-spacing: .1em
}
.member .member-control .member-login .fb-email {
padding-bottom: 64px
}
.member .member-control .member-login .fb-email .fb-btn, .member .member-control .member-login .fb-email .email-btn {
width: 50%
}
.member .member-control .member-login .fb-email .fb-btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.member .member-control .member-login .fb-email .email-btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.member .member-control .member-login .captcha input {
width: 55%;
float: left
}
.member .member-control .member-login .captcha .icon-captcha, .member .member-control .member-login .captcha .icon-captcha-check {
display: inline-block;
float: left
}
.member .member-control .member-login .captcha .icon-captcha {
margin-left: 5px;
width: 94px;
height: 41px
}
.member .member-control .member-login .captcha .icon-captcha-check {
margin: 5px;
width: 29px;
height: 26px
}
.member .member-control .member-login .login .forgetpw, .member .member-control .member-login .login .join {
font-size: 15px;
font-weight: 700;
letter-spacing: .137em;
margin-bottom: 10px
}
.join_check_enews {
margin-bottom: 10px
}
.forgetpw_info {
padding: 10px;
letter-spacing: 2px;
line-height: 1.27em
}
.member .member-control .member-login .login .check-btn {
clear: both
}
.member .member-control .member-join {
padding: 50px 10%
}
.member .member-control .member-join .fb-email {
font-size: 17px;
font-weight: 700;
text-align: center
}
.member .member-control .member-join .fb-email .or {
margin-left: 50px;
margin-top: 8px;
margin-bottom: 8px
}
.member .member-control .member-join .fb-email .num {
float: left;
width: 28px;
display: inline-block;
text-align: center;
padding: 6px 0;
border-radius: 50px;
border: 1px solid #f8c409;
margin: 6px 0;
color: #f8c409
}
.member .member-control .member-join .fb-email .num + .member-btn {
margin-left: 50px
}
.member .member-control .member-join .form-info {
padding: 30px 0
}
.member .member-control .member-join .form-info p {
font-size: 17px;
font-weight: 700;
letter-spacing: .06em;
margin-bottom: 14px
}
.member .member-control .member-join .form-info span {
font-size: 15px;
letter-spacing: .055em
}
.member .member-control .member-join .form-input {
padding-bottom: 40px
}
.member .member-control .member-join .form-input .input-title {
letter-spacing: .1em
}
.member .member-control .member-join .form-input .input-title.email, .member .member-control .member-join .form-input .input-title .star {
font-size: 17px;
font-weight: 400;
letter-spacing: .055em;
font-weight: bold
}
.member .member-control .member-join .form-input .input-attention {
position: absolute;
bottom: -1.3em;
left: 0;
font-size: 12px;
letter-spacing: .055em
}
.member .member-control .member-join .form-input .check-email {
display: block;
width: 23px;
height: 23px;
position: absolute;
right: -33px;
top: 8px
}
.member .member-control .member-join .join-check {
margin-bottom: 5px;
width: 110%
}
.member .member-control .member-join .join-check input[type="checkbox"] + label {
padding: 6px 0
}
.member .member-control .member-join .join-check .terms-of-service {
display: inline-block;
font-size: 15px;
letter-spacing: .055em;
color: #f8c409;
line-height: 1.3em
}
.member .member-control .member-modify {
margin-top: 20px;
padding: 58px 74px 30px
}
.member .member-control .member-modify .modify-gender {
padding-top: 10px
}
.member .member-control .member-modify .modify-gender input[type="radio"] + label {
margin-right: 20px
}
.member .member-control .member-modify .modify-birthday {
margin-top: 2px;
font-size: 17px;
letter-spacing: .095em
}
.member .member-control .member-modify .modify-birthday select {
letter-spacing: .015em;
margin-right: 3px;
margin-bottom: 3px
}
.member .member-control .member-modify .modify-addr select {
width: 49%
}
.member .member-control .member-modify .modify-addr .input-text {
margin-top: 3px
}
.member .member-control .member-modify .order-newsletter {
margin-top: 30px;
margin-bottom: 20px;
text-align: center
}
.member .member-control .member-modify .order-newsletter .input-title {
font-size: 17px;
font-weight: 700;
letter-spacing: .095em
}
.member .member-control .member-modify .order-newsletter .newsletter-check {
display: inline-block;
margin-left: 15px
}
.member .member-control .member-modify .order-newsletter .newsletter-check label {
font-size: 17px;
letter-spacing: .095em;
line-height: 15px
}
.member .member-control .member-modify .modify {
width: 65%;
margin: 0 auto
}
.member .member-center .member-center-info {
padding: 18px;
background-color: #faf9f5;
margin-bottom: 6px
}
.member .member-center .member-center-info .title {
font-size: 17px;
font-weight: 700;
letter-spacing: .095em
}
.member .member-center .member-center-info .name {
font-size: 17px;
letter-spacing: .135px;
margin-left: 10px
}
.member .member-center .member-center-features {
margin: 0 -3px;
text-align: center
}
.member .member-center .member-center-features .feature {
width: calc(100%/4);
float: left;
padding: 0 3px;
box-sizing: border-box;
display: table
}
.member .member-center .member-center-features .feature_social {
width: calc(100%/3);
float: left;
padding: 0 3px;
box-sizing: border-box;
display: table
}
.member .member-center .member-center-features .feature a {
font-size: 17px;
font-weight: 700;
letter-spacing: .155em;
line-height: 1.1em;
background-color: #fde884;
height: 44px;
overflow: hidden;
display: table-cell;
vertical-align: middle;
text-align: center
}
.member .member-center .member-center-features .feature a:hover, .member .member-center .member-center-features .feature a:active, .member .member-center .member-center-features .feature a.active {
background-color: #fdc601
}
.member .member-collect .member-collect-features {
margin-top: 40px;
text-align: center;
border-bottom: 1px solid #fdc601
}
.member .member-collect .member-collect-features a {
width: 144px;
float: left;
margin-right: 6px;
font-size: 17px;
letter-spacing: .155em;
line-height: 1.77em;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
background-color: #d4d5d7
}
.member .member-collect .member-collect-features a:hover, .member .member-collect .member-collect-features a:active, .member .member-collect .member-collect-features a.active {
background-color: #fdc601
}
.member .member-collect .member-collect-search {
padding: 14px 0
}
.member .member-collect .member-collect-search .search-input {
float: right;
position: relative;
width: 120px
}
.member .member-collect .member-collect-search .search-input input[type="text"] {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
outline: none;
padding: 0 6px;
line-height: 26px;
border: 1px solid #fdc601;
color: #fdc601;
border-radius: 3px;
font-size: 16px
}
.member .member-collect .member-collect-search .search-input input[type="text"]:-moz-placeholder {
color: #fdc601
}
.member .member-collect .member-collect-search .search-input input[type="text"]::-moz-placeholder {
color: #fdc601
}
.member .member-collect .member-collect-search .search-input input[type="text"]:-ms-input-placeholder {
color: #fdc601
}
.member .member-collect .member-collect-search .search-input input[type="text"]::-webkit-input-placeholder {
color: #fdc601
}
.member .member-collect .member-collect-search .search-input a {
width: 13px;
height: 13px;
position: absolute;
top: 8px;
right: 8px
}
.member .member-collect .member-collect-list .article-list .list {
padding: 20px 12px 20px 10px;
border-bottom: transparent
}
.member .member-collect .member-collect-list .article-list .list + .list {
margin-top: 18px
}
.member .member-collect .member-collect-list .article-list .list .list-article {
padding-top: 0
}
.member .member-collect .member-collect-list .article-list .list .list-article .title a {
color: #383838;
font-size: 19px;
line-height: 1.3em;
height: 2.6em
}
.member .member-collect .member-collect-list .article-list .list .list-article .info {
margin-top: 10px;
margin-bottom: 30px
}
.member .member-collect .member-collect-list .article-list .list .list-article .info .feature .google, .member .member-collect .member-collect-list .article-list .list .list-article .info .feature .fb, .member .member-collect .member-collect-list .article-list .list .list-article .info .feature .line, .member .member-collect .member-collect-list .article-list .list .list-article .info .feature .sms {
width: 30px;
height: 30px
}
.member .member-collect .member-collect-list .article-list .list .list-article .info .feature .google {
background-size: 16px auto
}
.member .member-collect .member-collect-list .article-list .list .list-article .info .feature .fb {
background-size: 8px auto
}
.member .member-collect .member-collect-list .article-list .list .list-article .info .feature .line {
background-size: 18px auto
}
.member .member-collect .member-collect-list .article-list .list .list-article .info .feature .sms {
background-size: 18px auto
}
.member .member-collect .member-collect-list .article-list .list .list-article .content {
height: 43px
}
.member .member-collect .member-collect-list .notice-list .list {
position: relative;
padding: 14px 18px 10px 20px;
font-size: 17px
}
.member .member-collect .member-collect-list .notice-list .list + .list {
margin-top: 18px
}
.member .member-collect .member-collect-list .notice-list .list .date {
margin-left: 46px;
margin-bottom: 40px
}
.member .member-collect .member-collect-list .notice-list .list .title {
margin-bottom: 26px
}
.member .member-collect .member-collect-list .notice-list .list .title a {
font-size: 21px;
font-weight: 700;
line-height: 1.3em;
letter-spacing: .033em
}
.member .member-collect .member-collect-list .notice-list .list .notice-read {
text-align: right;
margin-bottom: 5px
}
.member .member-collect .member-collect-list .notice-list .list .notice-read i {
display: inline-block;
width: 22px;
height: 22px;
margin-right: 6px;
margin-bottom: -5px
}
.member .member-collect .member-collect-list .notice-list .list .new {
position: absolute;
width: 36px;
height: 50px;
top: -3px;
font-size: 12px;
text-align: center;
color: #fff;
padding-top: 19px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #d4d5d7;
-moz-box-shadow: 0 -1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 -1px 1px 0 rgba(0,0,0,0.25);
box-shadow: 0 -1px 1px 0 rgba(0,0,0,0.25)
}
.member .member-collect .member-collect-list .notice-list .list .new.active {
background-color: #fdc90d
}
.member .member-collect .member-collect-list .notice-list .list .new:before {
content: "";
display: block;
width: 0;
height: 0;
color: #222;
border-bottom: 10px solid #faf9f5;
border-right: 22px solid transparent;
border-left: 22px solid transparent;
position: absolute;
bottom: -2px;
left: -4px;
right: 0;
margin: auto
}
.member .member-collect .member-collect-pager .pager .pagination li:hover, .member .member-collect .member-collect-pager .pager .pagination li.active {
background-color: #fdc601
}
.member .member-collect .member-collect-data {
text-align: center;
width: 60%;
float: left
}
.member .member-collect .member-collect-data a {
width: 85px;
float: left;
font-size: 17px;
letter-spacing: .155em;
line-height: 1.77em;
border: 1px solid #fdc601;
border-bottom: 0
}
.member .member-collect .mycollectdata {
padding-bottom: 1px;
border-bottom: 1px solid #fdc601;
margin-bottom: 10px
}
.member .member-collect .mycollectdata .member-collect-data a:hover, .member .member-collect .mycollectdata .member-collect-data a:active, .member .member-collect .mycollectdata .member-collect-data a.active {
background-color: #fde884;
border-color: #fde884
}
.mainlogin {
display: inline-block
}
@media screen and (min-width: 0px) and (max-width: 970px) {
.member .member-control .member-join, .member .member-control .member-login, .member .member-control .member-modify {
padding: 40px 5%
}
}
@media screen and (min-width: 0px) and (max-width: 768px) {
.member .member-control .input-title {
font-size: 17px
}
.member .member-control .input-title .sub-title {
display: inline-block;
margin-left: 5px
}
.member .member-control .input-text {
font-size: 17px
}
.member .member-control .input-select {
font-size: 17px
}
.member .member-control .radio-box + label {
font-size: 17px
}
.member .member-control .check-btn {
font-size: 17px
}
.member .member-control .form-input {
padding-bottom: 20px
}
.member .member-control .form-input div + div {
padding-top: 12px
}
.member .member-control .form-input .input-left, .member .member-control .form-input .input-right {
width: 100%
}
.member .member-control .member-login .fb-email {
padding-bottom: 30px
}
.member .member-control .member-login .fb-email .fb-btn, .member .member-control .member-login .fb-email .email-btn {
width: 100%;
margin-bottom: 5px
}
.member .member-control .member-login .fb-email .fb-btn {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px
}
.member .member-control .member-login .fb-email .email-btn {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px
}
.member .member-control .member-login .captcha input {
width: 40%
}
.member .member-control .member-join .form-input .input-left, .member .member-control .member-join .form-input .input-right {
width: 100%%
}
.register_label {
width: 100%
}
.register_input {
width: 100%
}
.member .member-control .member-join .form-input .check-email {
width: 18px;
height: 18px;
right: -22px
}
.member .member-control .member-modify .modify-birthday {
font-size: 17px
}
.member .member-control .member-modify .order-newsletter .input-title {
font-size: 17px
}
.member .member-control .member-modify .order-newsletter .newsletter-check label {
font-size: 17px;
letter-spacing: .095em;
line-height: 15px
}
.member .member-center .member-center-features .feature a {
font-size: 15px
}
.member .member-collect .member-collect-list .article-list .list .list-article .info {
margin-bottom: 0
}
.member .member-collect .member-collect-list .article-list .list .list-article .info span + span {
padding-top: 5px
}
.article-detail .article .gboard {
height: 261px
}
.article-detail .article .gboard span.stitle {
font-size: 36px
}
}
.icon {
background-repeat: no-repeat;
background-position: center center;
background-size: contain
}
.icon-footer-fb {
background-image: url(https://www.henjr.com/3/images/footer-fb.png)
}
.icon-footer-instagram {
background-image: url(https://www.henjr.com/3/images/footer-instagram.png)
}
.icon-footer-wifi {
background-image: url(https://www.henjr.com/3/images/rss_png.png)
}
.icon-footer-phone {
background-image: url(https://www.henjr.com/3/images/footer-phone.png)
}
.icon-footer-sms {
background-image: url(https://www.henjr.com/3/images/footer-sms.png)
}
.icon-footer-cn {
background-image: url(https://www.henjr.com/3/images/footer-cn.png)
}
.icon-footer-tw {
background-image: url(https://www.henjr.com/3/images/footer-tw.png)
}
.icon-menu-search {
background-image: url(https://www.henjr.com/3/images/menu-search.png)
}
.icon-member-search {
background-image: url(https://www.henjr.com/3/images/member-search.png)
}
.icon-fb {
background-image: url(https://www.henjr.com/3/images/fb.png);
background-size: 9px 18px;
background-color: #337ab7
}
.icon-instagram-header {
background-image: url(https://www.henjr.com/3/images/instagram.png);
background-size: 18px 17px;
background-color: #D62F6A
}
.icon-google {
background-image: url(https://www.henjr.com/3/images/google.png);
background-size: 17px 17px
}
.icon-fb2 {
background-image: url(https://www.henjr.com/3/images/fb2.png);
background-size: 18px 27px
}
.icon-instagram {
background-image: url(https://www.henjr.com/3/images/instagram.png);
background-size: 20px 20px
}
.icon-wifi {
background-image: url(https://www.henjr.com/3/images/wifi.png)
}
.icon-sms {
background-image: url(https://www.henjr.com/3/images/sms.png);
background-size: 18px 13px;
background-color: #F7B55F
}
.icon-eye {
background-image: url(https://www.henjr.com/3/images/eye.png)
}
.icon-line {
background-image: url(https://www.henjr.com/3/images/line_png.png);
background-size: 18px 17px;
background-color: #86c81e
}
.icon-line2 {
background-image: url(https://www.henjr.com/3/images/line-large.png);
background-size: 24px 23px
}
.icon-heart {
background-image: url(https://www.henjr.com/3/images/heart.png);
background-size: 18px 15px
}
.icon-heart:hover {
background-image: url(https://www.henjr.com/3/images/heart_hover.png)
}
.icon-heart:active {
background-image: url(https://www.henjr.com/3/images/heart_active.png)
}
.icon-weibo {
background-image: url(https://www.henjr.com/3/images/weibo.png);
background-size: 24px 24px
}
.icon-angle-right {
background-image: url(https://www.henjr.com/3/images/angle-right.png)
}
.icon-exclamation {
background-image: url(https://www.henjr.com/3/images/exclamation.png)
}
.icon-search-result {
background-image: url(https://www.henjr.com/3/images/search-result.png)
}
.icon-menu-mobile {
background-image: url(https://www.henjr.com/3/images/menu-mobile.png)
}
.icon-mobile-search {
background-image: url(https://www.henjr.com/3/images/mobile-search.png)
}
.icon-calendar {
background-image: url(https://www.henjr.com/3/images/calendar.png)
}
.icon-calendar:hover {
background-image: url(https://www.henjr.com/3/images/calendar_hover.png)
}
.icon-calendar:active {
background-image: url(https://www.henjr.com/3/images/calendar_active.png)
}
.icon-up {
background-image: url(https://www.henjr.com/3/images/up.png);
background-size: 37px 24px
}
.icon-email-error {
background-image: url(https://www.henjr.com/3/images/email-error.png)
}
.icon-email-success {
background-image: url(https://www.henjr.com/3/images/email-success.png)
}
.icon-captcha {
background-image: url(https://www.henjr.com/3/images/captcha.png)
}
.icon-captcha-check {
background-image: url(https://www.henjr.com/3/images/captcha-check.png)
}
.icon-checkbox-uncheck {
background-image: url(https://www.henjr.com/3/images/checkbox-uncheck.png)
}
.icon-checkbox-checked {
background-image: url(https://www.henjr.com/3/images/checkbox-checked.png)
}
.icon-video-play {
background-image: url(https://www.henjr.com/3/images/video-play.png)
}
.icon-youtube {
background-image: url(https://www.henjr.com/3/images/youtube.png);
background-size: 16px 16px
}
.icon-header-search {
background-image: url(https://www.henjr.com/3/images/mobile-search.png);
background-size: 25px 25px
}
.icon-header-fb {
background-image: url(https://www.henjr.com/3/images/header-fb.png);
background-size: 25px 25px
}
.icon-header-google {
background-image: url(https://www.henjr.com/3/images/header-google.png);
background-size: 25px 25px
}
.icon-header-line {
background-image: url(https://www.henjr.com/3/images/header-line.png);
background-size: 25px 25px
}
.icon-header-sms {
background-image: url(https://www.henjr.com/3/images/header-sms.png);
background-size: 25px 25px
}
.icon-header-menu {
background-image: url(https://www.henjr.com/3/images/header-menu.png);
background-size: 24px 17px
}
.icon-header-searchbar {
background-image: url(https://www.henjr.com/3/images/menu-search_mobile.png);
background-size: 15px 15px
}
.icon-header-member {
background-image: url(https://www.henjr.com/3/images/header-member.png);
background-size: 25px 25px
}
.index-page .latest-articles-container {
margin-bottom: 30px
}
.index-page .latest-articles-container .latest-articles, .index-page .latest-articles-container .editor-articles {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 50%
}
.index-page .latest-articles-container .latest-articles {
padding-right: 10px
}
.index-page .latest-articles-container .editor-articles {
padding-left: 10px
}
.index-page .latest-articles-container .articles .title {
padding: 24px 10px 6px 6px;
border-bottom: 1px dashed #86c81e
}
.index-page .latest-articles-container .articles .title i {
display: inline-block;
float: left;
height: 16px;
width: 11px
}
.index-page .latest-articles-container .articles .title a {
font-size: 16px;
font-weight: 700;
letter-spacing: .06em;
line-height: 1em;
height: 1em;
overflow: hidden;
padding-left: 6px;
white-space: nowrap;
text-overflow: ellipsis
}
.index-page .article-wall-container {
padding-top: 6px
}
.index-page .article-wall-container .nav-categories {
width: 100%;
display: table
}
.index-page .article-wall-container .nav-categories li {
position: relative;
display: table-cell;
text-align: center
}
.index-page .article-wall-container .nav-categories li .menu-name {
padding-top: 3px
}
.index-page .article-wall-container .nav-categories li .menu-name > a {
background-color: #fde884;
padding: 10px 0
}
.index-page .article-wall-container .nav-categories li .menu-name .name {
display: block;
font-size: 18px;
font-weight: 700;
letter-spacing: .075em;
line-height: 26px;
padding: 0 12px
}
.index-page .article-wall-container .nav-categories li + li .name {
border-left: 1px solid #fff
}
.index-page .article-wall-container .nav-categories li:hover .menu-hover, .index-page .article-wall-container .nav-categories li:active .menu-hover, .index-page .article-wall-container .nav-categories li.active .menu-hover {
position: absolute;
top: 0;
right: -3px;
width: 0;
height: 0;
border-bottom: 3px solid #fe9d09;
border-right: 3px solid transparent
}
.index-page .article-wall-container .nav-categories li:hover .menu-name, .index-page .article-wall-container .nav-categories li:active .menu-name, .index-page .article-wall-container .nav-categories li.active .menu-name {
background-color: #fdc808
}
.index-page .article-wall-container .nav-categories li:hover .menu-name > a, .index-page .article-wall-container .nav-categories li:active .menu-name > a, .index-page .article-wall-container .nav-categories li.active .menu-name > a {
background-color: #fdc808
}
.index-page .article-wall-container .nav-categories li:hover .menu-name .name, .index-page .article-wall-container .nav-categories li:active .menu-name .name, .index-page .article-wall-container .nav-categories li.active .menu-name .name {
border-left-color: #fdc808
}
.index-page .article-wall-container .article-grid {
padding-top: 3px
}
.index-page .article-wall-container .article-grid .grid {
margin-top: 33px
}
@media screen and (min-width: 0px) and (max-width: 768px) {
.index-page .sidebar-container {
display: block !important
}
.index-page .article-wall-container .article-grid .grid {
margin-top: 0
}
}
.newsletter {
background-color: rgba(238,211,171,0.1)
}
.newsletter .newsletter-header {
background-color: #86c81e;
color: #fff;
padding: 28px 0 38px;
-moz-box-shadow: 0 15px 15px 0 rgba(97,97,97,0.1);
-webkit-box-shadow: 0 15px 15px 0 rgba(97,97,97,0.1);
box-shadow: 0 15px 15px 0 rgba(97,97,97,0.1)
}
.newsletter .newsletter-header .header-top {
width: 190px;
height: 55px;
margin: auto
}
.newsletter .newsletter-header .header-top .logo-health {
background-image: url(https://www.henjr.com/3/images/newsletter.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 190px;
height: 55px;
font-size: 0
}
.newsletter .header-bottom {
margin: auto;
height: 25px;
width: 58px
}
.newsletter main .newsletter_title {
padding: 30px 0
}
.newsletter main .newsletter_title .img-container {
width: 725px;
margin: auto
}
.newsletter main .newsletter_title .img-container img {
width: 100%;
height: auto
}
@media screen and (max-width: 725px) {
.newsletter main .newsletter_title .img-container {
width: auto
}
}
.newsletter main section {
padding: 0 0 20px
}
.newsletter main section p {
color: gray;
text-align: center;
font-weight: 700;
font-size: 32px;
line-height: 1.8125em
}
.newsletter main .subscribe {
border-top: 1px solid #86c81e;
padding: 20px 0 250px
}
.newsletter main .subscribe p {
color: #86c81e;
font-weight: 700;
font-size: 22px;
letter-spacing: .204em
}
.newsletter main .subscribe .subscribe-out {
height: 46px;
width: 450px;
margin: auto
}
.newsletter main .subscribe .subscribe-out .subscribe-input {
float: left;
position: relative;
width: 450px
}
.newsletter main .subscribe .subscribe-out .subscribe-input input[type="text"] {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
outline: none;
padding: 0 12px;
line-height: 44px;
border: 1px solid #86c81e;
border-radius: 0;
color: #c3c3c3;
font-size: 21px
}
.newsletter main .subscribe .subscribe-out .subscribe-input input[type="text"]:-moz-placeholder {
color: #c3c3c3;
font-size: 21px
}
.newsletter main .subscribe .subscribe-out .subscribe-input input[type="text"]::-moz-placeholder {
color: #c3c3c3;
font-size: 21px
}
.newsletter main .subscribe .subscribe-out .subscribe-input input[type="text"]:-ms-input-placeholder {
color: #c3c3c3;
font-size: 21px
}
.newsletter main .subscribe .subscribe-out .subscribe-input input[type="text"]::-webkit-input-placeholder {
color: #c3c3c3;
font-size: 21px
}
.newsletter main .subscribe .subscribe-out .subscribe-input a {
position: absolute;
background-color: #7ec512;
color: #fff;
top: 0;
right: 0;
width: 95px;
height: 100%
}
.newsletter main .subscribe .subscribe-out .subscribe-input a:hover {
background-color: #9ed150
}
.newsletter main .subscribe .subscribe-out .subscribe-input a:active, .newsletter main .subscribe .subscribe-out .subscribe-input a.active {
background-color: #98af72
}
.newsletter main .subscribe .subscribe-out .subscribe-input a .submit {
display: block;
font-weight: 700;
font-size: 22px;
line-height: 22px;
letter-spacing: .26em;
text-align: center;
padding: 12px 0
}
@media screen and (max-width: 450px) {
.newsletter main .subscribe .subscribe-out {
width: 99%;
margin: 0
}
.newsletter main .subscribe .subscribe-out .subscribe-input {
width: 100%
}
}
.newsletter main .subscribe .cancel {
font-weight: 700;
font-size: 17px;
line-height: 17px;
letter-spacing: .2em;
padding: 18px 0 0;
text-align: center
}
.newsletter main .subscribe .cancel span {
color: gray
}
.newsletter main .subscribe .cancel span a {
display: inline-block;
color: #86c81e;
font-weight: 700;
font-size: 17px;
letter-spacing: .2em;
line-height: 17px
}
.newsletter .footer {
background-color: #86c81e;
text-align: center;
-moz-box-shadow: 0 -15px 15px 0 rgba(97,97,97,0.1);
-webkit-box-shadow: 0 -15px 15px 0 rgba(97,97,97,0.1);
box-shadow: 0 -15px 15px 0 rgba(97,97,97,0.1)
}
.newsletter .footer .footer-container {
color: #fff;
padding: 32px 0 29px;
font-size: 18px;
line-height: 1.3em
}
.newsletter .footer .footer-container p {
display: inline-block;
letter-spacing: .06em;
padding: 0 2px
}
@media screen and (min-width: 0px) and (max-width: 768px) {
.newsletter main .newsletter_title {
padding: 20px 10px 30px
}
.newsletter main section {
padding: 0 0 20px
}
.newsletter main section p {
font-size: 15px;
line-height: 1.5em
}
.newsletter main .subscribe {
padding: 20px 0 50px
}
.newsletter main .subscribe p {
font-size: 17px
}
.newsletter main .subscribe .subscribe-out .subscribe-input input[type="text"] {
line-height: 34px;
font-size: 17px
}
.newsletter main .subscribe .subscribe-out .subscribe-input a .submit {
font-size: 17px;
padding: 8px 0
}
.newsletter .footer .footer-container {
font-size: 16px
}
}
.ad {
background-color: rgba(238,211,171,0.1)
}
.ad .ad-header {
background-color: #fdc601;
color: #fff;
padding: 20px 0 25px
}
.ad .ad-header .header-top {
width: 950px;
height: 36px;
margin: auto
}
.ad .ad-header .header-top .logo-health {
background-image: url(https://www.henjr.com/3/images/ad.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 125px;
height: 36px;
font-size: 0
}
@media screen and (min-width: 0px) and (max-width: 768px) {
.ad .ad-header .header-top {
width: 100%;
padding-left: 2px
}
}
.ad .external-ad {
text-align: center
}
.ad .external-ad img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%
}
.ad #container {
width: 1260px;
margin: auto;
background-color: #fff
}
.ad #container .container-out .container-top {
padding-top: 53px
}
.ad #container .container-out .container-top ul {
width: 100%;
display: table;
border-bottom: 4px solid #fff
}
.ad #container .container-out .container-top ul > li {
position: relative;
display: table-cell;
text-align: left;
border-bottom: 2px solid #4d4d4d
}
.ad #container .container-out .container-top ul > li > a {
color: #4d4d4d;
padding: 20px 0;
font-size: 20px;
line-height: 24px
}
.ad #container .container-out .container-top ul > li + li {
border-bottom: 2px solid gray
}
.ad #container .container-out .container-top ul > li + li + li {
border-bottom: 2px solid #a0a0a0
}
.ad #container .container-out .container-top ul > li + li + li + li {
border-bottom: 2px solid #c6c6c6
}
.ad #container .container-out .container-top ul > li:hover, .ad #container .container-out .container-top ul > li:active, .ad #container .container-out .container-top ul > li.active {
border-bottom: 4px solid #fdc601
}
.ad #container .container-out .container-top ul > li:hover a, .ad #container .container-out .container-top ul > li:active a, .ad #container .container-out .container-top ul > li.active a {
color: #fdc601;
padding: 20px 0 18px
}
.ad #container .container-out .main-container {
padding-top: 64px;
margin-bottom: 76px
}
.ad #container .container-out .ad-mobile-list {
margin-bottom: 0
}
.ad #container .container-out .main-container .article-grid {
margin: 0 -15px
}
.ad #container .container-out .main-container .article-grid .grid {
padding: 0 15px 44px
}
.ad #container .container-out .main-container .article-grid .grid .grid-inner {
-moz-box-shadow: 0 0 7px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,0.2);
box-shadow: 0 0 7px 0 rgba(0,0,0,0.2);
border-bottom: 2px solid #fdc601
}
.ad #container .container-out .main-container .article-grid .grid .grid-article .title {
font-size: 17px;
font-weight: 700;
letter-spacing: 0;
color: #333;
padding: 10px 15px;
max-height: 4.3em;
min-height: 3em
}
.ad #container .container-out .main-container .article-grid .grid .grid-article p {
font-size: 17px;
letter-spacing: 0;
line-height: 1.5em;
padding: 0 15px 28px;
height: 78px
}
@media screen and (min-width: 0px) and (max-width: 768px) {
.ad #container .container-out .container-top {
padding-top: 15px
}
.ad #container .container-out .main-container {
padding-top: 4.5%
}
.ad #container .container-out .main-container .article-grid .grid {
padding-bottom: 4.5%
}
}
@media screen and (max-width: 1260px) {
.ad #container {
width: 100%
}
}
.ad .sidebar-container {
padding-top: 50px
}
.ad .sidebar-container .sidebar-ad {
padding-top: 14px
}
.ad .sidebar-container .sidebar-ad .sidebar-ad-img {
background-repeat: no-repeat;
background-position: center center;
background-size: cover
}
.ad .sidebar-container .sidebar-ad .sidebar-ad-img img {
visibility: hidden;
width: 100%;
height: 100%
}
.ad .footer-top {
background-color: #fdc601;
padding: 45px
}
.ad .footer-top .footer-container {
margin-top: 0;
text-align: center
}
.ad .footer-top .footer-container ul li {
display: inline-block
}
.ad .footer-top .footer-container ul li a {
color: #575449;
font-size: 16px;
line-height: 18px
}
.ad .footer-top .footer-container ul li + li {
padding-left: 8px
}
.ad .footer-top .footer-container ul li + li a {
border-left: 1px solid #575449;
padding-left: 12px
}
@media screen and (min-width: 0px) and (max-width: 768px) {
.ad .footer-top {
padding: 45px 0
}
}
.ad .footer-bottom .footer-container p {
text-align: center;
letter-spacing: .06em
}
.columnist-container .title {
font-size: 18px;
font-weight: 700;
letter-spacing: .195em;
border-bottom: 1px solid #4d4d4d;
padding-bottom: 8px;
padding-left: 16px
}
.columnist-container .author-list {
width: 100%;
float: left;
padding: 4% 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #c1c1c1
}
.columnist-container .author-list .author-img {
width: 28%;
float: left;
background-repeat: no-repeat;
background-position: center center;
background-size: cover
}
.columnist-container .author-list .author-img img {
width: 100%;
height: 171px
}
.columnist-container .author-list .author {
width: 72%;
float: right;
padding-left: 16px;
padding-top: 5px;
padding-bottom: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.columnist-container .author-list .author .author-name {
font-size: 17px;
font-weight: 700;
letter-spacing: .063em;
line-height: 1.24em;
color: #80c60c;
height: 21px;
margin-bottom: 10px
}
.columnist-container .author-list .author .author-intro {
font-size: 16px;
line-height: 1.4em;
margin-bottom: 20px
}
.columnist-container .author-list .author .author-article a {
font-size: 16px;
letter-spacing: .04em;
color: #007e55;
line-height: 1.4em
}
.author-container {
margin-bottom: 20px
}
.author-container .author-img {
width: 202px;
height: 240px;
float: left;
background-repeat: no-repeat;
background-position: center center;
background-size: cover
}
.author-container .author-img img {
width: 100%;
max-height: 100%
}
.author-container .author {
margin-left: 202px;
padding-left: 28px;
padding-top: 5px;
padding-bottom: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.author-container .author .author-name {
font-size: 20px;
font-weight: 700;
letter-spacing: .093em;
color: #80c60c;
text-align: center;
border-bottom: 1px solid #4d4d4d;
padding-bottom: 6px
}
.author-container .author .author-experience {
padding-top: 12px
}
.author-container .author .author-experience .title {
font-size: 16px;
font-weight: 700;
letter-spacing: .135em;
margin-bottom: 10px
}
.author-container .author .author-experience .experience {
font-size: 16px;
line-height: 1.5em;
margin-bottom: 20px
}
@media screen and (min-width: 0px) and (max-width: 768px) {
.author-container .author-img {
width: 210px;
height: auto;
margin: 0 auto;
float: none
}
.author-container .author {
padding: 0;
margin: 0;
margin-top: 20px
}
}
@media screen and (min-width: 0px) and (max-width: 520px) {
.columnist-container .author-list .author-img img {
height: 120px
}
}
.search-container.no_result {
border-top: 1px solid #a0d757;
font-size: 18px;
line-height: 1.6em;
letter-spacing: .133em;
text-align: center;
padding-bottom: 30px
}
.search-container.no_result .search-icon {
width: 86px;
height: 86px;
border-radius: 50px;
background-color: #7ec512;
background-size: auto;
margin: 30px auto
}
.search-container.result {
border-top: 1px solid #a0d757;
border-bottom: 1px solid #a0d757;
font-size: 17px;
line-height: 1.65em;
letter-spacing: .095em;
padding: 14px 0 14px 10px
}
.search-container.result .search-icon {
width: 19px;
height: 28px;
float: left;
margin-right: 6px
}
.search-container.result p {
margin-left: 28px
}
.ad-container img {
width: 100%
}
.articles-list-container {
border-top: 1px solid #a0d757
}
.header .header-top {
min-height: 63px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.header .toggle-button {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 9px;
width: 40px;
height: 40px
}
.header .header-buttons {
display: none;
position: absolute;
right: 45px;
height: 25px;
margin: auto;
top: 0;
bottom: 0
}
.header .header-buttons .icon {
font-size: 0;
width: 25px;
height: 25px;
float: left;
margin-right: 10px
}
.header .search {
display: none;
background-color: #87bf1b;
position: absolute;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 10px 25px
}
.header .search .search-input input[type="text"] {
background-color: #fff;
*border: 1px solid #fff;
color: #87bf1b
}
.header .search .search-input input[type="text"]:-moz-placeholder {
color: #87bf1b
}
.header .search .search-input input[type="text"]::-moz-placeholder {
color: #87bf1b
}
.header .search .search-input input[type="text"]:-ms-input-placeholder {
color: #87bf1b
}
.header .search .search-input input[type="text"]::-webkit-input-placeholder {
color: #87bf1b
}
@media screen and (min-width: 0px) and (max-width: 768px) {
.header .header-buttons {
display: block
}
.slideout-menu {
background-color: #fff;
top: 63px;
-moz-transition: top .4s;
-o-transition: top .4s;
-webkit-transition: top .4s;
transition: top .4s
}
.slideout-menu.show-searchbar {
top: 113px
}
}
@media screen and (min-width: 0px) and (max-width: 350px) {
.header .header-index {
padding: 19px 0 15px
}
.header .header-index .logo-yahoo {
display: block;
width: 98.7px;
height: 29.4px
}
.header .header-index .logo-health {
width: 112.7px;
height: 32.2px
}
}
.menu-mobile {
font-size: 18px;
line-height: 18px
}
.menu-mobile ul li {
padding: 0;
border: 0
}
.menu-mobile ul li .menu-name {
padding: 0 15px
}
.menu-mobile ul li .name {
font-size: 18px;
line-height: 18px;
padding: 13px 0;
color: #3e3a39
}
.menu-mobile ul li + li .name {
border-top: 1px solid #fde884
}
.menu-mobile ul li .sub-menu .sub-menu-list {
padding: 13px 0
}
.menu-mobile ul li .sub-menu .sub-menu-list li {
padding: 0
}
.menu-mobile ul li .sub-menu .sub-menu-list li .sub-menu-tab {
padding: 0 15px
}
.menu-mobile ul li .sub-menu .sub-menu-list li .sub-menu-tab .sub-menu-name {
font-size: 18px;
line-height: 18px;
padding: 13px 0;
font-weight: 400;
color: #3e3a39
}
.menu-mobile ul li .sub-menu .sub-menu-list li .sub-menu-tab .link-list .sub-menu-link {
font-weight: 400;
font-size: 14px;
color: #3e3a39;
padding: 13px 0;
border-top: 1px solid #fde884
}
.menu-mobile ul li .sub-menu .sub-menu-list li .sub-menu-tab .link-list.hidden {
display: none !important
}
.menu-mobile ul li.has-sub {
position: relative
}
.menu-mobile ul li.has-sub:before {
position: absolute;
right: 17px;
top: 16px;
display: block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent #fcca1a;
pointer-events: none
}
.menu-mobile ul li.has-sub.open-sub .menu-name {
background-color: #fcca1a;
color: #fff
}
.menu-mobile ul li.has-sub.open-sub .menu-name .name {
border-top: 1px solid #fcca1a
}
.menu-mobile ul li.has-sub.open-sub:before {
top: 17px;
border-width: 5px 5px 0;
border-color: #fff transparent transparent
}
.menu-mobile ul li.has-sub .sub-menu .has-sub:before {
display: none
}
.menu-mobile ul li.has-sub .sub-menu .has-sub.open-sub:before {
border-color: #fcca1a transparent transparent
}
.menu-mobile ul li.has-sub .sub-nav {
display: none
}
.menu-pc .menu-navigation .menu-navigation-info {
position: relative
}
.menu-pc .menu-navigation .menu-navigation-info li {
position: static
}
.menu-pc .menu-navigation .menu-navigation-info li .menu-name {
position: relative
}
.menu-pc .menu-navigation .menu-navigation-info li:hover .menu-hover, .menu-pc .menu-navigation .menu-navigation-info li:active .menu-hover, .menu-pc .menu-navigation .menu-navigation-info li.open-sub .menu-hover {
position: absolute;
top: 0;
right: -3px;
width: 0;
height: 0;
border-bottom: 3px solid #fe9d09;
border-right: 3px solid transparent
}
.menu-pc .menu-navigation .menu-navigation-info li:hover .menu-name, .menu-pc .menu-navigation .menu-navigation-info li:active .menu-name, .menu-pc .menu-navigation .menu-navigation-info li.open-sub .menu-name {
background-color: #fdc808
}
.menu-pc .menu-navigation .menu-navigation-info li:hover .menu-name > a, .menu-pc .menu-navigation .menu-navigation-info li:active .menu-name > a, .menu-pc .menu-navigation .menu-navigation-info li.open-sub .menu-name > a {
background-color: #fdc808
}
.menu-pc .menu-navigation .menu-navigation-info li:hover .menu-name .name, .menu-pc .menu-navigation .menu-navigation-info li:active .menu-name .name, .menu-pc .menu-navigation .menu-navigation-info li.open-sub .menu-name .name {
border-left-color: #fdc808
}
.menu-pc .menu-navigation .menu-navigation-info li.open-sub .sub-menu {
display: block
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu {
display: none;
position: absolute;
top: 48px;
left: 0;
padding-top: 14px;
font-size: 15px;
color: #3e3a39;
text-align: left;
z-index: 10;
width: 100%
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list {
width: 100%;
font-size: 0;
text-align: center
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li {
width: 16%;
display: inline-block;
vertical-align: top;
font-size: 15px;
text-align: left
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab {
padding-bottom: 28px;
position: relative;
border: 1px solid #fde884;
border-right: 0;
background-color: #fff
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab:before {
content: "";
position: absolute;
right: -1px;
top: 1px;
width: 1px;
height: 100%;
background: #fde884
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab .sub-menu-title {
font-weight: 700;
padding: 9px 7px 7px;
background-color: #fde884;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 1em
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab .sub-menu-title > a {
font-size: 1em
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab .link-list > li {
padding: 0 7px
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab .link-list > li .sub-menu-link {
font-size: 15px;
padding: 8px 0 7px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 1em;
border-bottom: 1px solid #fde884
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab .link-list > li .sub-menu-link:hover {
color: #727171
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab .link-list .hidden-link {
display: none
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab .more {
position: absolute;
bottom: 0;
right: 0;
padding: 5px 20px;
color: #FF9700;
font-size: 15px
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab .more:before {
position: absolute;
right: 6px;
top: 7px;
display: block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 5px;
border-color: transparent transparent transparent #FF9700
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab .more:hover, .menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab .more:active {
color: #CC7605
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab .more:hover:before, .menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab .more:active:before {
border-color: transparent transparent transparent #CC7605
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab.more-sub .link-list .hidden-link {
display: block
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab.more-sub .more:before {
top: 9px;
border-width: 0 4px 5px;
border-color: transparent transparent #FF9700
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab.more-sub .more:hover:before, .menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list > li .sub-menu-tab.more-sub .more:active:before {
border-color: transparent transparent #CC7605
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list .today-articles {
width: 36%
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list .today-articles .sub-menu-tab {
padding: 0;
border: 1px solid #fde884
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list .today-articles .sub-menu-tab .today-img {
width: 100%;
height: 180px
}
.menu-pc .menu-navigation .menu-navigation-info .sub-menu .sub-menu-list .today-articles .sub-menu-tab .link-list > li:last-child .sub-menu-link {
border: 0
}
body {
width: 100%;
height: 100%;
font-family: "Microsoft JhengHei","微軟正黑體",Arial
}
.container-with-width {
width: 630px;
margin: 0 auto
}
#container {
background-color: #fefbf6;
width: 100%
}
#container .container-bg {
width: 800px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 20px;
margin: 0 auto;
background-color: #fff;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
#container .main-container {
margin: 0px auto;
padding-bottom: 70px;
display: block;
width: 630px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
#container .sidebar-container {
width: 340px;
padding-left: 40px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: 6px
}
#container .go-top {
display: none;
position: fixed;
top: 45%;
right: 5%;
width: 70px;
height: 70px;
background-color: #fde884;
border-radius: 100px;
cursor: pointer
}
#container .mobile-hidden {
display: block
}
.right_panel {
margin-top: 15px
}
#MainVideoPlayer {
padding-top: 15px
}
div.img-square div.img {
width: 23%;
float: left
}
div.img-square div.title a {
font-size: 16px;
letter-spacing: .04em;
height: 16px;
font-weight: 700;
color: #088357;
overflow: hidden;
margin-bottom: 7px;
text-align: justify;
line-height: 1em
}
div.img-square div.txt {
font-size: 15px;
line-height: 1.27em;
height: auto;
overflow: hidden;
text-align: justify;
padding: 5px 0 5px 8px;
width: 77%;
float: right;
box-sizing: border-box
}
div.img-square div.txt .more {
text-align: right
}
.floatingR {
float: right;
-webkit-animation-name: Floating;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: Floating;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out
}
@-webkit-keyframes Floating {
from {
-webkit-transform: translate(0,0px)
}
65% {
-webkit-transform: translate(0,-10px)
}
to {
-webkit-transform: translate(0,-0px)
}
}
@-moz-keyframes Floating {
from {
-moz-transform: translate(0,0px)
}
65% {
-moz-transform: translate(0,-15px)
}
to {
-moz-transform: translate(0,-0px)
}
}
.badge {
padding: 1px 9px 2px;
font-size: 12.025px;
font-weight: 700;
white-space: nowrap;
color: #fff;
background-color: #999;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px
}
.badge:hover {
color: #fff;
text-decoration: none;
cursor: pointer
}
.badge-error {
background-color: #f5353e
}
.badge-error:hover {
background-color: #b94a48
}
@media screen and (min-width: 970px) and (max-width: 1260px) {
#container .container-bg {
width: 100%;
padding-left: 0;
padding-right: 0
}
#container .go-top {
right: 20px
}
}
@media screen and (min-width: 0px) and (max-width: 970px) {
.container-with-width {
width: 100%;
padding: 0 10px;
box-sizing: border-box
}
#container .container-bg {
width: 100%;
padding-left: 0;
padding-right: 0
}
#container .main-container {
width: 70%
}
#container .sidebar-container {
width: 30%;
padding-left: 10px
}
#container .go-top {
top: auto;
bottom: 70px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 100px;
background-size: 50%
}
}
@media screen and (min-width: 0px) and (max-width: 768px) {
.container-with-width {
width: 100%;
padding: 0 10px;
box-sizing: border-box
}
#container .container-bg {
padding-top: 75px;
padding-bottom: 50px
}
#container .main-container {
width: 100%
}
#container .sidebar-container {
width: 100%;
padding-left: 0;
display: none
}
#container .ad-mobile {
display: block;
padding-top: 0;
padding-bottom: 50px;
text-align: center
}
#container .mobile-hidden {
display: none !important
}
#container > .header {
position: fixed;
top: 0;
z-index: 1;
width: 100%
}
}
.idle_table {
background-color: #fff;
height: 100%;
display: none
}
.idle1_table {
height: 100%;
display: none
}
.idle_table .idle_top {
height: 8%;
background-color: #86c81e
}
.idle_table .idle_content {
height: 80%
}
.idle_table .idle_footer {
height: 10%
}
.idle_table .idle_table_title {
background-color: #86c81e;
float: left;
width: 95%;
height: 30px;
color: #000;
text-align: center;
padding-top: 10px;
font-weight: 700;
font-family: Microsoft JhengHei
}
.idle_table .idle-close {
background-color: #86c81e;
font-size: 28px;
float: right;
width: 5%;
height: 35px;
color: #000;
text-align: center;
padding-top: 5px;
font-family: Microsoft JhengHei
}
.idle_table .idle-close:hover {
background-color: #f0c01f;
color: #fff;
cursor: pointer
}
.idle_table .idle-hr {
width: 100%;
float: left;
height: 5px
}
.idle_left {
width: 55%;
height: 412px;
float: left
}
.idle_right {
width: 45%;
height: 412px;
float: right
}
.idle_right #idle-ad-top {
padding-top: 30px
}
.idle_left .article-list {
width: 100%;
float: left
}
.idle_left .article-list .idle-header {
position: relative;
border-bottom-style: solid;
border-bottom-color: #86c81e;
border-bottom-width: 3px;
padding: 9px 11px 3px 10px
}
.idle_left .article-list .idle-header .title {
font-size: 18px;
color: #86c81e;
letter-spacing: .12em;
float: left;
font-weight: bolder
}
.idle-content .image .title a, .link {
text-decoration: none;
font-size: 15px;
font-family: inherit;
cursor: pointer;
padding: 3px 0 0 6px
}
.idle-content .image a, .link {
display: block;
color: #3e3a39;
line-height: 18px;
border: 0;
padding: 0 0 0 6px;
background-color: transparent
}
.idle-content .image .vimg {
border-bottom-style: solid;
border-bottom-color: #000;
border-bottom-width: 5px;
border-top-style: solid;
border-top-color: #000;
border-top-width: 5px
}
.popular-video-container img {
border-bottom-style: solid;
border-bottom-color: #000;
border-bottom-width: 10px;
border-top-style: solid;
border-top-color: #000;
border-top-width: 10px
}
.idle-table-content {
margin: 0 -7px;
margin-bottom: 40px;
text-align: center
}
.idle-table-content .share-btn {
width: calc(100% / 5);
float: left;
padding: 0 7px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.idle-table-content .share-btn a {
color: #fff;
font-size: 16px;
line-height: 1.9em
}
.idle-table-content .share-btn a span {
background-position: center left;
padding-left: 20px;
display: inline-block;
background-position: center left;
padding-left: 20px;
display: inline-block
}
.idle-table-content .share-btn .google {
background-color: #cc3f29
}
.idle-table-content .share-btn .google span {
padding-left: 26px
}
.idle-table-content .share-btn .google:hover {
background-color: #d56554
}
.idle-table-content .share-btn .google:active {
background-color: #b2776e
}
.idle-table-content .share-btn .fb {
background-color: #316ea0
}
.idle-table-content .share-btn .fb span {
padding-left: 20px
}
.idle-table-content .share-btn .fb:hover {
background-color: #5a8ab2
}
.idle-table-content .share-btn .fb:active {
background-color: #708698
}
.idle-table-content .share-btn .youtube {
background-color: #ec0700
}
.idle-table-content .share-btn .youtube span {
padding-left: 22px
}
.idle-table-content .share-btn .youtube:hover {
background-color: #d56554
}
.idle-table-content .share-btn .youtube:active {
background-color: #b2776e
}
.idle-table-content .share-btn .sms {
background-color: #fdc601
}
.idle-table-content .share-btn .sms span {
padding-left: 26px
}
.idle-table-content .share-btn .sms:hover {
background-color: #fed93c
}
.idle-table-content .share-btn .sms:active {
background-color: #d0bf71
}
.idle-table-content .share-img {
position: absolute;
right: 0;
bottom: 5px
}
.popup-dfp {
border: 0;
z-index: 1000010;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%
}
.channel-top-dfp {
height: 60px;
width: 468px
}
.channel-top-dfptest {
height: 60px;
width: 468px;
display: inline-block
}
.mobile-w300-dfp {
height: 100px;
width: 300px
}
.mobile-h250-dfp {
height: 250px;
width: 300px
}
.calc-2 {
width: calc(100% / 2)
}
.calc-3 {
width: calc(100% / 3)
}
.calc-4 {
width: calc(100% / 4)
}
#retargeting_mobile {
display: inline-block
}
.linefriend_article {
display: block;
text-align: center
}
.line-friend {
font-size: 25px;
line-height: 1.15em;
margin-bottom: 10px
}
.line-friend-img {
width: 214px;
height: 72px;
object-fit: inherit
}
.linefriends {
background-color: rgba(238,211,171,0.1)
}
.linefriends .linefriends-header {
background-color: #86c81e;
color: #fff;
padding: 28px 0 38px;
-moz-box-shadow: 0 15px 15px 0 rgba(97,97,97,0.1);
-webkit-box-shadow: 0 15px 15px 0 rgba(97,97,97,0.1);
box-shadow: 0 15px 15px 0 rgba(97,97,97,0.1)
}
.linefriends .linefriends-header .header-top {
width: 190px;
height: 55px;
margin: auto
}
.linefriends .linefriends-header .header-top .logo-health {
background-image: url(https://www.henjr.com/3/images/newsletter.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 190px;
height: 55px;
font-size: 0
}
.linefriends .header-bottom {
margin: auto;
height: 25px;
width: 58px
}
.linefriends main .linefriends_title {
padding: 50px 0 32px
}
.linefriends main .linefriends_title .img-container {
width: 500px;
margin: auto
}
.linefriends main .linefriends_title .img-container img {
width: 100%;
height: auto
}
.linefriends main section {
padding: 0 0 20px
}
.linefriends main section p {
color: gray;
font-weight: 700;
font-size: 32px
}
.linefriends main section p a {
color: #124aa2;
font-size: 20px;
display: initial
}
.linefriends main section p span {
line-height: 1.5em
}
.linefriends main section p .medium {
font-size: 24px
}
.linefriends main section p .small {
font-size: 16px;
line-height: .5em
}
.linefriends main section p .policy {
font-size: 20px;
color: #807d7d;
font-weight: initial
}
.linefriends main .subscribe {
border-top: 1px solid #adadad;
padding: 20px 0 30px
}
.linefriends main .subscribe .subscribe-out th, .linefriends main .subscribe .subscribe-out td {
padding: 8px 0
}
.linefriends main .subscribe .subscribe-out td input[type="button"] {
background-color: #7ec512;
color: #fff;
font-size: 21px;
padding: 0 12px;
line-height: 44px;
border: 1px solid #adadad
}
.linefriends main .subscribe .subscribe-out td input[type="text"], .linefriends main .subscribe .subscribe-out td input[type="password"], .linefriends main .subscribe .subscribe-out td input[type="tel"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
outline: 0;
padding: 0 12px;
line-height: 44px;
border: 1px solid #adadad;
border-radius: 0;
color: #adadad;
font-size: 21px
}
.linefriends main .subscribe .subscribe-out td input[type="text"]:-moz-placeholder, .linefriends main .subscribe .subscribe-out td input[type="password"]:-moz-placeholder {
color: #adadad;
font-size: 21px
}
.linefriends main .subscribe .subscribe-out td input[type="text"]::-moz-placeholder, .linefriends main .subscribe .subscribe-out td input[type="password"]::-moz-placeholder {
color: #adadad;
font-size: 21px
}
.linefriends main .subscribe .subscribe-out td input[type="text"]:-ms-input-placeholder, .linefriends main .subscribe .subscribe-out td input[type="password"]:-ms-input-placeholder {
color: #adadad;
font-size: 21px
}
.linefriends main .subscribe .subscribe-out td input[type="text"]::-webkit-input-placeholder, .linefriends main .subscribe .subscribe-out td input[type="password"]::-webkit-input-placeholder {
color: #adadad;
font-size: 21px
}
.linefriends main .subscribe .subscribe-out th p, .linefriends main .subscribe .subscribe-out td p {
color: #adadad;
font-weight: 700;
font-size: 22px;
letter-spacing: 0;
text-align: left;
line-height: 1.8125em
}
.linefriends .footer {
background-color: #86c81e;
text-align: center;
-moz-box-shadow: 0 -15px 15px 0 rgba(97,97,97,0.1);
-webkit-box-shadow: 0 -15px 15px 0 rgba(97,97,97,0.1);
box-shadow: 0 -15px 15px 0 rgba(97,97,97,0.1)
}
.linefriends .footer .footer-container {
color: #fff;
padding: 32px 0 29px;
font-size: 18px;
line-height: 1.3em
}
.linefriends .footer .footer-container p {
display: inline-block;
letter-spacing: .06em;
padding: 0 2px
}
.linefriends main .subscribe .subscribe-out .twzip .twzip {
width: 100%
}
.linefriends main .subscribe .subscribe-out .twzip .zipcode {
width: 70px;
font-family: inherit
}
.linefriends main .subscribe .subscribe-out .twzip .zip_select {
box-sizing: border-box;
outline: 0;
padding: 0 12px;
line-height: 44px;
border: 1px solid #adadad;
border-radius: 0;
color: #adadad;
font-size: 21px;
height: 46px;
background: #fff;
font-family: inherit
}
.linefriends main .subscribe .subscribe-out .twzip .zip_addrs {
width: 100%
}
@media screen and (max-width: 725px) {
.linefriends main .linefriends_title .img-container {
width: auto;
max-width: 500px
}
}
@media screen and (max-width: 768px) and (min-width: 0px) {
.linefriends main .linefriends_title {
padding: 20px 10px 30px
}
.linefriends main section p, .linefriends main section p span {
font-weight: 700;
font-size: 20px;
line-height: 1.5em
}
.linefriends main section p .small {
font-size: 13px
}
.linefriends main section p .medium {
font-size: 16px
}
.linefriends main section p .policy {
font-size: 15px
}
.linefriends main section p a {
color: #124aa2;
font-size: 15px;
display: initial
}
.linefriends main .subscribe p {
font-size: 17px
}
.linefriends main .subscribe .subscribe-out th, .linefriends main .subscribe .subscribe-out td {
padding: 5px 0
}
.linefriends main .subscribe .subscribe-out th p, .linefriends main .subscribe .subscribe-out td p {
letter-spacing: 0;
font-size: 17px
}
.linefriends main .subscribe .subscribe-out td input[type="text"], .linefriends main .subscribe .subscribe-out td input[type="password"], .linefriends main .subscribe .subscribe-out td input[type="tel"] {
line-height: 34px;
font-size: 17px
}
.linefriends main .text_show {
padding: 0 10px
}
.linefriends main .subscribe .subscribe-out .twzip .zip_select {
height: 36px;
font-size: 17px
}
}
.linefriends .no_show {
display: none
}
.linefriends .c_red {
color: red
}
.linefriends .center {
text-align: center
}
.logintext {
display: inline-block
}
.loginicon {
margin-right: 5px
}
.member-join member-join-popup {
padding: 30px 5%
}
.social_textcenter {
width: 100%
}
.line_picture {
width: 90%
}
.clear1 {
display: inline-block;
width: 70%
}
.input-title input-left {
font-size: 15px;
display: inline-block
}
.email input-title input-left {
font-size: 15px;
display: inline-block;
width: 24%
}
.input-text {
display: inline-block
}
.member .member-control .input-text1 {
border: 1px solid #fceeaf;
border-radius: 0;
font-size: 16px;
letter-spacing: .095em;
font-family: "Microsoft JhengHei","微軟正黑體",Arial
}
.popup-win-close {
background: #fff;
float: right;
cursor: pointer
}
.popup-win-inapp-close {
background: #fff;
float: right;
cursor: pointer
}
.popup-login-close {
float: right;
cursor: pointer;
padding: 2px
}
<!--
註冊視窗-- >
.member-btn .social-textcenter .line-btn {
background-color: #00C300
}
.member .member-control .line-btn {
background-color: #00C300;
width: 48%;
font-family: 微軟正黑體;
border-color: #00C300;
display: inline-block;
cursor: pointer;
margin-bottom: 5px
}
.member .member-control .line-btn:hover {
background-color: #8FBC8F
}
.fb-register-title {
border-bottom: 2px solid #4f6aa3;
color: #4f6aa3;
font-weight: 700;
text-align: center;
padding: 10px 20px;
font-size: 120%
}
.line-register-title {
border-bottom: 2px solid #00C300;
color: #00C300;
font-weight: 700;
text-align: center;
padding: 10px 20px;
font-size: 120%
}
.line_login_button {
margin-right: 10px;
padding: 5px 20px;
color: #FFF;
font-weight: 400;
border-radius: 6px;
cursor: pointer;
background-color: #00C300;
background-image: linear-gradient(to top,#00C300,#0d0);
border-color: #00C300;
width: 45%;
text-align: center;
float: left;
margin-right: 5px
}
.fb_login_button {
padding: 5px 20px;
cursor: pointer;
border-radius: 6px;
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
width: 45%;
text-align: center;
float: left
}
.close_popup_register {
color: #666;
font-weight: 700;
padding: 5px;
font-size: 25px
}
.btn1 {
display: inline-block;
width: 100%;
background-color: #eee;
border-radius: 10px;
margin-top: 3px;
cursor: pointer
}
.login-fb-title {
cursor: pointer
}
.login-line-title {
cursor: pointer
}
.small_picture {
width: 30px;
border-radius: 50%;
margin-right: 5px;
vertical-align: middle
}
.social_picture_register {
float: left;
width: 30%
}
@media (max-width: 767px) {
.social_picture_register {
width: 100% !important;
text-align: center !important
}
.line_picture {
width: 20%
}
.clear1 {
display: inline-block;
width: 100% !important
}
.member .member-control .member-join .join-check {
margin-bottom: 3px;
width: 100%;
font-size: 12px
}
.member .member-control .member-join .join-check .terms-of-service {
font-size: 12px
}
.input-title {
font-size: 14px
}
.member .member-control .form-input div + div {
padding-top: 1px;
padding-top: 1px
}
.member .member-control .member-join .form-input {
padding-bottom: 4px
}
.member .member-control .member-btn {
padding: 13px 0
}
}
<!--
login window -->
.postlist .plc .display {
clear: both;
margin: 0;
border: 0;
line-height: 2em;
font-size: 16px;
margin-bottom: 10px;
}
.plc .pi {
padding: 7px 0;
position: relative;
}
.postlist .plc .yeei_vititle {
background: #f3f3f3;
padding: 0 10px 0 0;
border-bottom: 1px solid #eee;
border-radius: 5px;
}
.plc .avatar {
padding: 9px 0 0 10px;
display: inline;
float: left;
}
.pi img {
width: 32px;
height: 32px;
display: inline;
visibility: visible;
border-radius: 25px;
padding: 0;
border: none;
margin-top: 6px;
}
.Name {
float: left;
padding: 10px 0 0 10px;
font-size: 13px;
line-height: 20px;
font-weight: bold;
}
.lan {
color: rgb(0,134,206);
font-size: 12px;
}
.hui {
color: rgb(156,156,156);
font-size:12px;
}
.fright {
float: right;
margin: 15px 0 0 0;
}
.fright li {
float: left;
font-size: 13px;
}
.louzhu {
color: rgb(156,156,156);
margin-right: 15px;
line-height: 20px;
}
.Llike {
color: rgb(0,134,206);
cursor: pointer;
}
.Plike {
color: rgb(0,134,206);
cursor: pointer;
padding: 3px 10px;
background: rgb(54,167,255);
color: #fff;
border-radius: 5px;
font-weight: bold;
text-align: center;
}
.yeei_vititle:after {
height: 0;
display: block;
content: '';
clear: both;
}
.floor_main {
padding: 5px;
}
.con {
text-indent: 2em;
color: #4c4c4c;
font-family: "微软雅黑";
}
.read_like_list {
padding: 0 20px 60px;
}
.J_read_like_tit {
font-size: 20px;
display: block;
margin: 20px auto 30px;
width: 103px;
background: #DC5D4A;
padding: 5px 10px;
border-radius: 5px;
color: #fff;
}
.touxiang {
width: 264px;
margin: 0 auto;
}
.touxiang li {
float: left;
margin-right: 5px;
}
.touxiang li img {
width: 28px;
height: 28px;
border-radius: 100%;
}
.footer .pages {
float: left;
text-align: center;
margin-bottom: 60px;
font-family: "微软雅黑";
}
.footer .pages .footer_pag li {
float: left;
padding: 3px 10px 4px;
border: 1px solid rgb(201,201,201);
margin-bottom: 2px;
color: rgb(76,76,76);
background: rgb(248,248,248);
border-radius: 3px;
vertical-align: top;
margin-right: 6px;
font-size: 14px;
}
.footer .pages .footer_pag .one {
background: rgb(94,185,255);
color: #fff;
}
.login_tbody {
background-color: #fff
}
.emloginbtn {
display: inline-block;
width: 30%
}
.emregisterbtn {
float: right;
padding-left: 10px;
text-align: center;
width: 30%
}
.login_td {
width: 50%;
text-align: center;
vertical-align: top;
border-right: 1px solid #DFDFDF
}
.login_td2 {
text-align: left;
font-size: 15px;
font-weight: 700;
color: #333;
padding: 10px 0;
color: #86c81e
}
.login_icon_email {
padding: 0 10px
}
.login_icon_circle {
color: #666;
font-weight: 700;
font-size: 25px
}
.login_td3 {
text-align: left;
padding: 5px 20px
}
.login_input_user {
font-size: 100%;
height: 30px;
padding-left: 10px;
border: 1px solid #D4D4D4
}
.forgetpw_label {
text-align: center;
padding: 5px 20px
}
.login_td4 {
padding: 15px 20px;
text-align: center
}
.login_td5 {
text-align: left;
padding: 5px 20px
}
.login_to_register {
text-align: center;
padding: 5px 15px;
cursor: pointer;
color: #888;
font-weight: 700;
letter-spacing: 1.2px;
border: 1px solid #CCC;
border-radius: 3px;
background-image: linear-gradient(to top,#f4f4f4,#FFF)
}
.login_td5 {
text-align: left;
font-size: 15px;
font-weight: 700;
color: #333;
padding: 10px 0;
color: #86c81e
}
.login_td6 {
text-align: left;
padding: 5px 20px
}
.img {
border-radius: 5px;
cursor: pointer;
transition: .3s
}
.img:hover {
opacity: .7
}
#socialMedia_mobile_show {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: rgba(255,255,255,0.75);
z-index: 95
}
#socialMedia_mobile_show a {
font-size: 16px;
color: #fff;
text-align: center;
line-height: 17px
}
.share_for_fb_li {
background-color: #45619d;
width: 16%
}
.share_for_line_li {
background-color: #00bf00;
width: 16%
}
.join_for_ig_li {
background-color: #e4405f;
width: 16%
}
.join_for_shop_li {
background-color: #00bf00;
width: 27%
}
.join_for_line {
background-color: #008b8b;
width: 25%
}
.tool_txt {
font-size: 14px
}
.tool_txt_r {
font-size: 14px;
margin-top: 10%
}
.txt_a {
font-weight: 700
}
.text_a_r {
display: inline-block;
font-weight: 700;
font-size: 14px
}
@media (max-width: 360px) {
.text_a_r {
font-size: 12px
}
}
.lineimg {
display: inline-block
}
.line_add_friend_icon {
background-color: #22b14c;
background-image: url(https://www.henjr.com/3/images/linefri.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 220px !important
}
.article .sright .line_friend_icon {
display: inline-block;
width: 18px;
height: 18px;
vertical-align: middle;
background: url(https://www.henjr.com/3/images/line40.png) no-repeat center center;
background-size: contain;
margin: 1px 2px
}
.line_share_icon {
display: inline-block;
width: 18px;
height: 14px;
vertical-align: middle;
margin: 2px
}
.feature {
margin-top: 3px
}
.article .sright .line_share_article {
display: inline-block;
background-color: #1DC320;
position: relative;
color: #fff;
border-radius: 3px;
margin: auto;
vertical-align: bottom;
height: 20px
}
.article .sright .line_share_friend {
display: inline-block;
background-color: #1DC320;
position: relative;
color: #fff;
padding-right: 6px;
border-radius: 3px;
vertical-align: bottom
}
.article .sright .line_join_txt {
display: inline-block;
color: #fff;
font-weight: 700;
font-size: 12px
}
.sright {
text-align: right;
width: 100%
}
.line_txt {
color: #fff;
font-weight: 700;
padding: 4px 5px;
font-size: 12px
}
@media (max-width: 340px) {
.socialMedia_mobile a {
font-size: 20px
}
}
@media screen and (max-width: 1000px) {
.shares {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background: rgba(255,255,255,0.75);
z-index: 95
}
#socialMedia_mobile_show li {
float: left;
display: block;
text-align: center;
height: 55px
}
#socialMedia_mobile_show a {
display: block;
width: 100%
}
#socialMedia_mobile_show li img {
width: auto;
height: 28px;
margin-top: 4px
}
}
@media screen and (min-width: 768px) {
#socialMedia_mobile_show {
display: none !important
}
}
#twzipcode #search_subject, #twzipcode .zip_select {
border-radius: 4px;
background-color: #fff
}
#twzipcodep .zip_select {
border-radius: 4px;
background-color: #fff
}
.tabcontent .search_input .search-bar {
border: 1px solid #a9a9a9;
font-size: 100%;
font-family: 微軟正黑體;
padding: 0 0 0 3px
}
.tabcontent ul {
display: inline-flex;
text-align: center;
width: 100%
}
.tabcontent ul li {
display: inline;
width: 50%
}
.list_item .css-table {
display: inline-block;
font-size: 15px;
line-height: 23px;
width: 70%;
vertical-align: middle
}
.list_item .css-table .thead {
display: table-header-group
}
.list_item .css-table .tbody {
display: table-row-group
}
.list_item .css-table .tr {
display: table-row
}
.list_item .css-table .th, .list_item .css-table .td:nth-child(odd) {
display: table-cell;
width: 100px
}
.list_item_result .css-table {
display: inline-block;
font-size: 20px;
line-height: 23px;
width: 100%;
padding: 8px;
vertical-align: middle;
border-collapse: separate;
border-spacing: 13px
}
.list_item_result .css-table .thead {
display: table-header-group
}
.list_item_result .css-table .tbody {
display: table-row-group
}
.list_item_result .css-table .tr {
display: table-row
}
.list_item_result .css-table .th, .list_item_result .css-table .td:nth-child(odd) {
display: table-cell;
width: 140px;
border-left: 5px solid #86c81e;
padding-left: 6px
}
.mar_box .title_img {
padding: 10px;
font-size: 16px;
font-weight: 600
}
.tabcontent .search_input {
width: 33%;
display: inline-block;
margin: 5px;
font-size: 15px
}
@media screen and (max-width: 419px) {
.tabcontent .search_input {
width: auto
}
}
.tabcontent .search_label {
display: inline-block
}
.tabcontent .select_country {
border: #5aa11b solid 1px;
height: 130px;
padding: 30px 20px
}
.tabcontent .find_pharmacy {
background-color: #fff;
border-top: #86c81e solid 1px;
border-right: #86c81e solid 1px;
border-left: #86c81e solid 1px;
padding: 13px;
font-size: 18px;
font-weight: 600;
cursor: pointer
}
.tabcontent .find_hospital {
background-color: #86c81e;
border-top: #86c81e solid 1px;
border-right: #86c81e solid 1px;
border-left: #86c81e solid 1px;
padding: 13px;
font-size: 18px;
font-weight: 600;
cursor: pointer
}
.mar_box .search_text_strong {
font-weight: 700;
color: orange
}
.search_label span {
font-size: 18px
}
.search_input #search_submit {
position: relative;
padding: 5px 28px;
margin: 0 10px 10px 0;
border-radius: 4px;
font-family: 微軟正黑體;
font-weight: 700;
color: #FFF;
text-decoration: none;
background-color: #86c81e;
width: 25%
}
@media screen and (max-width: 419px) {
.search_input #search_submit {
width: auto
}
}
.search_input .animate {
transition: all .1s;
-webkit-transition: all .1s
}
.search_input #search_submit:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid
}
.result_link_block {
display: inline-block
}
.result_link_block .item_photo_box {
display: inline-block;
width: 28%;
vertical-align: middle
}
#now_c .search_result_name {
font-size: 28px;
display: inline-block;
margin-left: 5px
}
#now_c .item_box {
display: block;
border: 1px solid;
margin-bottom: 5px;
padding: 15px
}
.opendata_time {
text-align: right;
font-size: 14px;
padding: 3px 0
}
.hospital_table, .hospital_table th, .hospital_table td {
border: 1px solid #000;
padding: 5px 10px;
text-align: center
}
.hospital_data .item_in_txt {
border-left: 6px solid #86c81e;
padding-left: 6px;
margin-top: 15px;
margin-bottom: 6px;
font-weight: 700;
font-size: 16px;
line-height: 18px;
text-shadow: 0 0 1px #ccc
}
.hospital_data .phone {
width: 30%;
display: inline-block
}
.hospital_data .mobile_phone {
display: inline-block;
margin-left: 10px
}
@media (max-width: 415px) {
.hospital_data .phone {
width: 50%
}
.hospital_table, .hospital_table th, .hospital_table td {
padding: 5px
}
}
@media (max-width: 360px) {
.hospital_table, .hospital_table th, .hospital_table td {
padding: 0
}
}
#article_page img.lazyloading {
cursor: zoom-in;
position: relative;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin-bottom: 20px;
max-width: 100%;
height: auto;
display: inline
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: .3s
}
#myImg:hover {
opacity: .7
}
.modala {
display: block !important;
position: fixed !important;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #000;
background-color: rgba(0,0,0,0.7)
}
.modal {
display: none
}
.modal-content {
margin: auto;
display: block;
width: 90%;
max-width: 700px;
-webkit-animation-name: zoom;
-webkit-animation-duration: .6s;
animation-name: zoom;
animation-duration: .6s
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: 700;
transition: .3s
}
.close:hover, .close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer
}
@media only screen and (max-width: 700px) {
.modal-content {
width: 100%
}
}
@media only screen and (min-width: 700px) and (max-width: 1024px) {
.modal-content {
max-width: 900px
}
}
@media only screen and (min-width: 1024px) {
.modal-content {
max-width: 1000px
}
}
.cookiesBox {
padding: 10px;
background: rgba(0,0,0,.8);
overflow: hidden;
position: relative;
display: none;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 999
}
.cookiesBox .cookie_content {
color: #fff;
display: block;
padding: 0 30px 0 60px;
line-height: 20px;
float: left;
width: 65%;
margin: 8px auto
}
.cookiesBox a {
color: #fff;
display: inline-block;
font-size: unset;
line-height: 20px;
font-weight: 700;
white-space: nowrap
}
.cookie_check {
text-align: right;
text-decoration: none;
background: #86C81E;
border-radius: 2px;
vertical-align: middle;
padding: 7px 15px;
color: #00a3e0;
margin: 8px auto;
display: inherit;
margin-right: 70px;
float: right
}
.cookie_check .fa-check-square {
margin-right: 3px
}
@media only screen and (max-width: 700px) {
.cookiesBox {
padding: 0
}
.cookiesBox .cookie_content {
padding: 0 12px;
width: 95%
}
.cookie_check {
margin: auto;
margin-bottom: 10px;
float: initial
}
}
@media only screen and (max-width: 420px) {
.cookie_check {
font-size: 13px
}
.cookiesBox .cookie_content {
font-size: 13px
}
}
.open-btn {
display: block;
width: 30%;
margin: 30px auto 0;
border: 1px solid transparent;
background-color: #2FE7BE;
-webkit-box-shadow: 0 4px 0 #18cda6;
box-shadow: 0 4px 0 #18cda6;
color: #fff
}
.open-btn:active {
transform: translateY(2px);
-webkit-box-shadow: 0 2px 0 #18cda6;
box-shadow: 0 2px 0 #18cda6
}
.fake-hide {
opacity: 0
}
.hide {
display: none
}
.popup-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
perspective: 1000px;
z-index: 20;
transition: all .4s ease 0
}
.popup-box {
color: #fff;
position: relative;
width: 260px;
height: 400px;
background-color: #2B2F3E;
margin: 100px auto 0;
border-radius: 4px;
transition: all .1s ease 0
}
.popup-box .close-btn {
position: absolute;
font-size: 40px;
left: auto;
right: 20px;
top: 10px;
color: #fff;
cursor: pointer;
z-index: 2
}
.entry {
animation: entry 1 1s 0
}
@keyframes entry {
0% {
transform: rotateX(90deg) translateY(-200px)
}
100% {
transform: rotateX(0deg) translateY(0px)
}
}
@media (max-width: 501px) {
.open-btn {
width: 40%
}
}
@media (max-width: 320px) {
.close-btn {
font-size: 35px
}
}
.ab_hide {
display: none
}
.footer_logo {
background-image: url(https://www.henjr.com/3/images/logo-health.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 161px;
height: 60px;
font-size: 0;
margin-top: -6px
}
.overlay-container {
position: fixed;
width: 100%;
width: 100vw;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.7);
z-index: 3000;
opacity: 0;
display: none;
-webkit-transition: all .3s;
transition: all .3s;
margin: 0;
padding: 0;
border: 0
}
#div-gpt-ad-1558679862503-0 {
line-height: 0;
font-size: 0
}
#div-gpt-ad-1558679862503-0 > div {
position: absolute;
border: 0 none;
display: inline-block;
width: 100%;
height: auto
}
#div-gpt-ad-1558679862503-0 > div > iframe {
position: fixed;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
top: 50%;
-webkit-transition: all .3s;
transition: all .3s
}
.popup-close {
width: 231px;
height: 29px;
position: absolute;
left: 55px;
top: 20px;
overflow: hidden;
border: none;
background: url(https://www.henjr.com/3/images/close_popup.png) no-repeat center center;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
text-indent: 200%;
color: transparent;
outline: none;
cursor: pointer
}
.order_epaper {
position: absolute;
bottom: 35px;
left: 30%
}
#side_edminput_popup {
width: 325px;
height: 45px;
text-align: center;
font-size: 16px;
font-family: 微軟正黑體
}
.submit_epaper {
background-color: #588801;
padding: 15px;
color: #fff;
font-size: 16px;
border-radius: 4px;
font-weight: 700;
display: block;
margin-top: 8px;
text-align: center
}
.epaper-popup-login-close {
cursor: pointer;
padding: 2px;
position: absolute;
right: 0;
top: 0
}
.border {
border: 1px solid
}
.health-keywords-searchpage .keyword-list .kitem {
display: inline-block;
padding: 5px 10px;
border-radius: 32px;
border: 1px solid;
margin-bottom: 10px;
float: left;
margin-right: 10px
}
.health-keywords-searchpage .keyword-list .kitem a {
color: #000;
display: inline-block;
float: left
}
.health-keywords-searchpage .health-keywords {
display: inline-block;
width: 100%;
margin-left: 5px;
font-weight: 700;
margin-bottom: 10px
}
.w100 {
width: 100%
}
.textcenter {
text-align: center
}
.mt-20 {
margin-top: -20px
}
.mb-15 {
margin-bottom: 15px
}
.health-keywords .fab, .health-keywords .fas {
margin-right: 5px
}