/*
Website Url:https://www.boke8.net
*/
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box;}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section { display: block; }
div,
html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
select,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main { margin: 0; padding: 0; }
body { background-color: #fff; color: #777c7f; font: 16px/1.75em "Helvetica Neue",Helvetica,Arial,sans-serif; overflow-x: hidden; width: 100%; word-break: break-all; word-wrap: break-word; }
table { background-color: transparent; border-spacing: 0; border-collapse: collapse; font-size: 16px; width: 100%; border-top: 1px solid #ddd; border-left: 1px solid #ddd; box-sizing: border-box; }
table th { background-color: #f8f8f8; text-align: center; box-sizing: border-box; }
table td,
table th { padding: 10px; border: 1px solid #ddd; box-sizing: border-box; }
button,
select,
input,
textarea { background: none; border: none; border-radius: 0; -webkit-border-radius: 0; color: #333; outline: none; -webkit-appearance: none; }
input:focus { outline: none; }
textarea { resize: none; }
a { text-decoration: none; outline: none; color: #e2574c;-moz-transition:color 0.2s linear;-o-transition:color 0.2s linear;-webkit-transition:color 0.2s linear;transition:color 0.2s linear; }
a:focus { outline: none; -moz-outline: none; }
a:hover { color: #cb4e44; }
a:active{color:#b5463d;}
a img { border: none; }
img{max-width:100%;height:auto;}
li { list-style: none; }
h1,h2,h3,h4,h5,h6{color:#2b414d;}
/* common -------------------------- */
.inner{width:90%;max-width:1280px;margin:0 auto;}
.error{color:#2b414d!important;border-color:#2b414d!important;}
.success{color:#00CC0!important;border-color:#00CC00!important;}
.disabled{color:#999999!important;border-color:#999999!important;cursor:default!important;}

input[type="button"],input[type="submit"],input[type="reset"],button,.button{color:#fff;font-weight:500;background-color:#e2574c;border:0;display:block;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-transition:background-color 0.2s linear;-o-transition:background-color 0.2s linear;-webkit-transition:background-color 0.2s linear;transition:background-color 0.2s linear;}
input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover,button:hover,a.button:hover{background-color:#cb4e44;color:#ffffff;}
input[type="button"]:active,input[type="submit"]:active,input[type="reset"]:active,button:active,a.button:active{background-color:#b5463d;color:#ffffff;}
input[type="text"],input[type="tel"],input[type="email"],.input-text{color:#2b414d;background-color:#f8f8f8;border:2px solid #ececec;border-radius:5px;-moz-transition:background-color 0.2s linear,border-color 0.2s linear;-o-transition:background-color 0.2s linear,border-color 0.2s linear;-webkit-transition:background-color 0.2s linear,border-color 0.2s linear;transition:background-color 0.2s linear,border-color 0.2s linear;}
input[type="text"]:focus,input[type="tel"]:focus,input[type="email"]:focus,.input-text:focus{background-color:#ffffff;border-color:#cccccc;}
.separator{height:2px;font-size:0;line-height:0;background:#e4e7e7;clear:both;}



.dark{color:#2b414d;}



/* header */
#header .inner {padding:2.5% 0; border-bottom:2px solid #e4e7e7; display: flex; justify-content: space-between; align-items: center;}
/* logo */
#logo{width:26.5625%;}
#logo h1 {padding-bottom:20%; position: relative;}
#logo a{display:block; position: absolute; left:0; top:0; width: 100%; height: 100%; background:url(images/logo@2x.png) no-repeat left center; background-size: contain; text-indent: -99999em; overflow-x: hidden;}

#navbtn {position:absolute; right:0; top:50%; transform: translateY(-50%); z-index: 11; width: 22px; height: 20px; display: none; cursor: pointer;}
#navbtn:before,
#navbtn:after,
#navbtn i {display: block; width: 100%; height: 2px; background-color: #cb4e44; position:absolute; left:0;}
#navbtn i {top:50%; transform:translateY(-50%);}
#navbtn:before {content:''; top:3px;}
#navbtn:after {content:''; bottom:3px;}
/* menu */
#menu {width:73%;}
#menu > ul {display:flex; justify-content: flex-end;}
#menu > ul > li{margin-left:5%;}
#menu li ul{display:none;}

#social {padding:2% 0 5%;}
#social ul {display: flex; justify-content: center;}
#social li{margin:0 2%; position: relative;}
#social a{display:block;width:32px;height:32px;text-indent:-9999px;background:#ccd0d2 no-repeat center center; background-size: auto 55%;border-radius:50%;transition:background-color 0.2s linear;}
#social a:hover {background-color: #cb4e44;}
#social .qrcode {position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; margin-bottom: 10px; background-color: #fff; padding: 5px; border: 1px solid #e8e8e8; width: 120px; display: none;}
#social .qrcode:after {width: 6px; height: 6px; background-color: #fff; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; transform: rotate(45deg); content: ''; display: block; position: absolute; left: 50%; bottom: -5px; margin-left: -5px;}
#social .qrcode img {display: block; width: 100%; height: auto;}
#social .weibo {background-image: url(images/icon_weibo.png);}
#social .weixin {background-image: url(images/icon_weixin.png);}
#social .qq {background-image: url(images/icon_qq.png);}
/* footer -------------------------- */


.footer-image{padding-bottom:250px;background:url(images/footer.jpg) no-repeat 50% 0;background-size:cover;}
.rows {display: -webkit-box; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}
/* content -------------------------- */
.features{margin:0 0 88px;}
.features-columns{margin:0 -10px;}
.features-column{float:left;width:33.33%;padding:0 25px;text-align:center;font-size:14px;line-height:21px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 80px;}
.features-column h3{position:relative;margin:0 0 40px;}
.features-column h3:after{content:"";left:50%;bottom:-20px;height:2px;width:22px;margin:0 0 0 -11px;background:#ccd0d2;position:absolute;-moz-transition:background 0.15s linear;-o-transition:background 0.15s linear;-webkit-transition:background 0.15s linear;transition:background 0.15s linear;}
.features-column:hover h3:after{background:#e2574c;}
.ico-bulb,.ico-rocket,.ico-flag{display:block;margin:0 auto 30px;height:64px;width:64px;background-position:-200px 0;}
.ico-bulb{background-position:-100px 0;width:44px;}
.ico-flag{background-position:-300px 0;}

/* slider -------------------------- */
.slider{margin:0 0 93px;}

/*post*/
.post{margin-bottom:6.25%; padding-bottom: 6.25%; border-bottom:2px solid #e4e7e7;}
.post .box {display:flex; justify-content: space-between; align-items: center;}
.post .thumbnail {width: 320px;}
.post .thumbnail a {display: block; padding-bottom: 75%; position: relative; overflow: hidden; border-radius: 5px;}
.post .thumbnail img {display: block; width: 100%; height: 100%; position: absolute; left:0; top:0;}
.post .text {width:calc(96.5% - 320px);}
.post .title {font-size: 24px; line-height: 1.5em; margin-bottom: 2.5%;}
.post .excerpt {line-height: 2em; max-height: 6em; -webkit-line-clamp:3;}
.post:nth-child(2n) .box {flex-direction: row-reverse;}

/*article*/
#article .title {font-size: 32px; font-weight: normal; line-height: 1.35em; text-align: center; margin-bottom:3.5%;}
#postmeta{padding-bottom:1.5%;font-size:14px; line-height: 1.5em; text-align:center; color:#999; border-bottom:1px solid #e4e4e4; margin-bottom:3.5%;}
#postmeta span{display: inline-block; vertical-align: middle; margin:0 2%;}

/*article*/
.entry {font-size:18px; line-height: 1.875em; color:#333; margin-bottom:2.5%;}
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 {margin-bottom:2%; line-height: 1.875em;}
.entry p, .entry ul, .entry ol {margin-bottom:2%;}
.entry img,
.entry video {max-width:100%; height:auto!important;}
.entry ul li {list-style:outside disc none; padding-left:1em; margin-left:2em;}
.entry ol li {list-style:outside decimal none; padding-left:1em; margin-left:2em;}
.entry blockquote {margin:0 2em 2%; padding:2% 2% 0; font-style:italic; overflow: hidden; color:#555; border:1px dashed #eee; background-color:#f9f9f9; border-radius:3px;}
.entry hr {border:none; border-bottom:1px solid #999; margin-bottom:2%;}
.entry li p {margin-bottom: 0;}


.big{font-size:18px;line-height:24px;font-weight:500;}
.big .button{margin:0 0 10px;}

#slides {margin-bottom: 3.125%;}
#slides .inner {border-radius:5px; overflow: hidden;}
#slides .swiper-pagination-bullet-active{background-color: #e2574c;}

.box.visible{display:block;}
.tabs-wrapper{text-align:center;}
.tabs{display:inline-block;}
.tabs li{float:left;width:12px;height:12px;background:#ccd0d2;margin:0 6px 0 7px;text-indent:-9999px;-moz-transition:background 0.15s linear;-o-transition:background 0.15s linear;-webkit-transition:background 0.5s linear;transition:background 0.15s linear;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;cursor:pointer;}
.tabs li.active{background-color:#e2574c;}


.boxtitle {margin-bottom: 3.5%; font-size: 22px; line-height: 1.5em;}


/*评论留言*/
#commentlist { overflow: hidden; margin-bottom: 2.43%; }
#commentlist li { overflow: hidden; margin-bottom: 2.5%; padding-bottom: 2.5%;border-bottom: 1px solid #eee; }
#commentlist .avatar { float: left; width: 60px; height: 60px; border-radius: 5px; overflow: hidden; }
#commentlist .avatar img { display: block; width: 100%; height: 100%; }
#commentlist .info { margin-left: 80px; overflow: hidden; position: relative; padding-right: 30px;}
#commentlist .name { font-size: 16px; font-weight: bold; line-height: 1.35em; color: #333; text-transform: uppercase; margin-bottom: 5px;}
#commentlist time { display: block; color: #999; font-size: 12px; line-height: 2em; }
#commentlist .replay {position: absolute; right: 0; top: 0; font-size: 12px; font-weight: bold; color: #000; }
#commentlist .text { padding: 5px 0; font-size: 16px; color: #555; }
#commentlist li li { margin: 2.43% 0 0 2%; padding-bottom: 0; border-bottom: none; }

/*评论框*/
#comment .item { overflow: hidden; margin-bottom: 15px; position: relative; }
#comment label { display: block; float: left; height: 40px; line-height: 40px; font-size: 16px; }
#comment label i { font-style: normal; color: #f00; }
#comment .input { margin-left: 80px; overflow: hidden;}
#comment .text { width: 100%; height: 40px; line-height: 24px; padding: 8px 15px; font-size: 16px; font-family: 'Microsoft Yahei'; -webkit-appearance: none; display: block; }
#comment textarea.text { height: 150px; resize: none; }
#comment .submit {display: block; width: 100%; color: #fff; background-color: #555; border-radius: 5px; height: 40px; font-size: 16px; cursor: pointer; margin-top: 3.125%;}
#comment .submit:hover { opacity: .9; }
#comment .verify { position: relative; }
#comment .verify .input { margin-right: 126px; }
#comment .verify img { display: block; position: absolute; right: 0; bottom: 0; height: 100%; width: auto; cursor: pointer; border-radius: 2px; }
.postbottom {margin-left: 80px; text-align: right; font-size: 14px; line-height: 1.5em;}

#copyright{text-align:center;font-size:14px;line-height:2em;margin-bottom:5%;text-transform:uppercase;}

#container {padding:3.125% 0;}

#pagenavi{padding-bottom:30px; font-size: 16px; text-align: center;}
#pagenavi a,
#pagenavi .now-page {display:inline-block; vertical-align: middle; margin:2px 0.5%; padding:0 5px;}

#newsletter{margin-bottom:3.125%; font-size: 18px;}
#newsletter form{display:block; position: relative; padding-right:4.72em;}
#newsletter .submit {position:absolute; right:0; top:0; height: 100%; font-size: 1em; width: 3.9em;}
#newsletter .text {display: block; width: 100%; height: 2.778em; line-height: 1.667em; padding:0.555em 1.111em; font-size: 1em;}

/* Responsive all mobile sizes -------------------------- */
@media (max-width:1280px){
    #menu > ul > li {margin-left: 4%;}
    #newsletter {font-size: 16px;}
    .post .title {font-size: 1.875vw;}
    .entry {font-size: 16px;}
    #article .title {font-size: 2.5vw;}
    .boxtitle {font-size: 20px;}
    #commentlist .avatar {width: 50px; height: 50px;}
    #commentlist .info {margin-left: 65px;}
    #comment label,
    #comment .text {font-size: 14px;}
    #comment .input,
    .postbottom {margin-left: 70px;}
}
@media (max-width:1024px){
    body{font-size:14px;}
    #header .inner {position: relative; display: block;}
    #logo {width: 245px;}
    #navbtn {display: block;}
    #menu {position:fixed; left:0; top:0; width: 100%; height: 100%; background-color: rgba(0,0,0,.1); z-index: 10; display: none;}
    #menu > ul {position:fixed; right:0; top:0; width: 250px; height: 100%; background-color: #fff; box-shadow: 0 -1px 5px rgba(0,0,0,.1); display: block; padding:10vh 35px; overflow-y: auto; -webkit-overflow-scrolling:touch; transform: translateX(100%); transition: all .3s;}
    #menu > .show {transform: translateX(0);}
    #menu > ul > li {margin-left: 0;}
    #menu li {line-height: 50px;}
    #newsletter {font-size: 14px;}
    .post .thumbnail {width: 250px;}
    .post .text {width:calc(96.5% - 250px);}
    .post .title {font-size: 18px;}
    #article .title {font-size: 24px;}
    .boxtitle {font-size: 18px;}
    #commentlist .avatar {width: 40px; height: 40px;}
    #commentlist .info {margin-left: 55px;}
    #commentlist .name {font-size: 14px; margin-bottom: 0;}
}
@media (max-width:768px){
    
   
   
    
    #header .inner {padding:15px 0;}
    #logo {width: 200px;}
    #container {padding:20px 0;}
    #newsletter,
    #slides {margin-bottom: 20px;}
    .post .box {display: block;}
    .post .thumbnail {width: auto; margin-bottom: 5%;}
    .post .text {width:100%;}
    .entry {font-size: 14px;}
    #article .title {font-size: 22px;}
    #postmeta {font-size: 12px;}
    .boxtitle {font-size: 16px; margin-bottom: 5%;}
    .footer-image {padding-bottom: 32.552%;}
    #commentlist li {padding-bottom: 15px; margin-bottom: 15px;}
    #commentlist .avatar {width: 35px; height: 35px;}
    #commentlist .info {margin-left: 45px;}
    #commentlist time {line-height: 1.75em;}
    #commentlist .replay {line-height: 1.5em;}
    #commentlist .text {padding: 0;}
    #comment label {float: none; line-height: 1.75em; height: auto;}
    #comment .input {margin-left: 0;}
    .postbottom {font-size: 12px; margin-left: 0;}
    #comment .text {height: 36px; padding: 6px 10px;}
    #comment .verify img {height: 36px;}
    #comment .submit {height: 36px; font-size: 14px;}
}