:root {
--app-text-color: #333333;
}

body {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
font-size:16px;
}



.app-container-lg { width:100%; max-width:1600px; margin:0 auto; }
.app-container  { width:100%; max-width:1200px; margin:0 auto;  padding-left:40px; padding-right:40px; }



.blog-post-section { background-color:#fff; }
.blog-post-section .panel { border:solid 1px #ccc; background-color:#f9f9f9; }


.blog-list-section { padding-top:30px; padding-bottom:60px; }
.blog-topic-list-row .blog-item-row .panel .summary { display:block; }
.blog-topic-list-row .blog-item-row .panel { border-radius: 6px; overflow:hidden; }

.blog-topic-list-row { margin-left:-30px; margin-right:-30px; }
.blog-topic-list-row  .blog-item-row  { padding-left:30px; padding-right:30px;margin-bottom:60px;  }
 .blog-topic-list-row .blog-item-row.blog-item-row-4 {
        width: 33%;

    }

.blog-list-header a:not(.btn) { color:var(--app-text-color); }

.blog-topic-detail .carousel-control { display:none; }
.blog-topic-detail .blog-content p { margin-bottom:26px; }

.blog-name-date, .blog-sns-share { display:none !important; }

.blog-post-header h2.form-title .form-blog-title { display:none;}

@media (min-width: 768px) {
    .blog-detail-section .blog-photos #carousel-blog-photos, .blog-detail-section .blog-photos .carousel-inner > .item > a > img {
        height: auto;        max-height: 680px;
    }
    .blog-detail-section .blog-photos img {
        height: 680px;        max-height: 680px;
    }
}

@media (max-width:1199px) {

}

@media (max-width:991px) {
.app-container  {  padding-left:30px; padding-right:30px; }
 .blog-topic-list-row .blog-item-row.blog-item-row-4 {
        width: 50%;
    }
.blog-topic-list-row  .blog-item-row  { padding-left:30px; padding-right:30px;margin-bottom:60px;  }
}

@media (max-width:767px) {
.app-container  {  padding-left:20px; padding-right:20px; }
 .blog-topic-list-row .blog-item-row.blog-item-row-4 {
        width: 100%;
    }
.blog-topic-list-row  .blog-item-row  { max-width:560px; margin:0 auto; padding-left:30px; padding-right:30px;margin-bottom:60px;  }
}

@media (max-width:576px) {
.app-container  {  padding-left:10px; padding-right:10px; }

}