.blog-page {margin-top: 112px; padding-bottom: 80px;}
.blog-page .row-0{margin: 0 0px;}
.blog-page .row-0 > div{padding: 0px;}
.blog-page .row-50{margin: 0 -25px;}
.blog-page .row-50 > div{padding: 0 25px;}
.blog-page .row-60{margin: 0 -30px;}
.blog-page .row-60 > div{padding: 0 30px;}
.blog-header{padding-top: 20px; padding-bottom: 50px;}
.blog-header .height{height: auto;}
.blog-header .nav-list{padding: 0; margin: 0; list-style: none;}
.blog-header .nav-list:before,
.blog-header .nav-list:after{content: ''; display: table; clear: both;}
.blog-header .item{float: left; position: relative;}
.blog-header .item+.item{margin-left: 160px;}
.blog-header .item:before{content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 3px; background-color: #D54E38; opacity: 0;}
.blog-header .item.active:before{opacity: 1;}
.blog-header .link{font-size: 25px; font-weight: 500; line-height: 1; color: #282828;}
.blog-header .nav-list:hover .link{opacity: 0.5;}
.blog-header .nav-list:hover .link:hover{opacity: 1;}
.blog-header .search-block{width: 360px; height: 60px; border: 1px solid #282828; border-radius: 50px; background-color: #fff;}
.blog-header .search-block .form-control {font-size: 18px; padding: 10px 40px; color: #282828; min-height: auto;background-color: transparent; border: none;}
.blog-header .search-block .action{width: 30px; margin-right: 20px;}
.blog-header .search-block .btn{min-width: 40px; height: 40px; line-height: 40px; font-size: 30px; color: #D54E38; 
    border: none; background-color: transparent; padding: 0; border-radius: 50%;
}
.blog-header .search-block .btn:hover{color: #fff; background-color: #D54E38;}
.blog-header .thumb-cover{padding-top: 30px;}
.blog-header .thumb-cover .cover{padding-bottom: 40%;}

.blog-body{position: relative;}
.blog-body .thumb{border-radius: 20px; overflow: hidden;}
.blog-body .thumb .cover{transition: all 600ms ease-out; transform: scale(1.0); height: 337px;}
.blog-body .link:hover .thumb .cover{transform: scale(1.1);}
.blog-body .content{padding-top: 25px;}
.blog-body .content .tag,
.blog-body .content .tag-sub{font-family: 'Pridi', serif; font-size: 21px;line-height: 1.2em;}
.blog-body .content .tag{font-weight: 300;color: #637B69;}
.blog-body .content .tag-sub{font-weight: 200;color: #6D7278;}
.blog-body .content .title{margin: 10px 0; line-height: 1.4em; height: 2.7em; color: #282828; font-size: 39px; font-weight: 500; 
    display: -webkit-box; overflow: hidden; transition: all 400ms ease-out;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.blog-body .content .desc{font-family: 'Pridi', serif; font-size: 30px; font-weight: 300; line-height: 1.4em; 
    height: 5.6em; color: #282828; margin-bottom: 20px;
    display: -webkit-box; overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}
.blog-body .link:hover .content .title{color: #D54E38;}
.blog-body .item-list{padding: 0; margin: -35px -25px; list-style: none;}
.blog-body .item-list:before,
.blog-body .item-list:after{content: ''; display: table; clear: both;}
.blog-body .item{float: left; position: relative; padding: 35px 25px; min-height: 608px;}
.blog-body .banner-box{border-radius: 20px; border: 1px solid #707070; overflow: hidden; background-color: #E5E5E5;
    display: flex; align-items: center; justify-content: center; font-size: 25px; color: #282828;
    font-family: 'DMSans'; font-style: italic; font-weight: 400;
}
.blog-body .banner-box,
.blog-body .banner-box .cover{ height: 337px; width: 100%;}
.blog-body .banner-bar{padding-top: 70px; padding-bottom: 80px;}
.blog-body .banner-bar .banner-box,
.blog-body .banner-bar .banner-box .cover{height: 237px;}
.blog-body .highlight{padding-bottom: 70px;}
.blog-body .highlight .cover{height: 555px;}
.blog-body .highlight .content{padding-top: 0;}
.blog-body .highlight .content .title{font-size: 55px; margin-top: 5px;}
.blog-body .list-content{position: relative;}
.blog-body .blog-list .item{width: 50%;}
.blog-body .banner-list .item{width: 100%;}

.blog-page.-detail{overflow: hidden;}
.blog-page.-detail .head-info .container,
.blog-page.-detail .body-info .container{width: 1000px;}
.blog-page.-detail .head-info .tag,
.blog-page.-detail .head-info .tag-sub{font-family: 'Pridi', serif; font-size: 21px;line-height: 1.2em;}
.blog-page.-detail .head-info .tag{font-weight: 300;color: #637B69;}
.blog-page.-detail .head-info .tag-sub{font-weight: 200;color: #6D7278;}
.blog-page.-detail .head-info .title{margin: 20px 0 15px 0; line-height: 1.4em; color: #282828; font-size: 39px; font-weight: 500; }
.blog-page.-detail .social-list{padding-top: 20px; padding-bottom: 50px;}
.blog-page.-detail .social-list .item-list{padding: 0; margin: 0;}
.blog-page.-detail .social-list li+li{margin-left: 10px;}
.blog-page.-detail .social-list .link{width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background-color: #282828;
}
.blog-page.-detail .social-list .link .lazy{filter: brightness(0%) invert(1) grayscale(1);
    transition: all 400ms ease-out;
}
.blog-page.-detail .social-list .link:hover .lazy{filter: brightness(1.0) invert(0) grayscale(0);}
.blog-page.-detail .social-list .item-list:hover .link{opacity: 0.5;}
.blog-page.-detail .social-list .item-list:hover .link:hover{opacity: 1;}

.blog-page.-detail .editor-content p{margin-bottom: 1.8em; line-height: 1.5em; font-weight: 200;}
.blog-page.-detail .editor-content strong{font-weight: 400;}
.blog-page.-detail .editor-content h1,
.blog-page.-detail .editor-content h2,
.blog-page.-detail .editor-content h3,
.blog-page.-detail .editor-content h4,
.blog-page.-detail .editor-content h5,
.blog-page.-detail .editor-content h6{line-height: 1.4em;font-weight: 300; font-family: 'Pridi', serif;font-size: 30px; margin: 0 0 0.8em 0;}
.blog-page.-detail .editor-content .important{ padding: 30px 0; border-top: 1px solid #B2BEB5; border-bottom: 1px solid #B2BEB5; margin-bottom: 30px;}
.blog-page.-detail .editor-content .important > *{margin-bottom: 0;}
.blog-page.-detail .credit{padding-top: 35px; padding-bottom: 45px; border-top: 1px solid #B2BEB5;}
.blog-page.-detail .credit-box{}
.blog-page.-detail .credit-box .thumb{width: 120px; height: 120px; border-radius: 50%;}
.blog-page.-detail .credit-box .thumb .cover{height: 100%;}
.blog-page.-detail .credit-box .content{padding-top: 0;}
.blog-page.-detail .credit-box .tag{font-size: 18px; font-weight: 300;}
.blog-page.-detail .credit-box .title{font-size: 25px; font-weight: 300; font-family: 'Pridi', serif; height: auto; display: block;}
.blog-page.-detail .credit-box .desc{font-size: 18px; font-weight: 200; height: auto; display: block; margin-bottom: 0;}
.blog-page.-detail .suggested-txt{border-top: 1px solid #B2BEB5; padding-top: 35px; padding-bottom: 40px;
    font-size: 30px; font-weight: 300; line-height: 1; color: #282828; text-align: center;
}
.blog-page.-detail .suggested-slide{margin: 0 -8px;}
.blog-page.-detail .suggested-slide .item{padding: 0 8px; min-height: inherit;}
.blog-page.-detail .suggested-slide .link{position: relative; display: block;}
.blog-page.-detail .suggested-slide .thumb{border-radius: 0;}
.blog-page.-detail .suggested-slide .cover{height: 0; padding-bottom: 68%;}
.blog-page.-detail .suggested-slide .content{position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; 
    background-color: rgba(0, 0, 0, .5);padding: 15px 30px; transition: all 400ms ease-out;
}
.blog-page.-detail .suggested-slide .link:hover .content{background-color: rgba(0, 0, 0, .9);}
.blog-page.-detail .suggested-slide .txt{
    font-family: 'Pridi', serif; font-size: 21px;line-height: 1.2em; font-weight: 300; color: #fff;
    display: -webkit-box; overflow: hidden; max-height: 2.4em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.blog-page.-detail .suggested-slide .slick-dots{position: relative; bottom: 0; margin-top: 10px;}
.blog-page.-detail .suggested-slide .slick-dots li button {background: #282828;}
.blog-page.-detail .suggested-slide .slick-dots li.slick-active button {background: #D54E38;}
.blog-page.-detail .blog-body .banner-bar{padding-bottom: 0; padding-top: 80px;}
.blog-page.-detail .col-content{position: relative;}
.blog-page.-detail .col-l{padding-right: 40px;}
.blog-page.-detail .col-r{width: 335px;}
.blog-page.-detail .inner-box{padding-left: 30px;}
.blog-page.-detail .data-box{border-left: 1px solid #282828; padding-bottom: 30px; margin-bottom: 30px;}
.blog-page.-detail .data-content{position: relative; padding-left: 60px;}
.blog-page.-detail .data-content+.data-content{margin-top: 35px;}
.blog-page.-detail .data-content .icon{width: 35px; height: 35px; text-align: center; position: absolute; top: -5px; left: 0;}
.blog-page.-detail .data-content .icon > img{display: block; margin: 0 auto; max-height: 100%;}
.blog-page.-detail .data-content .txt{ font-family: 'Pridi', serif; font-size: 21px;line-height: 1.5em; font-weight: 200;}
.blog-page.-detail .data-content .txt .link{text-decoration: underline; font-size: 18px; color: #D54E38;}
.blog-page.-detail .data-content .txt .link:hover{color: #ff2400;}
.blog-page.-detail .banner-list .item-list{padding: 0; margin: 0;}
.blog-page.-detail .banner-list .item {padding: 0;min-height: inherit; width: 100%;}
.blog-page.-detail .banner-list .item+.item{margin-top: 50px;}
.blog-page.-detail .blog-body .banner-box{font-size: 14px;}
.blog-page.-detail .blog-body .banner-box, 
.blog-page.-detail .blog-body .banner-box .cover {height: 205px;}