/* MONG WEIGHT CSS */
:root {
	--color-MONG-widget-webzine-text-primary: #3e3f5e;
	--mong-widget-bg-primary: #f7f9fd;
	--mong-widget-bg-secondary-primary: #ffffff;
	--mong-widget-bg-secondary-primary-1: #ffffff;
	--mong-widget-box-shadow: rgba(86, 119, 252, 0.2) 0px 2px 12px 0px;
	--mong-widget-secondary-box-shadow: rgba(59, 80, 206, 0.25) 0px 2px 5px -1px, rgba(59, 80, 206, 0.3) 0px 1px 3px -1px;
}
[data-theme=dark] {
	--color-ui-widget-webzine-text-primary: #8e8e8e;
	--mong-widget-bg-primary: #2e323c;
	--mong-widget-bg-secondary-primary: #3C4049;
	--mong-widget-bg-secondary-primary-1: #2e323c;
	--mong-widget-box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;;
	--mong-widget-secondary-box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

/* MONG WEIGHT CSS 공통 */
.row-custom{display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-right: -0.5rem;margin-left: -0.5rem;}
.mo-shadow{box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;}
.mo-margin{margin: 10px !important;}

/* MONG LIST CSS */
.mong-list { margin:15px; border-radius: 4px; background: var(--mong-widget-bg-primary); transition: all 0.3s ease } 
.mong-list:hover { box-shadow: var(--mong-widget-box-shadow) } 
.mong-list .mong-list-box { position: relative; padding: 15px 15px 0px 15px; border-radius: 4px 4px 0px 0px } 
.w-subject { font-weight: bold } 
.mong-list-user-profile-img { display: block; margin-right: 15px; width: 60px; height: 60px; padding: 5px; border-radius: 4px; background: var(--mong-widget-bg-secondary-primary); box-shadow: var(--mong-widget-box-shadow) } 
.mong-list-user-profile-img img { width: 50px; border-radius:4px } 
.mong-list-user-box { padding:0px 15px 15px 15px; } 
.mong-list-subject { color: var(--color-ui-text-primary-2) !important; font-size:16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word; line-height: 1.6rem; -webkit-line-clamp: 1; height: 1.6rem; } 
.mong-list-subject a { transition: all 0.3s ease } 
.mong-list-content { color: var(--color-ui-text-primary-1) !important; font-size:14px } 

/* MONG USER NONE CSS */
.ux-webzine { margin:15px; padding: 15px; border-radius: 4px; background: var(--mong-widget-bg-primary); transition: all 0.3s ease; } 
.ux-webzine:hover { padding: 15px; } 
.w-subject { font-weight: bold; } 
.content-font { font-size: 14px; } 
.webzine-thumb-box { width:120px; height:95px; margin-right:15px; overflow:hidden; box-shadow: rgba(59, 80, 206, 0.45) 0px 25px 20px -20px; } 
.webzine-subject { color: var(--color-ui-text-primary-2) !important; font-size:16px; } 
.webzine-subject a { transition: all 0.3s ease } 
.webzine-content { color: var(--color-ui-text-primary-1) !important; font-size:14px; } 
.webzine-user-grid { color: var(--color-ui-text-primary-1) !important; font-size:14px; margin-top: 0.5rem; display:-ms-flexbox!important; display: flex!important; align-items:flex-end !important; -ms-flex-pack: justify!important; justify-content: space-between!important; } 
.webzine-user-grid .writer-name { color: var(--color-ui-widget-webzine-text-primary) !important; margin-right:auto; } 
.webzine-user-grid .writer-comment { padding-right:0.5rem; } 
.webzine-user-grid .writer-comment i { color: var(--color-ui-widget-webzine-text-primary) !important; } 
.webzine-user-grid .writer-date { white-space: nowrap!important; } 

/* MONG BLOG WEBZINE CSS */
.blog-item-box { padding:15px } 
.blog-card { display:flex; flex-direction:column; background:var(--mong-widget-bg-secondary-primary-1); line-height:1.4; font-family:sans-serif; overflow:hidden; z-index:0 } 
.blog-card a { color:inherit } 
.blog-card a:hover { color:#5ad67d } 
.blog-card:hover .photo { transform:scale(1.3) rotate(3deg) } 
.blog-card .meta { position:relative; z-index:0; height:200px } 
.blog-card .photo { position:absolute; top:0; right:0; bottom:0; left:0; background-size:cover; background-position:center; transition:transform .2s } 
.blog-card .details,.blog-card .details ul { margin:auto; padding:0; list-style:none } 
.blog-card .details { position:absolute; top:0; bottom:0; left:-100%; margin:auto; transition:left .2s; background:rgba(0,0,0,.6); color:#fff; padding:10px; width:100%; font-size:.9rem } 
.blog-card .details a { text-decoration:dotted underline } 
.blog-card .details ul li { display:inline-block } 
.blog-card .details .author:before { margin-right:10px } 
.blog-card .description { padding:1rem; background:var(--mong-widget-bg-secondary-primary-1); position:relative; z-index:1 } 
.blog-card .description h1,.blog-card .description h2 { font-family:Poppins,sans-serif } 
.blog-card .description h1 { line-height:1; margin:0; font-size:1.2rem; font-weight:600 } 
.blog-card .description h2 { font-size:1rem; font-weight:300; text-transform:uppercase; color:#a2a2a2; margin-top:5px } 
.blog-card .description .read-more { text-align:right } 
.blog-card .description .read-more a { color:var(--color-ui-bg-primary-500); display:inline-block; position:relative } 
.blog-card .description .read-more a:after { content:""; font-family:FontAwesome; margin-left:-10px; opacity:0; vertical-align:top; transition:margin .3s,opacity .3s } 
.blog-card .description .read-more a:hover:after { margin-left:5px; opacity:1 } 
.blog-card p { position:relative; margin:1rem 0 0 } 
.blog-card p:first-of-type { margin-top:1.25rem } 
.blog-card p:first-of-type:before { content:""; position:absolute; height:5px; background:var(--color-ui-bg-primary-500); width:35px; top:-.75rem; border-radius:3px } 
.blog-card:hover .details { left:0 } 
@media (min-width:640px) {.blog-card { flex-direction:row } 
.blog-card .meta { flex-basis:40%; height:auto } 
.blog-card .description { flex-basis:60% } 
.blog-card .description:before { transform:skewX(-3deg); content:""; background:var(--mong-widget-bg-secondary-primary-1); width:30px; position:absolute; left:-10px; top:0; bottom:0; z-index:-1 } 
.blog-card.alt { flex-direction:row-reverse } 
.blog-card.alt .description:before { left:inherit; right:-10px; transform:skew(3deg) } 
.blog-card.alt .details { padding-left:25px } 
 }

/* MONG GALLERY CSS */
.mong-gallery-wrapper { padding: 15px } 
.gallery-card { position: relative; display:block; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; overflow: hidden; border:none!important; transition:.4s ease-out } 
.gallery-card:hover { box-shadow:var(--mong-widget-box-shadow); } 
.gallery-card:hover:before { opacity:1 } 
.gallery-card:hover .info { opacity:1; transform:translateY(0) } 
.gallery-card:before { content:""; position:absolute; display:block; width:100%; height:100%; border-radius:4px; background:rgba(0,0,0,.6); z-index:2; transition:.5s; opacity:0 } 
.gallery-card img { width:100%; height:100%; object-fit:cover; position:absolute } 
.gallery-card .info { position:relative; padding:15px 15px 15px 15px; color:#fff!important; opacity:0; transform:translateY(30px); transition:.5s; z-index:3 } 
.gallery-card .info h1 { font-size:18px; margin:0 } 
.gallery-card .info p { letter-spacing:1px; color:#888; font-size:15px; margin-top:8px } 
.btn-gallery { width:100%; line-height:46px; border-radius:4px; text-align:center; margin-top:15px; cursor:pointer } 
.btn-three { color:#fff; transition:all .5s; position:relative } 
.btn-three::before { content:''; position:absolute; color:#fff!important; top:0; left:0; width:100%; height:100%; z-index:1; background-color:rgba(255,255,255,.1); transition:all .3s } 
.btn-three:hover::before { opacity:0; transform:scale(.5,.5) } 
.btn-three::after { content:''; position:absolute; color:#fff; top:0; left:0; width:100%; height:100%; z-index:1; opacity:0; transition:all .3s; border:1px solid rgba(255,255,255,.5); transform:scale(1.2,1.2) } 
.btn-three:hover::after { opacity:1; transform:scale(1,1) } 

/* MONG REVIEW 3D CSS */
.property-card { height:18em; width:100%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; position:relative; -webkit-transition:all .4s cubic-bezier(.645, .045, .355, 1); -o-transition:all .4s cubic-bezier(.645, .045, .355, 1); transition:all .4s cubic-bezier(.645, .045, .355, 1); overflow:hidden; -webkit-box-shadow:var(--mong-widget-box-shadow); box-shadow:var(--mong-widget-box-shadow) } 
.property-image { height:6em; width:100%; position:Absolute; top:0; -webkit-transition:all .4s cubic-bezier(.645, .045, .355, 1); -o-transition:all .4s cubic-bezier(.645, .045, .355, 1); transition:all .4s cubic-bezier(.645, .045, .355, 1); background-size:cover; background-repeat:no-repeat } 
.property-description { background-color:var(--mong-widget-bg-secondary-primary-1); height:12em; width:100%; position:absolute; bottom:0; -webkit-transition:all .4s cubic-bezier(.645, .045, .355, 1); -o-transition:all .4s cubic-bezier(.645, .045, .355, 1); transition:all .4s cubic-bezier(.645, .045, .355, 1); padding:.5em 1em } 
.property-description h5 { overflow:hidden; text-overflow:ellipsis; color: var(--color-ui-text-primary-2); font-size:16px; font-weight:600; text-align:center; margin-top:10px; display:-webkit-box; -webkit-box-orient:vertical; word-wrap:break-word; line-height:1.6rem; -webkit-line-clamp:1; height:1.6rem } 
.property-description p { color: var(--color-ui-text-primary-1); margin-top:10px } 
.property-user-box { height:1em; position:relative; margin-top:30px } 
.property-card:hover .property-description { height:0; padding:0 1em } 
.property-card:hover .property-image { height:18em; -webkit-transition:all .4s cubic-bezier(.645, .045, .355, 1); -o-transition:all .4s cubic-bezier(.645, .045, .355, 1); transition:all .4s cubic-bezier(.645, .045, .355, 1) } 

/* MONG REVIEW A CSS */
.mo-shadow { background:var(--mong-widget-bg-secondary-primary-1); } 
.mo-margin { margin: 10px !important; } 
.mo-subject-box { position:relative; padding:10px; margin-top: -23px; margin-left: 15px; margin-right: 15px; border-radius: 4px; background:var(--mong-widget-bg-secondary-primary); box-shadow:var(--mong-widget-box-shadow); } 
.mo-subject { overflow: hidden; text-overflow: ellipsis; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word; line-height: 1.6rem; -webkit-line-clamp: 1; height: 1.6rem; } 
 } 

/* MONG USER ACTIVE CSS */
.ux-webzine-user { margin:15px; border-radius: 4px; background:#f7f9fd; transition: all 0.3s ease } 
.ux-webzine-user:hover { box-shadow: rgba(86, 119, 252, 0.2) 0px 2px 12px 0px; } 
.ux-webzine-user .ux-webzine-list { position: relative; padding: 15px; border-radius: 4px 4px 0px 0px } 
.w-subject { font-weight: bold } 
.content-font { font-size: 14px } 
.user-profile-img { display: block; margin-right: 10px; width: 50px; height: 50px; padding: 5px; border-radius: 4px; background: var(--mong-widget-bg-secondary-primary); box-shadow: rgba(59, 80, 206, 0.25) 0px 2px 5px -1px, rgba(59, 80, 206, 0.3) 0px 1px 3px -1px } 
.user-profile-img img { width: 40px; border-radius: 4px; } 
@media screen and (max-width: 576px) {.user-profile-img { display: block; right: 12px; width: 50px; height: 50px; padding: 5px; border-radius: 4px; box-shadow: rgba(59, 80, 206, 0.25) 0px 2px 5px -1px, rgba(59, 80, 206, 0.3) 0px 1px 3px -1px } 
.webzine-thumb-user-box { width:100px !important; height:75px!important; margin-right:15px; overflow:hidden; box-shadow: rgba(59, 80, 206, 0.45) 0px 25px 20px -20px } 
 }
.webzine-thumb-user-box { width:120px; height:95px; margin-right:15px; overflow:hidden; box-shadow: rgba(59, 80, 206, 0.45) 0px 25px 20px -20px } 
.webzine-user { padding: 0px 15px 15px 15px } 
.webzine-subject { color: var(--color-ui-text-primary-2) !important; font-size:16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word; line-height: 1.6rem; -webkit-line-clamp: 1; height: 1.6rem; } 
.webzine-content { color: var(--color-ui-text-primary-1) !important; font-size:14px } 
.webzine-user-box { color: var(--color-ui-text-primary-1) !important; font-size:14px; padding: 15px; border-radius: 4px; display:-ms-flexbox!important; display: flex!important; align-items:flex-end !important; -ms-flex-pack: justify!important; justify-content: space-between!important; background: #e7e9fd; } 
.webzine-user-box .writer-name { color: var(--color-ui-widget-webzine-text-primary) !important; margin-right:auto; margin-bottom: 25px } 
.webzine-user-box .writer-comment { padding-right:0.5rem; } 
.webzine-user-box .writer-comment i { color: var(--color-ui-widget-webzine-text-primary) !important } 
.webzine-user-box .writer-date { white-space: nowrap!important } 
.webzine-user-post { position: absolute; left: 105px; margin-top:42px }