@media only screen {
.vgrid-small-1, .vgrid.vgrid-small-1 {
min-height: 1.54rem;
min-height: 3.12vh
}
.vgrid-small-2, .vgrid.vgrid-small-2 {
min-height: 3.08rem;
min-height: 6.24vh
}
.vgrid-small-3, .vgrid.vgrid-small-3 {
min-height: 4.62rem;
min-height: 9.36vh
}
.vgrid-small-8, .vgrid.vgrid-small-3 {
min-height: 12.32rem;
min-height: 24.96vh
} .vgrid-small-offset-top-0, .vgrid.vgrid-small-offset-top-0 {
margin-top: 0;
margin-top: 0vh
}
.vgrid-small-offset-top-1, .vgrid.vgrid-small-offset-top-1 {
margin-top: 1.54rem;
margin-top: 3.12vh
}
.vgrid-small-offset-top-2, .vgrid.vgrid-small-offset-top-2 {
margin-top: 4.08rem;
margin-top: 6.24vh
}
.vgrid-small-offset-top-3, .vgrid.vgrid-small-offset-top-3 {
margin-top: 4.62rem;
margin-top: 9.36vh
}  .vgrid-small-offset-bottom-0, .vgrid.vgrid-small-offset-bottom-0 {
margin-bottom: 0;
margin-bottom: 0vh
}
.vgrid-small-offset-bottom-1, .vgrid.vgrid-small-offset-bottom-1 {
margin-bottom: 1.54rem;
margin-bottom: 3.12vh
}
.vgrid-small-offset-bottom-2, .vgrid.vgrid-small-offset-bottom-2 {
margin-bottom: 4.08rem;
margin-bottom: 6.24vh
}
.vgrid-small-offset-bottom-3, .vgrid.vgrid-small-offset-bottom-3 {
margin-bottom: 4.62rem;
margin-bottom: 9.36vh
}
} @media only screen and (min-width:40.0625em) {
.vgrid-medium-1, .vgrid.vgrid-medium-1 {
min-height: 1.54rem;
min-height: 3.12vh
}
.vgrid-medium-2, .vgrid.vgrid-medium-2 {
min-height: 4.08rem;
min-height: 6.24vh
}
.vgrid-medium-3, .vgrid.vgrid-medium-3 {
min-height: 4.62rem;
min-height: 9.36vh
}
} @media only screen and (min-width:64.0625em) {
.vgrid-large-1, .vgrid.vgrid-large-1 {
min-height: 1.54rem;
min-height: 3.12vh
}
.vgrid-large-2, .vgrid.vgrid-large-2 {
min-height: 4.08rem;
min-height: 6.24vh
}
.vgrid-large-3, .vgrid.vgrid-large-3 {
min-height: 4.62rem;
min-height: 9.36vh
}
} @font-face {
font-family: Baskerville;
src: url(//www.theworldofchinese.com/wp-content/themes/hysj/css/Baskerville.ttc);
}
@font-face {
font-family: Berthold;
src: url(//www.theworldofchinese.com/wp-content/themes/hysj/css/Berthold%20Akzidenz%20Grotesk%20Medium%20Condensed.otf);
}
@font-face {
font-family: BertholdBaskerville;
src: url(//www.theworldofchinese.com/wp-content/themes/hysj/css/Berthold-Baskerville-Book-Italic.ttf);
}
@font-face{
font-family:PTF55F_W;
src:url(//www.theworldofchinese.com/wp-content/themes/hysj/css/PTF55F_W.woff);
}
html{
font-size: 14px;
font-family: Berthold,Baskerville,BertholdBaskerville;
}
body{
font-size: 14px; padding: 0 20px;
max-width: 1200px;
margin: 0 auto;
word-wrap:normal;
-webkit-word-break: break-word;
-moz-word-break: break-word;
-ms-word-break: break-word;
}
h1{
font-family: Berthold;
}
h3{
font-family: BertholdBaskerville;
font-size: 1rem;
}
.h1_40{
font-size: 5rem;
line-height: 5rem;
margin: 0;
font-family: Berthold;
}
.h1_05{
font-size: 1.5rem;
font-family: Berthold;
margin: 0;
}
.BertholdBaskerville{
font-family: BertholdBaskerville;
}
p{
margin: 0;
}
a{
color: inherit;
}
.row,.column,.columns{
margin: 0;
padding: 0;
}
.sm-show{display: none;}
.borderRight{
border-right: 1px solid lightgray;
}
.borderRight.list-8{
border-right: none;
}
.borderBottom{
border-bottom: 1px solid lightgray;
}
.borderBottom.list-10
{
border: none;
}
#article_one h1,#article_two h1{
font-size: 2rem ;
}
#article_one{
border: 0;
}
#article_one.related img{
height: 300px !important;
}
#article_one img{
height: 150px !important;
}
#article_two:last-child{
border-bottom: 0;
}
#article_two img{ float: right;
}
.navBtn{
margin: 0;
color: #000000;
border-color: #ffffff;
background-color: #ffffff;
padding:1rem;
}
.navBtn:hover,.navBtn:focus{
color: #ffffff;
background-color: #000000;
border-color: #000000;
}
#submit{
margin: 0;
color: #909090;
border-color: #ffffff;
background-color: #454545;
padding: 1% 5%;float: right;
}
#submit:hover,#submit:focus{
color: #ffffff;
background-color: #000000;
border-color: #000000;
}
.logo_header{ max-height: 6.4rem;
background-color: red; }
#menu{
position: absolute; left: -220px; z-index:99;
padding: 3%;
background-color: rgba(0,0,0,0.7);
-webkit-transition: left 1s;
-moz-transition: left 1s;
-ms-transition: left 1s;
-o-transition: left 1s;
transition: left 1s;
opacity: 0;
}
#menu a{
color:#fff;
}
#menu ul{ }
#closeMenu{
float: right;
background-color:transparent;
border:none;
}
section#email{
}
section#email h2{
margin-top: 2%;
}
input.inputArea{
display: inline-block;
background-color: lightgray;
}
input.emailBtn{ width: 3rem;
height: 3rem;
background-color: #000000;
color: #ffffff;
}
textarea#comment{
background-color: lightgray;
}
textarea#comment:focus{
background: #fafafa;
border-color: #999999;
outline: none;
}
aside img  {
width: 60%;
}
.magazine{
border-top: 1px solid;
border-bottom: 1px solid;
width: 100%;
height: 10rem;
background-size: cover;
background-repeat: no-repeat;
}
.article_aside{
height: 13rem;
background-size: cover;
}
#aside_head{
margin: 5% 0;
}
#aside_head img{
display: inline-block;
width: 5%;
}
#aside_head .titleText{
display: inline-block;
font-size: 1rem;
}
.footBtn{
margin: 1rem 2rem;
color: #000000;
border-color: #ffffff;
background-color: #ffffff;
}
.footBtn:hover,.footBtn:focus{
color: #ffffff;
background-color: #000000;
border-color: #000000;
}
.logo_footer{
width: 3rem;
height: 3rem;
float: left;
margin-left: 1rem;
}
.foot-li{
margin: 2% 0 5% 10%;
}
.social_icon{
font-size: 2rem;
}
.social_icon i{
background-color: gray;
color: white;
} .firstLetter{
clear: both;
}
.firstLetter p{
line-height: 2rem;
font-size: 1.2rem;
margin-bottom: 1rem;
}
.firstLetter p a{ color: blue;
}
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.aligncenter p.wp-caption-text {
display: block;
margin-left: auto;
margin-right: auto;
text-align: left; white-space: normal;
font-size: 1.0rem;
} .category_list li{
font-family: Berthold;
font-size: 1rem;
} #author{
width: 90%;
}
.magazine-1 img{
width: 3rem;
height: 3rem;
margin-right: 4%;
float: left
}
.mgz-1{
width:500px;
height: 200px;
}
.commentlist li {
list-style: none;
border-top: 1px solid;
padding-top: 3%;
margin-bottom: 3%;
}
#article_one.top-lists-4{
padding: 0;
}
#article_one.top-lists-4.list-2,#article_one.top-lists-4.list-3,#article_one.top-lists-4.list-4
{
border-right: 1px solid lightgray;
}
.widget-ul .widget_sp_image img{
width:500px;
height:200px;
}
.home h2{
font-family: Berthold;
line-height: 2.5rem;
margin-top: 0.7rem;
}
.hysj-header-title h1{
color:#fff;
font-size:3.5rem;
}
.hysj-header-title{
height: 100%; width: 27%;
display: inline-block;
text-align: left; background-color: rgba(0,0,0,.5);
color: #ffffff; padding:5% 3% 0 3%;
}
#article-list,.lineRight{
border-right: 1px solid lightgray;padding-right: 2%
}
@media  only screen
and (min-device-width: 320px) and (max-device-width:640px){
.sm-show{display: block;}
}
@media only screen
and (min-device-width: 320px) and (max-device-width: 767px){ img.logo_header{ height: 6rem;
}
.hysj-header{
background-size: cover!important;
position: relative;
}
.hysj-header-title{
position: absolute;
bottom:0;
left:0;
width:auto;
height:auto;
padding: 18px 0 0 5px!important;
}
.hysj-header-title h1{
font-size: 2rem;
}
.first article{
width:49%;
}
.second {
width: 100% !important;
border-right:none;
}
.sidebar{
display: none;
}
.wp-caption{
width: 100%!important;
max-width: 100%;
}
.firstLetter img{
height:auto!important;
width:100%!important;
}
.hysj-content{
width:100%;
border-right:none!important;
} .hysj-related article{
width:50%;
height: 16rem;
}
.hysj-comments{
width: 100% !important;
border-right: none!important;
}
.hysj-single-head{
position: relative;
}
.hysj-single-headimage{
position: absolute;
z-index: -1;
width: 100% !important;
}
.hysj-single-title{
position: absolute;
z-index: 1;
background-color: rgba(0,0,0,.7);
color:#fff;
width:100%;
height:100%;
color:#fff;
}
.hysj-single-title .text-left{
top: 40px !important;;
left:10px !important;
}
.hysj-single-title h1{
color:#fff;
}
.hysj-single-title .text-left span,.hysj-single-title .text-left p{
color:#fff!important;
}
.article_one img,.article_two img {
height: auto !important;
}
.article_one.borderRight{
border-right: none;
}
.lineRight,#article-list{
border-right: none;
padding-right:0;
}
footer .small.button.footBtn{
padding: 0 .1rem;
font-size: .6rem;
margin: 0;
}
.hysj-related .article_one h1{
font-size: 1.5rem;
}
}
@media only screen
and (min-device-width: 375px) and (max-device-width: 767px){ .hysj-header-title h1{
font-size: 2rem;
}
footer .small.button.footBtn{
padding: 0 .3rem;
font-size: .7rem;
margin: 0;
}
.hysj-related article{
width:49%;
height: 20rem;
}
}
@media only screen
and (min-device-width: 414px) and (max-device-width: 767px){
.navBtn{ font-size: .9rem; overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
min-width:auto !important;
}
.hysj-header-title h1{
font-size: 2rem;
}
.hysj-related article{
width:49%;
height: 21rem;
}
}
@media only screen
and (min-device-width: 540px) and (max-device-width: 767px){
.navBtn{
padding: 0 1rem;
font-size: 1rem;
margin-top: 2rem;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
min-width:auto !important;
}
.hysj-header-title h1{
font-size: 2rem;
}
.hysj-related article{
width:49%;
height: 25rem;
}
footer .small.button.footBtn{
padding: 0 .5rem;
font-size: 1rem;
margin: 0;
}
}
@media only screen
and (min-device-width: 640px) and (max-device-width: 767px){
.navBtn{
padding: 0 1rem;
font-size: 1.4rem;
margin-top: 2rem;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
min-width:auto !important;
}
.hysj-related article{
width:49%;
height: 26rem;
}
footer .small.button.footBtn{
padding: 0 1rem;
font-size: 1rem;
margin: 0;
}
}
@media only screen
and (min-device-width: 720px) and (max-device-width: 767px){
.hysj-related article{
width:49%;
height: 30rem;
}
}
.alignleft {
display: inline;
float: left;
padding-right:10px;
}
.alignright {
display: inline;
float: right;
padding-left:10px;
} .fl{float: left;}
.fr{float:right;} .logoArea{
width: 14rem;
height:100%; }
.header-menu-btn{
text-align: left; height: 100%; } .product-buy-button{
padding-top:1rem;
}
.product-buy-button .navBtn{
border:1px solid #333;
outline:none;
}
.product-magazine{
display: block;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
padding-top: 1rem;
}
.bigShow{ text-align: center;
background-size: cover;
background-position: 0 0;
background-repeat: no-repeat; }
.bigShow img{
width: 100%;
}
.product-magazine .aside-list{
display: block;
margin:0;
}
.product-magazine .aside-list~.aside-list{
margin-top:1rem;
}
.subscribe-list-box{
border-top: 1px solid lightgray;
border-bottom: 1px solid lightgray;
padding: 1% 0;
}
.subscribe-list-box~.subscribe-list-box{
border-top:none;
}
.subscribe-list-box-img{
height: 100%;
}
.subscribe-list-box-img img{
width: 80%;
height: 100%;
}
.subscribe-list-box .navBtn{
min-width:10rem;
outline:none;
border: 1px solid #333;
}
.subscribe-list-box .navBtn~.navBtn,.subscribe-list-box form~.navBtn{
margin-top: 0.5rem;
}  .box{color:#333;}
.seaBtn{width: 100%;background-color: #233;
border: none;
outline: none;
box-shadow: none;
text-shadow: none;
width: 100%;
height: 29px;
color:#fff;}
.sm_select{
height: 29px;
padding: 0 0.5em;
boder:none;
outline: none;
box-shadow:none;
text-shadow:none;
}
.font-xs-default-h1{
font-size:2rem;
}
.medium-pt-80{
padding-top:80px;
}
.img-width-auto img{
max-width:none !important;
}
.list-cover{
text-align: center;
}
.f-dropdown {
left:auto;
top: 70px;
width: 170px;
right: 20px;
z-index: 89;
font-size:1.4rem;
}
.f-dropdown:before {
top: -12px;
left: 147px;
z-index: 89;
}
.f-dropdown:after {
top: -15px;
left: 146px;
z-index: 88;
}
.f-dropdown li {
font-size:1.6rem;
}
.headMenuBtn{
font-size:45px;
line-height:6rem;
}
.medium-h-25{
height:25rem;
}
@media only screen
and (min-device-width:320px) and (max-device-width: 767px){
.font-xs-default-h1{
font-size:1.4rem;
}
html,body{
font-size:12px;
}
.small-no-h{
height:auto!important;
}
.h1_40 {
font-size:2rem;
line-height:3rem;
}
.small-pt-10{
padding-top:10px;
}
.small-hide{
display: none;
}
.hysj-bottom-subscribe-tax-wpsc_product_category{
display: block !important;
}
.borderRight{
border-right:none;
}
.dot{
font-size:20px;
line-height: 1;
display: block;
text-align: center;
height: 100%;
font-style: normal;
transform: rotate(90deg);
color: #333;
vertical-align: middle;
padding-left:48px;
}
.headMenuBtn{
font-size:35px;
line-height:6rem;
}
.firstLetter p{
line-height: 2rem;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.subscribe-list-box{
padding: 3% 0;
}
.subscribe-list-box-img {
margin-bottom: 10px;
}
.alignright{
padding-left: 0;
}
.alignleft{
padding-right: 0;
}
} .reveal-modal{
padding-top: 5rem;
} .list-tags{
color: #ed2a26;
}
.list-tags,.list-title{
font-family:Berthold,"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
.list-desc{
font-family:PTF55F_W,"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
padding-bottom: 6px;
}
.list-cover img{
width: 100%;
}
.article_two{
padding:10px 0!important;
}
.articleCont{
font-family:PTF55F_W,"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif!important; 
} .headerCont{
border-bottom: 1px solid; }
.topSeaBtn{
padding:1rem 1rem 1.0625rem;
background-color:#000;
color:#fff;
}
.topSeaBtn:hover,.topSeaBtn:focus{
background-color:#333;
} .topicBox{max-height:10rem;overflow:hidden;}
.topicBox .cat-item{display: inline-block;max-width:48%;}
.topicBox .cat-item::after{
content:",";
}
.topicBox .cat-item:last-child::after{
content:"";
} .magazingCover{
height: 300px;
}
.magazineType{
height: 2rem;
}
.magazineTitle{
height: 2rem;
}
.txtSynopsis{
height: 13rem;
}
.magazineType,.magazineTitle,.txtSynopsis{
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space:nowrap;
}
.txtSynopsis{
white-space:normal;
}
.searchBoxIn{
padding-top: 1rem;
float: right;
} .topMagazineBanner{
max-width: none;
overflow: hidden;
} .footerSmallBtnBox{
font-size:2rem;
padding-right: 2rem;
line-height: 1.5;
}
.footMenu{
position: absolute;
bottom:3rem;
display: none;
z-index: 10;
right: 0;
width: 60%;
}
.fBtn{
padding: 0!important;
margin: 0!important;
font-size: 1.8rem!important;
line-height:3rem;
margin-bottom: 1px!important;
background-color:#000;
color:#fff;
} .wpsc_checkout_table{
width: 100%;
} .ec-size .ec-store .grid-product__buy-now .form-control__button {
background: red;
} .ec-size .ec-store .grid-product__buy-now .form-control__button {
color: white;
} .collapsible-1 {
background-color: #ccc;
color:black;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.collapsible-1:focus{
outline: none;
}
.active, .collapsible-1:hover {
background-color: rgb(223, 15, 15);
color:white;
}
.collapsible-1-content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}