/*
Theme Name: type-TN22
**POST**
Author: TN
Version: 2.1, 2022.01
*/

@charset "UTF-8";

/*------------------------------------------------------------
	POSTS
------------------------------------------------------------ */
.wp-singular section.uds,
.archive section.uds { margin-top: 7%!important;}
.list .blogs.detail { padding: 2.5em; background: rgba(255,255,255,.45);}
.blogs.detail li { margin-bottom: 4%;}
.blogs.detail li > a { display: block; height: 100%; background: #fff; border: 1px solid #fff; overflow: hidden;}
.blogs.detail li > a .author_name { font-size: 12px; padding: 3px 4px; line-height: 1; color: #fff; background: var(--bl1); border: 0; margin: 0 0 0 .5em; display: inline-block; text-align: left;}
.blogs.detail .date .cat_name { font-size: 12px; padding: 3px 8px; line-height: 1; color: #fff; background: var(--bl1); border: 0; margin: 0 .5em 0 0; display: inline-block; text-align: left; border-radius: 30px;}
.blogs.detail li > a:hover { box-shadow: 0 3px 14px var(--bl2); transform: translateY(-.5em); }
.blogs.detail li > a:hover img { opacity: 1;}
.blogs.detail li img { height: auto; margin: 0;}
.blogs.detail li > a div { background: #fff; padding: 1.2em 1.5em 1.4em;}
.blogs.detail li .date { color: var(--bl1);}
.blogs.detail li h5 { font-size: 20px; line-height: 1.4; margin:.4em 0 .3em; color: var(--bl0);}
.blogs.detail li p { font-size: 15px; line-height: 1.5;}
.blogs.detail .titleP { color: var(--bl1); padding: 0 .2em .4em; margin-bottom: 1.5em; border-bottom: 1px solid var(--bl1);}
/* .category-info .blogs.detail li img { display: none;} */
.category-info .blogs.detail li img { display: none;}

/* PAGING */
.paging { width: 100%; display: flex; align-items: center; justify-content: center; padding-top: 4%;}
.paging a, .paging span, .paging i { display: block; font-size: 16px; line-height: 1; margin: 0 .5em; border: 1px solid var(--bl1); color: var(--bl1);}
.paging a, .paging span { padding: 10px 12px; background: #fff;}
.paging a:hover { background: var(--bl4);}
.paging span { background: var(--bl1); color: #fff;}
.paging span.page-numbers.dots { background: none; color: var(--bl1); padding: 0; border: 0;}
.paging i { border: 0;}

/* news */
.category-info .uds.bgP { background: var(--bl3)!important;}
.category-staffblog .pagehead .sub-n,
.category-info .pagehead .sub-b,
.categoryid-2 .pagehead .sub-n,
.categoryid-1 .pagehead .sub-b { display: none;}

@media(max-width:1100px) {
    .blogs.detail li { width: 100%;}
    .blogs.detail li > a { display: flex; align-items: center; justify-content: space-between; padding: 0;}
    .blogs.detail li img { height: auto; margin: 0; width: 45%;}
    .blogs.detail li > a div { width: 50%; padding: 0 1.2em 0 0;}
    .category-info .blogs.detail li > a div { width: 100%; padding: 1.2em;}
    .blogs.detail li h5 { font-size: 2vw;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    }
    .blogs.detail li p { font-size: 1.8vw;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    }
}
@media(max-width:767px) {
    .newslist h5 { font-size: 1.4rem; }
    .newslist h5 span { font-size: 1.2rem; }
    .blogs.detail .date .cat_name { font-size: 10px; }
    .blogs.detail li > a .author_name { font-size: 11px; margin: 0 0 0 .3em;}
    .blogs.detail li h5 { font-size: 1.4rem; line-height: 1.4; margin:.4em 0 .3em;}
    .blogs.detail li p { font-size: 1.2rem; line-height: 1.4; margin:0;}
    .category-info .uds.bgP { border-top: 1px solid #fff;}
}
@media(max-width:320px) {
    .blogs.detail li h5 { -webkit-line-clamp: 1;}
}

/*------------------------------------------------------------
	SINGLE
------------------------------------------------------------ */
.single > .sakaeWrapper, .list .sakaeWrapper { display:flex; justify-content: space-between; align-items: flex-start; }
.single > .sakaeWrapper .detail, .list .sakaeWrapper .detail { width: calc(100% - 300px);}
.single > .sakaeWrapper .detail { padding: 2.5em; background: rgba(255,255,255,.45);}
.single > .sakaeWrapper .detail .date { color: var(--bl1); padding-bottom:.2em; margin-bottom:2em; border-bottom:1px solid var(--bl3);}
.single > .sakaeWrapper .detail h1 { color: var(--bl0); font-size:26px; margin-bottom:1em; }
.single > .sakaeWrapper .detail p { font-size:16px; line-height:2;}
.single > .sakaeWrapper .sidebar-container, .list .sakaeWrapper .sidebar-container, #eo_event_list_widget-2 { width:250px;}

.single .detail .single-author { display: flex; align-items: flex-start; justify-content: space-between;}
.single .detail .single-author dt { width: 130px;}
.single .detail .single-author dt a { display: block; background: #f8f2e9; padding: 10px 12px; border-radius: 9px;}
.single .detail .single-author dt h4,
.single .detail .single-author dt h5,
.single .detail .single-author dt h6 { padding: 0; margin: 0; border: 0; text-align: center; color: var(--bl1);}
.single .detail .single-author dt h4 { font-size: 16px;}
.single .detail .single-author dt h5 { font-size: 14px;}
.single .detail .single-author dt h6 { font-size: 12px;}
.single .detail .single-author dt img { margin: 6px 0; border-radius: 7px;}
.single .detail .single-author dd { width: calc(100% - 160px);}

.categoryid-1 .single .detail dl { display: block;}
.categoryid-1 .single .detail dt { display: none;}
.categoryid-1 .single .detail dd { width: 100%;}


.single .detail div.prenex { background: var(--bl3); padding:0; margin:0; }
.single .detail div.prenex dl { display:flex; align-items: center; justify-content: space-between;; margin:5% 0 0; padding: 4%;}
.single .detail div.prenex dt,
.single .detail div.prenex dd { position: relative; display: block; width: 47%;}
.single .detail div.prenex dd { text-align:right; }
.single .detail div.prenex dt a,
.single .detail div.prenex dd a { position: relative; display: block; padding: 1.2em 1em; background: #fff; border-radius: 6px; line-height: 1; color: var(--pp1);}
.single .detail div.prenex dt a { padding-left: 1.8em;}
.single .detail div.prenex dd a { padding-right:1.8em;}
.single .detail div.prenex dt a::after,
.single .detail div.prenex dd a::after {
content:"\f104";
font-family: FontAwesome;
position: absolute;
top: 50%;
left: 18px;
transform: translate(-50%,-50%);
transition: all .2s ease-in-out;
color: var(--pp1);
display: block;
font-size: 20px;
}
.single .detail div.prenex a:hover { color: var(--pp1); background: rgba(255,255,255,.7)}
.single .detail div.prenex dd a::after { content:"\f105"; left: inherit; right: 10px; }
.single .detail div.prenex dt a:hover::after { left: 12px; color: var(--pp1);}
.single .detail div.prenex dd a:hover::after { right: 4px; color: var(--pp1);}


.single .detail h2 { font-size:20px; padding:.4em 1em .5em; margin-bottom:1em; background:var(--bl1); color: #fff;}
.single .detail h3 { font-size:20px; padding:.6em .3em .7em; margin-bottom:1em; border-top:1px solid var(--bl1); border-bottom:1px solid var(--bl1); color: var(--bl1);}
.single .detail h4 { font-size:18px; padding:1em 0 .5em .2em; margin-bottom:1em; border-bottom:1px solid #ddd; }
.single .detail h5 { font-size:18px; padding:0 0 0 .6em; border-left:5px solid var(--bl1); margin-bottom:.4em; }
.single .detail h6 { font-size:17px; margin-bottom:.4em; color: var(--bl1);}
.single .detail p { margin-bottom:1.5em; }
.single .detail img { height:auto; }
.single .detail dd > img:nth-child(1) { margin-bottom: 4%;}
.single .detail .wp-post-image { margin:0 0 5%; }
.single .detail hr { margin:5% 0; }
.single .detail pre { border:1px solid #eee; background:#f9f9f9; border-radius:5px; margin:5% 0; padding:4% 5%; font-weight: 260; white-space: normal; line-height:1.8;}
.single .detail strong { position: relative; font-size:1em; color: var(--red1); margin:0 .2em; z-index: 0;}
.single .detail ul, .detail ol { margin:4% 0; }
.single .detail li {
list-style-position: inside;
padding-left: 1.2em;
text-indent: -1.1em;
margin:0 0 .5em;
line-height:1.6;
}
.single .detail ul li { list-style-type: disc; }
.single .detail blockquote { border-left:5px solid #ccc; margin:5% 0 5% 5%; padding:1% 0 1% 2%; }
.single .detail blockquote p { color:#777; font-size:calc(1em - 2px) !important; line-height:1.5 !important; margin:0 !important; }
.single .detail p a { color:var(--pp1); text-decoration:underline; font-weight: 500; }
.single .detail dd > div { background:#f0f0f0; padding:4% 5%; margin:5% 0; }
.single .detail div ul { margin:0; }

.single .blogs.detail .date .cat_name { margin: 0 0 0 .5em; background: var(--bl1);}


/*side bar*/
.sidebar-container aside { }
.sidebar-container aside a img { margin-bottom: 20px;}
.sidebar-container h3 { font-size:18px; color: var(--pp1); padding:0 0 .4em; border-bottom: 1px solid var(--pp1);}
.sidebar-container ul { margin-bottom:2em; padding: 0 2%;}
.sidebar-container li { padding:1.5em 0; border:0; width:100% !important; border-bottom:1px dotted #b3b3b3; line-height: 1; color: var(--bl2);}
.sidebar-container li a { position: relative; padding:0 0 0 .6em; display:inline-block; color: #555;}
.sidebar-container li a:hover { color: var(--pp1); background:none;}
.sidebar-container li a::after {
content:"\f0da";
font-family: FontAwesome;
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%,-50%);
transition: all .2s ease-in-out;
color: var(--pp1);
display: block;
font-size: 18px;
}

@media(max-width:767px) {
section.single { padding-top: 0;}
.single .sakaeWrapper, .list .sakaeWrapper { flex-wrap:wrap; }
.single > .sakaeWrapper { margin-top: 0;}
.single .sakaeWrapper .detail, .list .sakaeWrapper .detail { width:100%; padding: 1.8em;}
.list .sakaeWrapper .detail { width:100%; padding: 0; background: none;}
.single .sakaeWrapper .detail h1 { font-size:2rem; }
.single .sakaeWrapper .detail p { font-size:1.5rem; }
.single .sakaeWrapper .sidebar-container, .list .sakaeWrapper .sidebar-container, #eo_event_list_widget-2 { width:100%; margin:10% auto 0; padding:10% 10% 0; border-top:2px solid #fff; }
.single .detail h2 { font-size:1.8rem; }
.single .detail h3 { font-size:1.7rem; }
.single .detail h4 { font-size:1.7rem; }
.single .detail h5 { font-size:1.6rem; }
.single .detail h6 { font-size:1.6rem; }
.single .detail hr { margin:7% 0; }
.single .detail pre {margin:5% 0; padding:4% 6%; font-weight: 260; }
.single .detail strong::after { height: 10px; }
.single .detail ul, .detail ol { margin:5% 0; }

.single .detail .single-author { flex-wrap: wrap;}
.single .detail .single-author dt { width: 100%; order: 2; margin-top: 5%;}
.single .detail .single-author dt a { display: block; background: #fff; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between;}
.single .detail .single-author dt h4,
.single .detail .single-author dt h5,
.single .detail .single-author dt h6 { text-align: left;}
.single .detail .single-author dt h4 { font-size: 1.6rem;}
.single .detail .single-author dt h5 { font-size: 1.4rem; margin-bottom:1em; padding-bottom: .5em; border-bottom: 1px solid var(--bl1);}
.single .detail .single-author dt h6 { font-size: 1.2rem;}
.single .detail .single-author dt img { margin: 0; width: 35%;}
.single .detail .single-author dt a > div { margin: 0; width: 60%; padding: 0; margin: 0; background: none;}

.single .detail .single-author dd { width: 100%; order: 1;}

.single .prenex { margin:0; border:0; background: none; padding:10px 0; }
.single .prenex dl { display:flex; flex-wrap: wrap; margin-top:5%; }
.single .detail div.prenex dt,
.single .detail div.prenex dd { width:100%;}
.single .detail div.prenex dd { margin-top: 5%;}
}

@media(max-width:320px) {
}