/*
Theme Name: Porto Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.1
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/

/* functions.php 에서 수정시 날짜를 기준으로 버전이 생성되게 해두었음 */

.page-content > ul, ol { margin-bottom: 2rem; }
.entry-content > ul, ol { margin-bottom: 2rem; }

/*
.entry-content > ul, ol { margin-bottom: 2rem; }
.entry-content > ul ul { padding-left: 0; }
.entry-content > ul ul li { list-style: none; }
.entry-content > ul ul li::before { content: "- "; }
*/

ul.comments>li, ul.comments ul.children>li { padding: 10px 0 0 64px }
ul.comments>li .img-thumbnail, ul.comments ul.children>li .img-thumbnail { margin-left: -64px; }
ul.comments>li img.avatar, ul.comments ul.children>li img.avatar { max-width: 48px; }
ul.comments .comment-arrow { display: none; }

@media (max-width: 767px) {
	ul.comments .comment-block { padding: 10px 20px 35px; }
	ul.comments .comment-block .comment-by { padding: 5px 0 14px 0; }
	ul.comments>li .img-thumbnail, ul.comments ul.children>li .img-thumbnail { margin: 10px 12px 10px 10px; }
	ul.comments>li img.avatar, ul.comments ul.children>li img.avatar { max-width: 28px; }
	ul.comments .comment-arrow { display: none; }
	ul.comments>li, ul.comments ul.children>li { padding: 0 0 0 10px; }
}

/*
	div.entry-content > ul > li > a {

@media (max-width: 575px) {
li a {		max-width: 100%; 
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
		vertical-align: top;
	}
}
*/

.comment-reply-link { font-size: 0.8rem; }

#comments { margin-top: 0px; }

/*
@media (max-width: 575px)
{
	#top-banner { position: relative; width: 100vw; max-width: 100vw; margin-left: -50vw; left: 50%;	}
	#middle-banner { position: relative; width: 100vw; max-width: 100vw; margin-left: -50vw; left: 50%;	}
	.widget_kh_adsense_widget { position: relative; width: 100vw; max-width: 100vw; margin-left: -50vw; left: 50%;	}
}
*/

.hljs { border-radius: 5px; }

.widget_kh_recent_widget>ul{
	border: 0;
}

.widget_kh_recent_widget>ul li{
    padding: 6px 0 6px 15px;
	border: 0px;
}

.widget_kh_recent_widget>ul li:before {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: -11px;
    margin-right: 6px;
    font-size: 0.45rem;
    vertical-align: middle
}

.widget_kh_recent_widget>ul li:hover:before {
    animation: navItemArrow 0.6s linear infinite
}

.widget_kh_recent_widget li>a {
    color: inherit
}

.post-slide { min-height: 65px; }

/*
p {
	display: flex;
}
*/

/*

#loadingImage {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	display: flex;
	background: white;
	z-index: 999;
	opacity: 0.7;
}
#loadingImage > img {
	display: flex;
	width: fit-content;
	height: fit-content;
	margin: auto;
	box-shadow: none;
}
#wrapper {
	overflow: hidden !important;
	height: calc(100vh + 1px) !important;
}
#wrapper.loaded {
	overflow: unset !important;
	height: unset !important;
}
*/

.loading-overlay-showing > .loading-overlay {
	background-image: url("//kilho.net/wp-content/uploads/2019/05/logo-top.png");
	background-repeat: no-repeat;
	background-position: 51% 40%;
	background-size: 6rem;
	opacity: 1;
	/*
	opacity: 0.96;
	*/

	/*
    background: rgba(52, 58, 65, 0.600000);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
	opacity: 1;
	*/
}

.owl-carousel .img-thumbnail {
	max-height: 245.2px;
}

ul.opensource > li > a { border-bottom: #DDD 1px solid; }
ul.opensource > li > a:link { color: #777; }
ul.opensource > li > a:visited { color: #777; }
ul.opensource > li > a:hover { color: #777; }
ul.opensource > li > a:active { color: #777; }

.post-item .meta-date { font-size: 0.8rem; }
.post-item .porto-post-title { 
	font-size: 1rem; 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.post-item .read-more { display: none; }
.post-item .thumb-info-wrapper { max-height: 131px; }

.post-comments h4 { display: none; }

/*
@media only screen and (max-width: 768px) {
	ul.wp-block-list li a {
		display: inline-block;
		max-width: 200px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: middle;
	}
}
*/

@media only screen and (max-width: 768px) {
	#content ul li a {
		display: inline-block;
		max-width: 200px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: middle;
	}

	/* Index 에 Recent Gnuboard */
	#content .gnu5 ul li a {
		max-width: 100%;
	}
}

li.wp-block-link:first-child {
    list-style-type: none;
    padding-left: 24px;
	left: -24px;
    position: relative;
}

li.wp-block-link:first-child::before {
    content: "🏠";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 15px;
}

.header-tooltip, .archive-tooltip, .single-tooltip {
	display: none;
}

.text-update { color: #222529 !important; text-align: center !important; margin: 0 0 2.25rem; }
.text-update strong::before { content: "✨ "; }
.text-update strong::after { content: " 아래 다운로드 버튼을 눌러 실행해 주세요. ✨"; }

@media (max-width: 768px) {
	.header-right-top { display: none !important; }
	.text-update strong::after { content: " ✨"; } 
}

.related-posts h3 { font-weight: 400; }

.entry-content h3 { font: normal 700 15px/18px "Open sans",sans-serif; color: #777777; letter-spacing: 0; margin: 0 0 14px 0; }

code {
    background: #eee;
    padding: 0.135em 0.5em;
    border-radius: 0.3em;
}

/*
ins.adsbygoogle-noablate[data-ad-status="unfilled"] { display: none !important; }
.google-auto-placed { margin-bottom: 1.5rem; }
*/
.google-auto-placed { margin-bottom: 50px; }

/* 자체 배너 관련 */
.b300-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.b300-img {
  display: block;
}
.b300-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px;
  color: #fff;
  background: rgba(0,0,0,0.7);
  font-size: 18px;
  opacity: 0;
  transition: opacity 1s;
  pointer-events: none;
  text-align: center;
  transform: translateY(20px); 
  transition: all 1s;
}
.b300-container:hover .b300-caption {
  opacity: 1;
  transform: translateY(0);
}