/* 
license: MIT License
Developer: Penguinsoft Co., Ltd. http://smartHOMEPAGE.co.kr
Credits: Many thanks to all, including JQuery, Yahoo, Masonry, and many more
Version: 0.9.0                                                                                    
이름은 항상 소문자로, 단어 사이는 ' - ' 하이픈으로 사용하며, 공통항목은 가능한 상단에 위치함. 
brown #dd4436, green #6ea004, grey #f5f5f5, orange #f63, yellow #fac600, bluish #0796D2  
*/


/*  #########################
RESET & COMMONS
*/

/* ------------------------------------
body, font-size
------------------------------------ */
body, html { -moz-text-size-adjust: none; }
body { font-size:13px; line-height:1.528571429;  }
 
h1, h2, h3 { font-weight:600 }
h4, h5, h6 { font-weight:500 }
h1 { font-size:30px; }
h2 { font-size:28px; }
h3 { font-size:22px; }
h4 { font-size:16px; }                                                                
h5 { font-size:14px; }
h6 { font-size:13px; }
p  { font-size:14px;  }
ul, ol { padding:0; margin:0;}

/* ------------------------------------
link a
------------------------------------ */
a { text-decoration:none; color:#666 }
a:link{ text-decoration:none; }
a:visited{ }
a:hover{}
a:active{ } 
a:focus { }    


/* ------------------------------------
margin
------------------------------------ */

.mt10 { margin-top:10px !important; }
.mt15 { margin-top:15px !important; }
.mt20 { margin-top:20px !important; }
.mt25 { margin-top:25px !important; }
.mt30 { margin-top:30px !important; }
.mt35 { margin-top:35px !important; }
.mt40 { margin-top:40px !important; }
.mt50 { margin-top:50px !important; }
.mt60 { margin-top:60px !important; }
.mt70 { margin-top:70px !important; }
.mt80 { margin-top:80px !important; }

.mr10 { margin-right:10px !important; }
.mr15 { margin-right:15px !important; }
.mr20 { margin-right:20px !important; }
.mr25 { margin-right:25px !important; }
.mr30 { margin-right:30px !important; }
.mr35 { margin-right:35px !important; }
.mr40 { margin-right:40px !important; }
.mr50 { margin-right:50px !important; }
.mr60 { margin-right:60px !important; }
.mr70 { margin-right:70px !important; }
.mr80 { margin-right:80px !important; }

.mb10 { margin-bottom:10px !important; }
.mb15 { margin-bottom:15px !important; }
.mb20 { margin-bottom:20px !important; }
.mb25 { margin-bottom:25px !important; }
.mb30 { margin-bottom:30px !important; }
.mb35 { margin-bottom:35px !important; }
.mb40 { margin-bottom:40px !important; }
.mb50 { margin-bottom:50px !important; }
.mb60 { margin-bottom:60px !important; }
.mb80 { margin-bottom:80px !important; }

.ml10 { margin-left:10px !important; }
.ml15 { margin-left:15px !important; }
.ml20 { margin-left:20px !important; }
.ml25 { margin-left:25px !important; }
.ml30 { margin-left:30px !important; }
.ml35 { margin-left:35px !important; }
.ml40 { margin-left:40px !important; }
.ml50 { margin-left:50px !important; }
.ml60 { margin-left:60px !important; }
.ml80 { margin-left:80px !important; }


/* ------------------------------------
padding
------------------------------------ */

.pt10 { margin-top:10px !important; }
.pt15 { margin-top:15px !important; }
.pt20 { margin-top:20px !important; }
.pt25 { margin-top:25px !important; }
.pt30 { margin-top:30px !important; }                                                    
.pt35 { margin-top:35px !important; }
.pt40 { margin-top:40px !important; }
.pt50 { margin-top:50px !important; }
.pt60 { margin-top:60px !important; }
.pt70 { margin-top:70px !important; }
.pt80 { margin-top:80px !important; }

.pr10 { padding-right:10px !important; }
.pr15 { padding-right:15px !important; }
.pr20 { padding-right:20px !important; }
.pr25 { padding-right:25px !important; }
.pr30 { padding-right:30px !important; }
.pr35 { padding-right:35px !important; }
.pr40 { padding-right:40px !important; }
.pr50 { padding-right:50px !important; }
.pr60 { padding-right:60px !important; }
.pr70 { padding-right:70px !important; }
.pr80 { padding-right:80px !important; }

.pb10 { padding-bottom:10px !important; }
.pb15 { padding-bottom:15px !important; }
.pb20 { padding-bottom:20px !important; }
.pb25 { padding-bottom:25px !important; }
.pb30 { padding-bottom:30px !important; }
.pb35 { padding-bottom:35px !important; }
.pb40 { padding-bottom:40px !important; }
.pb50 { padding-bottom:50px !important; }
.pb60 { padding-bottom:60px !important; }
.pb80 { padding-bottom:80px !important; }

.pl10 { padding-left:10px !important; }
.pl15 { padding-left:15px !important; }
.pl20 { padding-left:20px !important; }
.pl25 { padding-left:25px !important; }
.pl30 { padding-left:30px !important; }
.pl35 { padding-left:35px !important; }
.pl40 { padding-left:40px !important; }
.pl50 { padding-left:50px !important; }
.pl60 { padding-left:60px !important; }
.pl80 { padding-left:80px !important; }

/* ------------------------------------
text align
------------------------------------ */
.txt-r { text-align:right !important;  }
.txt-l { text-align:left !important;   }
.txt-c { text-align:center !important; }
.txt-j { text-align:justify !important; } 
                                                 

/* ------------------------------------
float align
------------------------------------ */
.flo-r { float:right !important; }
.flo-l { float:left !important; }
.flo-n { float:none !important; }
.clear { clear:both !important; }  


/* ------------------------------------
clearfix, spacing, screen reader
------------------------------------ */

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } 
.clearfix:before, .clearfix:after{content:"";  display:table;}
.clearfix:after{clear:both;}
.clearfix{ clear:both; zoom:1; display:block;}
* html .clearfix { height:1%; }

/* ------------------------------------
hr, line
------------------------------------ */
.dotted-line  { border-top:1px dotted #999; }
.dashed-line  { border-top:1px dashed #999; }
.solid-line   { border-top:1px solid #999; }

/* ------------------------------------
hr, line
------------------------------------ */
.bg-gray { background:#eee }
.bg-navy { background:#ccf2ff; }




/* ------------------------------------
accessibility
------------------------------------ */
#accessibility {float:right}
#accessibility li {float:left;font-weight:normal !important; margin-right:5px; padding-right:4px; border-right:1px solid #ddd; }
#accessibility li:last-of-type {margin-right:0; padding-right:0; border-right:0 solid #ddd; }



/* ------------------------------------
language
------------------------------------ */
#language-selection, #language-selection ul{list-style-type:none;margin:0;padding:0; background:#fff; position:relative; z-index:100}
#language-selection .language-list li{float:left;}
#language-selection .language-list > li{float:none;}
#language-selection {position:absolute;  right:0;top:-20000px;}
#language-selection a.main, #language-selection .language-list{top:20000px;}
#language-selection .link{width:200px;margin-top:-10075px;float:left;text-align:center;}
#language-selection a{position:relative;display:block;height:25px;line-height:25px;text-decoration:none;  z-index:6;}
#language-selection .language-list {border-radius:5px; position:relative; z-index:5}
#language-selection .language-list a{margin:0 -1px 0 0;width:200px;color:#000}
#language-selection .language-list li {padding:6px 0; border-bottom:1px solid #eee; width:90%;}
#language-selection .language-list{position:relative;float:left;background:#fff;padding-top:25px;margin-top:-25px;text-align:center;}
#language-selection a.main{width:200px;height:25px;line-height:25px;margin-top:10075px;margin-right:-199px;float:left;}
#language-selection a.main:hover, #language-selection a.main:focus, #language-selection a.main:active{margin-right:0;}
#language-selection .language-list a:hover, #language-selection .language-list a:focus, #language-selection .language-list a:active{margin:0 0 0 0;}

#language-box {display:inline}
#language-box li {float:left;}

.language-list li {font-weight:normal !important}
.language-list li {margin-right:5px; padding-right:4px; border-right:1px solid #ddd; }
.language-list li:last-of-type {margin-right:0; padding-right:0; border-right:0 solid #ddd; }
.language-list li a:focus {background:#f63; color:#fff !important }


/* ------------------------------------
search
------------------------------------ */
.search-results {}
.search-results h2 {margin:0; padding:0}
.search-results em {}
.search-results p{margin-bottom:25px; padding:0; margin-top:0}


/* ------------------------------------
sns follow 
------------------------------------ */
/* share sns */
.sns-share-code {margin:10px 0 20px; clear:both !important; }
.sns-share-code span {}

.share-sns-more span {width:1px; height:1px; position:absolute; top:-2px; overflow:hidden}
.share-sns-more a {margin-right:10px}

.share-sns {border-top:1px solid #eee; border-bottom:1px solid #eee; padding: 8px 0  3px 0; clear:both; margin:0 0 18px 0}
.share-page-sns {margin:5px 0; width:100%;   padding:10px 0 13px 0}

p.rss-code {font-size:95%; font-style:italic; border:1px solid #ddd; padding:5px}
p.rss-what {margin:11px 0; display:none}

/* share sns kpoli*/
.ssc-box span {height: 1px;overflow-x: hidden;overflow-y: hidden;position: absolute;top: -200px;width: 1px;}
.ssc-box a {margin-right: 10px;}

/* sns icon */
.sns-follow-me {position: relative;}
.sns-follow {margin:0 0 7px 0}
.sns-follow-me span, .social-rss span {position:absolute; width:1px; height:1px; top:-1000px}
.sns-follow-me a {padding-right:2px}
.social-rss,.social-google,.social-fb ,.social-youtube,.social-linkedin,.social-pinterest,.social-twitter,.social-vk, .social-blog, .social-download{ background:url('http://hj.ebiz365.com/assets/icons/sns-icon.png'); width:32px; height:32px; display:block; float:left;}

.social-rss { background:url('http://hj.ebiz365.com/assets/icons/sns-icon.png') 1px 0px}
.social-google {background:url('http://hj.ebiz365.com/assets/icons/sns-icon.png') 0 -164px}
.social-fb {background:url('http://hj.ebiz365.com/assets/icons/sns-icon.png') -168px 0}
.social-youtube {background:url('http://hj.ebiz365.com/assets/icons/sns-icon.png') -56px -53px}
.social-linkedin {background:url('http://hj.ebiz365.com/assets/icons/sns-icon.png') 0 -52px}
.social-pinterest { background:url('http://hj.ebiz365.com/assets/icons/sns-icon.png') -55px -214px}
.social-twitter { background:url('http://hj.ebiz365.com/assets/icons/sns-icon.png') -55px 0}
.social-vk { background:url('http://hj.ebiz365.com/assets/icons/sns-icon.png') 0 -260px }
.social-blog { background:url('http://hj.ebiz365.com/assets/icons/sns-icon.png') -56px -260px }
.social-download { background:url('http://hj.ebiz365.com/assets/icons/sns-icon.png') -112px -164px }


/* ------------------------------------
page-top background
------------------------------------ */
/* page-top background */
.sub-top { position:relative; display:block; width:100%; max-width:1920px; margin: 0 auto; text-align:center; z-index:5 }
.sub-top:after { position:absolute; display: block; content: ""; top:0; left: 0; width:100%; height:240px; 
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3), inset 0 0 100px rgba(51, 51, 51, 0.1); background-color: rgba(51, 51, 51, 0.2); z-index:8  }      

/* page-top text */
.sub-top .top-text-box { position:relative; display:block; width: 100%; max-width:1920px; height:240px;
margin:0 auto; text-align:right; vertical-align: middle; box-sizing: border-box; z-index:10 }
.sub-top .top-text-box h3 { display:block; margin:0; padding-top:60px; font-size:36px; font-weight:600; line-height:50px; vertical-align:middle; text-decoration:none; }
.sub-top .top-text-box p { display: block; margin:12px 0; font-size: 24px; font-weight:500; line-height: 30px; letter-spacing:-0.5px;}




.bg-shadow::after {

    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5), inset 0 0 100px rgba(51, 51, 51, 0.3);
    background-color: rgba(51, 51, 51, 0.3);
    font-size: 12px;
    line-height: 80px;

}



/* ------------------------------------
app-root
------------------------------------ */
.app-root { position:relative; border-top:1px solid #ececec; border-bottom:1px solid #ececec; z-index:5; margin-bottom:20px }
ul.sub-root {  margin:10px 0; padding:0; float:left; list-style:none;}
ul.sub-root li { display: inline; font-size:13px }
ul.sub-root li a { text-decoration: none; }
ul.sub-root li a:hover { text-decoration: underline;}
.sub-root li.home a {  display:block;  width:50px;   height: 30px; 
border-right: 1px solid #ececec; border-left: 1px solid #ececec; background: url('http://hj.ebiz365.com/assets/icons/icon-home.png') center center no-repeat; 
display: inline-block; background-size: auto auto; vertical-align: middle; background-size:22px }
ul.sub-root li+li:before { color: black; content: "/\00a0";  padding: 8px;}



/* ------------------------------------
type-grid
------------------------------------ */
/* type-grid */
[class*="type-grid"] { box-sizing:border-box; }
[class*="type-grid"]:not(.type-grid-1):not(.type-grid-cell) > * { float:left; box-sizing:border-box; }
.type-grid-1 > *:nth-child(1n) ~ * { margin-top:50px }
.type-grid-2 > :nth-child(2n) ~ *, .type-grid-3 > :nth-child(3n) ~ *, .type-grid-4 > :nth-child(4n) ~ *, .type-grid-5 > :nth-child(5n) ~ *  { margin-top:40px; }
.type-grid-2 > *:nth-child(2n) + *, .type-grid-3 > *:nth-child(3n) + *, .type-grid-4 > *:nth-child(4n) + *, .type-grid-5 > *:nth-child(5n) + * { clear:both; margin-left:0; }

/* app-list type-grid */
.app-list .type-grid-2 > :nth-child(2n) ~ *, .app-list .type-grid-3 > :nth-child(3n) ~ *, .app-list .type-grid-4 > :nth-child(4n) ~ *, .app-list .type-grid-5 > :nth-child(5n) ~ *  { margin-top:10px; }


/* ------------------------------------
title, summary, date, views
------------------------------------ */
.page-title h1, h1#page-title { font-size:28px; color:#333; font-weight:700; letter-spacing:-0.1px; line-height:1.4 }
.page-summary { display:block; font-size:14px; color:#666; line-height:22px; letter-spacing:-0.2px }
.page-date { font-size:15px; color:#555; }     

/* ------------------------------------
text-main 
------------------------------------ */
.text-main { margin-bottom:15px; }
.text-main .page-title { margin:0 0 10px 0; font-size:30px; letter-spacing:-0.05px  }
.text-main .text-main-inner { }
.page-title-line { border-top:2px solid #888; padding-bottom:20px }

/* ------------------------------------
images
------------------------------------ */
.image-box .align-n img { margin: 0 0 30px 0 }
.image-box .align-l img { margin: 0 30px 30px 0 }
.image-box .align-r img { margin: 0 0 30px 30px }

/* ------------------------------------
editor
------------------------------------ */
/* editor-box font */
.editor-box h1, .editor-box h2, .editor-box h3, .editor-box h4, .editor-box h5, .editor-box h6 { font-weight:600 }
.editor-box h2 { margin: 0 0 20px; font-size:20px;   color:#4d4d4d;; line-height:1.4; letter-spacing:-0.1px } 
.editor-box h3 { margin: 0 0 20px; font-size:17px;   color:#333; line-height:1.5; letter-spacing:-0.05px }
.editor-box h4 { margin: 0 0 5px;  font-size:14px;   color:#555; line-height:1.6; }
.editor-box h5 { margin: 0 0 8px;  font-size:11.5px; color:#555; line-height:1.8; padding:3px 0  }
.editor-box h6 { margin: 0 0 10px; font-size:10.8px; color:#555; line-height:1.8; padding:3px 0  }
.editor-box p  { margin: 0 0 18px; font-size:13px;   color:#777; line-height:1.7; word-break:keep-all; word-wrap:break-word;  }
.editor-box span { color:#06c; text-decoration:none !important; }

/* editor-box link icons*/
.editor-box a:link, .editor-box a:link a:active   { color:#333; text-decoration:underline; }

.app-detail .editor-box h2::before {
    content: "";
    display: block;
    width: 30px;
    height: 4px;
    background: #f1582b;
    margin: 10px 0; 

}


.app-detail .editor-box h3::before { display:block; content:url(http://hj.ebiz365.com/assets/icons/title-bar_dodgerblue.jpg); }




/* editor-box ul, ol */
.editor-box ul, .editor-box ol { }
.editor-box ul li, .editor-box ol li { }
.editor-box ul { }                
.editor-box ul li { }          
.editor-box ul li a::after { }
.editor-box ol li { }
.editor-box ol li a:link {  }
.editor-box ol li a:hover {  }
.editor-box ol li a::after { }   

.editor-box ul h2 { margin:0 0 5px 0; padding:0 0 10px 0 }
.editor-box ul h2::before  { content:url(http://hj.ebiz365.com/assets/icons/icon-circle_dodgerblue.png); font-family:FontAwesome; padding-right:5px  } 
.editor-box ul h3 { } 
.editor-box ul h3::before  { content:url(http://hj.ebiz365.com/assets/icons/icon-circle_dodgerblue.png); font-family:FontAwesome; padding-right:5px  } 
.editor-box ul h4 { margin:0; padding:0 0 10px 0  } 
.editor-box ul h4::before  { content:url(http://hj.ebiz365.com/assets/icons/icon-circle_dodgerblue.png); font-family:FontAwesome; padding-right:5px  } 

/* editor-box blockquote */
.editor-box blockquote { font-style:normal; clear:both; margin:0; padding:0 }
.editor-box blockquote { background: #f9f9f9; font-style:normal; border:1px solid #d8d8d8; margin:20px 0; padding:15px 10px; }
.editor-box blockquote:before { content: ""; position: absolute; left:0; top: 0; width:4px; height:100%; background:none; }
.editor-box blockquote h2 { font-size:1.em; }      
.editor-box blockquote h3 { font-size:18px }
.editor-box blockquote h4 { font-size:14px }
.editor-box blockquote h5 { font-size:0.9em; }
.editor-box blockquote h6 { font-size:0.8em; }
.editor-box blockquote p  { font-size:0.85em; line-height:1.6  }
.editor-box blockquote > p:last-child { margin-bottom: 0; }
.editor-box blockquote ul li, .editor-box blockquote ol li { font-size:0.85em; margin-bottom:5px; padding:2px 0 }



/* ------------------------------------
iframe
------------------------------------ */
iframe {border:none}


/* ------------------------------------
embed-box
------------------------------------ */ 
.embed-box { position:relative; padding-bottom:56.25%; height:0;}
.embed-box iframe{ position:absolute; top:0; left: 0; width:100%; height:100%; overflow:hidden }  



/* ------------------------------------
file-box, file
------------------------------------ */ 
.file-box { padding:20px 0 40px; }         
.file { float:left }
.file a { padding: 12px 20px 12px 20px;
border: 1px solid #ddd; color: #06c; background: transparent;  font-weight: bold !important;
text-decoration: none;}
.file a:hover { color:#fff; text-decoration:none; }
.file a.file-button:hover { color:#fff; background:#444; border-color:#333; }


/* app-detail file icons*/
.file-box a:link, .app-detail a:active   { color:#06c; background-color:#fff; }
.file-box a[target="_blank"]:not([class*="file-box"])::after { content: ""; display:inline-block; width:18px; height:18px; margin: 0 0 0 0 ; vertical-align: middle; background: url('http://hj.ebiz365.com/assets/icons/default-icons.png') no-repeat; }                           
.file-box a[target="_blank"]:not([class*="file-box"])::after { 
background: url('http://hj.ebiz365.com/assets/icons/default-icons.png') -5px -165px; background-color:#06c }


/* app-detail file hover icons */
.file-box a:hover { color:#06c }
.file-box a:hover[target="_blank"]:not([class*="file-box"])::after { content: ""; display:inline-block;
width:18px; height:18px; margin: 0 0 0 0 ; vertical-align: middle; 
background: url('http://hj.ebiz365.com/assets/icons/default-icons.png') no-repeat; }                      
.file-box a:hover[target="_blank"]:not([class*="file-box"])::after { 
background: url('http://hj.ebiz365.com/assets/icons/default-icons.png') -5px -5px; }

/* 
donwload icons
white(-5px -5px), gray(-5px -45px), darkgray(-5px -85px), blue(-5px -125px), white-box(-5px -165px)
link icons
white(-45px 0), gray(-42px -45px), darkgray(-45px -82px), blue(-45px -120px), white-box(-45px -165px)
*/



/* ------------------------------------
tabs, tabConainer
------------------------------------ */
.tab-title { }
.tab-sub-title { margin-bottom:20px }

ul.tabs {float:left; background:transparent !important; list-style:none;  width:98.8%; margin:0 !important; padding:0; margin:10px 0 40px 0; clear:both}   
ul.tabs li{ float:left; }   
ul.tabs li a { display: block; font-weight:bold; font-size:15px; line-height:1.5; text-align:center; height:53px; padding:15px 12px 12px; color:#333 }      

/* tabs li select tab */
ul.tabs li.active a:link { color:#06c; background:#fff; text-decoration:none; border-left:1px solid #ddd; border-right:1px solid #ddd;  border-bottom:none; margin-top:-5px;  }
/* tabs li no select tabs */
ul.tabs li a:link { text-decoration:none; border:1px solid #c6c6c6;  background:#f5f5f5; }

.tabContainer { min-height:150px; margin-top:-1px; overflow:hidden;clear:both;float:left; width:100%; padding:25px 0}

/* tabContainer top contents */ 
.tabContent { padding:0; display:block; clear:both; min-height:58px; }
/* tabContainer ul, li */ 
.tabContainer ul, .tabContainer ol {margin:10px 0 30px 20px; list-style: outside ;}
.tabContainer ul { list-style:none }
.tabContainer li { padding:3px 0; }                        
.tabContainer li span { color:#333; font-weight:600 }




/* ------------------------------------
tab-esat
------------------------------------ */

.tabs-east li{background:#ccc; border:1px solid #ddd}
#tab-featured ul {margin:0; padding:0}  /* east recommended lists */
#tab-video iframe {max-width:100%}
.detail-page-tabs { padding:0 0 0 15px}
 
.tabContainer-east {min-height:150px; margin-top:-1px; overflow:hidden; clear:both; float:left; width:100%  ;background:#fff; padding-bottom:30px}
.tabContainer-east {margin-bottom:20px; }
.tabContent-east {padding:10px; }
.tabContent-east li {border-bottom:1px solid #ddd; display:block; clear:both; min-height:58px;}    
.tabContent-east li:last-child { border-bottom:none }
.tabContainer-east h3, .tab-featured h3 {font-weight:normal !important; font-size:0.95em !important}

ul.tabs-east .tabContainer { width:98.7%; padding-bottom:20px; }
ul.tabs-east .tabContainer ul, .tabContainer ol {margin:10px 0 30px 20px; list-style-type:none }
ul.tabs-east .tabContainer ul { }
ul.tabs-east .tabContainer ol { }
ul.tabs-east .tabContainer li { padding:3px 0;}   
ul.tabs-east .tabContainer li span{color:#333; font-weight:600}
.tabContainer .editor-box ul li { width:90% }

ul.tabs-east {float:left; background:transparent !important; list-style:none;  width:98.8%; margin:0 !important; padding:0;}   
ul.tabs-east {background:#eee}
ul.tabs-east li{float:left; height:35px; line-height:35px; padding:0 12px; overflow:hidden;position:relative;}
ul.tabs-east li a { text-decoration:none;height:35px; line-height:35px; color:#000; display:block; outline:none;}
ul.tabs-east li a:hover{ background:transparent; display:block }
.tabs-east li:last-of-type, #tab-tag {display:none} 

/* ------------------------------------
app-featured-thumbs
------------------------------------ */  
.app-featured-thumbs {clear:both; position:relative;}
.app-featured-thumbs li {padding:0 0 5px 0; margin-bottom:5px; }
.app-featured-thumbs .app-list-image-box {width:55px; height:55px; float:left; margin-right:10px}
.app-featured-thumbs p, .app-featured-thumbs span, .app-featured-thumbs .app-list-file {width:1px; height:1px; position:absolute; top:-2px; overflow:hidden}
.app-featured-thumbs h3 {font-weight:normal; font-size:1.0em}
.app-featured-thumbs .play-video {width:20px; height:20px;top:30%; left:50%; margin-left:-10px; margin-top:-10px; position:absolute; background:url('http://hj.ebiz365.com/assets/icons/icon-youtube.png') no-repeat center center;}

/* ------------------------------------
quick-menu
------------------------------------ */
ul.quick-menu-box { margin:0; padding:0}
.quick-menu { position:fixed; top:250px; right:0; z-index:2000; }


/* ------------------------------------
back-to-list
------------------------------------ */
.back-to-list {width:98.7%; line-height:40px; margin:50px 0; display:block; border-radius:3px; border:1px solid #ddd; text-align:center}
.back-to-list a {display:block}

/* ------------------------------------
pagination 
------------------------------------ */
.page-pagination { position:relative; margin:50px auto 20px }

ul.pagination {margin:0 auto;  list-style:none; display:block; }
ul.pagination li { text-align:center; float:left; width:40px; height:35px; margin-right:5px; border:1px solid #ddd }
ul.pagination li a { display:block; width:40px; height:35px; padding-top:7px; }
ul.pagination li.active a { background:#777; font-weight:bold; color:#fff }
ul.pagination li.hover a { background:#777; font-weight:bold }





/* #########################
DEFAULT LAYOUT & CENTER
*/
#north-container, #center-container, #south-container, #center-c, #center-e, {position:relative }




/* commonly shared properties */                                                                                                                                                       
.app-page-masonry { margin-bottom:30px; padding:0; overflow:hidden !important}  


/* center-e layout and common 
======================== */
#center-e {}
#center-e h2, #center-e h3, #center-e h4, #center-e h5 {margin:0; padding:7px 7px 7px 15px; display:block;}
#center-e-container {}
#center-e .content-inner {width:98%; margin:0 auto 30px auto; }
#center-e .text-box {width:95%; margin:10px auto}
#center-e img {max-width:100%; overflow:hidden}
#center-e iframe, #center-e table, #center-e object, #center-e embed {width:100%; overflow:hidden}
#center-e br {padding:8px 0;}
#center-e textarea, #center-e input {max-width:100%}

/* category */
p.category-summary { margin-top:10px; margin-bottom:20px; padding-left:20px; font-size:1.0em; border-left:5px solid #ccc; } /* app category summary */
li#all-categories {display:none}  /* {display:block} */
p.no-posts-yet {} /* app category if no posts message */

/* contact info */
#contact-info img {border:none}

/* qr code */
#app-detail-qrcode {clear:both !important; margin-top:30px; margin-bottom:30px; text-align:center; background:#fff; border:1px solid #ddd; border-radius:5px}
 
/* extracode1 */
#extracode1 {}

/* extracode2 */
#extracode1 {}

/* newsletter */
#newsletter-signup {}
#newsletter-signup .content-inner {border:none}





.pure-form label { color:#666; font-weight:600 }
.pure-form p span { color:#ff0000 }
.pure-form .required { color:#888 }


/* ######################## 
app-page, app-list, app-detail
######################## */


/* ------------------------------------
app-page
------------------------------------ */
.app-page { min-height:350px }
.app-page img, .app-page iframe, .app-page embed, .app-page table, .app-page object {max-width:100%; height:auto; width:auto\9; /*IE8 */}

.app-page h2 { margin: 0 0 18px; }
.app-page h3 { margin: 0 0 16.5px; }
.app-page h4 { margin: 0 0 15px; }
.app-page h5 { margin: 0 0 10px; }
.app-page h6 { margin: 0 0 10px; }
.app-page p  { margin: 0 0 18px; }  

.app-page ul.type-grid-basic { width:100% }
.app-page ul.type-grid-basic li { }


/* ------------------------------------
app-list
------------------------------------ */
.app-list h3 a, .app-list h3 a:link, .app-list h3 a:active { color:#666 }
.app-list h3 a:hover { text-decoration:underline;}

/* ------------------------------------
app-detail-tabs 
------------------------------------ */
.app-detail-tabs {margin:10px 0 40px 0; clear:both } 
.app-detail-tabs ul { width:100%; margin:0; padding:0; padding-bottom:10px; }
.app-detail-tabs li {  border:none; }     
.app-detail-tabs li h3 { font-weight:bold } 

.app-detail-tabs li .file-box { padding:20px 0 40px; }         
.app-detail-tabs li .file {}
.app-detail-tabs li .file a { padding: 12px 20px 12px 20px; border: 1px solid #ddd; color: #06c; background: transparent;  font-weight: bold !important; text-decoration: none;}
.app-detail-tabs li .file a:hover { color:#fff; text-decoration:none; }
.app-detail-tabs li .file a.file-button:hover { color:#fff; background:#444; border-color:#333; }


                                                         

/* app-page-masonry-inner */ 
.type-grid-text li .app-page-masonry-inner { width:98.5%; margin:0; position:relative; padding:10px 0 3px}
.type-grid-default1 li .app-page-masonry-inner { width:98.5%; margin:0; position:relative; padding:10px 0 }
.type-grid-default2 li .app-page-masonry-inner { width:96.9%; margin:0; }
.type-grid-1 li .app-page-masonry-inner { width:99.8% }
.type-grid-2 li .app-page-masonry-inner { width:97.9% }
.type-grid-3 li .app-page-masonry-inner { width:96.9% }
.type-grid-4 li .app-page-masonry-inner { width:94% }
.type-grid-5 li .app-page-masonry-inner { width:93% }
.type-normal li .app-page-masonry-inner { }


   
.screen-reader-user, .hidden, #skip, .screen-reader-user a, #skip a {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}
.screen-reader-user a:focus, #skip a:focus {position:static; width:auto; height:auto; }     
                       


/* ------------------------------------
app-list , app-detail
------------------------------------ */
.app-list-tag i, .app-detail-tag i {margin-right:5px} 
.app-list form, .app-detail form {max-width:100%}


/* ------------------------------------
app-list
------------------------------------ */
.app-list {margin:0; padding:0 0 30px;position:relative; overflow:hidden !important; }             
.app-list .text-title  {}
.app-list p.text-summary { overflow: hidden; text-overflow:ellipsis; line-height:16px }

.app-list ul, .app-list ol { margin:0 }


/* ------------------------------------
app-detail
------------------------------------ */
.app-detail .post-text-box { width:80%; margin-bottom:50px; }
.app-detail h3.post-title { margin-bottom:8px; padding:0 }
.app-detail p.post-summary {  font-size:14px; margin:0; padding:0 }
.app-detail p.text-date { font-size:13px; }          

/* app-detail header-title header-sub */
.header-title { margin:0; padding:20px 0 10px; border-top:1px dashed #999; }
.header-title h2  { margin:0; padding:0; color:#333; font-size:17.5px; font-weight:600; line-height:1.6 }
.header-title h2::before { position:absolute; content:''; display:inline-block; }

.header-sub { margin-bottom:20px; }
.header-sub h4  { color:#777; font-weight:600; font-size:13.5px }


/* #########################################################
grid style -  (type-grid-text, type-normal, type-grid-default1, type-grid-default2, 
type-grid-1, type-grid-2, type-grid-3, type-grid-4, type-grid5)
######################################################### */

/* ===============================================
type-grid-text (app-list) 
=============================================== */ 

/* -------------------------------------
type-grid-text (app-list) 
------------------------------------- */ 
.app-list .type-grid-text ul { }
.app-list .type-grid-text li:first-child { border-top:1px solid #ddd;  } 
.app-list .type-grid-text li { width:100%; border-bottom:1px solid #ddd; }  

.app-list .type-grid-text li .embed-box-inner { width:30%; max-width:224px; margin:0; float:left;   }       
.app-list .type-grid-text li .embed-box { position:relative; width:100%; height:0; padding-bottom:60%; margin:0 auto;   }            
.app-list .type-grid-text li .embed-box iframe {  position:absolute; top:0; left: 0; width:100%; height:auto;   }     

.app-list .type-grid-text li .image-box-inner { display:none }                     
.app-list .type-grid-text li .image-box { }
.app-list .type-grid-text li .image-box:before {  }
.app-list .type-grid-text li .image-box img { }
.app-list .type-grid-text li .image-box iframe {  }

.app-list .type-grid-text li .contents-box { width:100%; }   
.app-list .type-grid-text li .title-box h3  { width:85%; margin:0; padding:0; font-size:14px; float:left; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; padding-right:20px; }  
.app-list .type-grid-text li .title-box h3 a:hover { text-decoration: underline;  }
.app-list .type-grid-text li .summary-box p { display:none }
.app-list .type-grid-text li .date-box p { display: block; width:10%; margin:0;  font-size:12.5px; float:left; }
.app-list .type-grid-text li .views-box p {  display: block; float:right; width:3%; font-size:12.5px }    

.app-list .type-grid-text li .file-box { float:right  }
.app-list .type-grid-text li .file { }
.app-list .type-grid-text li .file a { }
.app-list .type-grid-text li .file a:hover { }                                                                       
.app-list .type-grid-text li .file a.file-button:hover { }  

/* ===============================================
type-normal
=============================================== */ 
.app-page ul.type-normal { }
.app-page .type-normal li { }

.app-page .type-normal li .single-box { }

.app-page .type-normal li .contents-box { }
.app-page .type-normal li .title-box h3 { margin:0 0 15px 0; font-size:1.234em;  }
.app-page .type-normal li .content-box p { font-size:1.0em; line-height:1.5 }

.app-page .type-normal li .image-box-inner {  }
.app-page .type-normal li .image-box {  }      
.app-page .type-normal li .image-box img { }

.app-page .type-normal li .file-box { float:right }         
.app-page .type-normal li .file     { }
.app-page .type-normal li .file a   { }
.app-page .type-normal li .file a:hover { }
.app-page .type-normal li .file a.file-button:hover { }

.app-page .type-normal li .embed-box-inner { margin-bottom:30px; }
.app-page .type-normal li .embed-box {  }
.app-page .type-normal li .embed-box iframe { position:absolute; top:0; left:0; width:100%; height:100%; }   



/* ===============================================
type-grid-default1 
=============================================== */ 

/* -------------------------------------
type-grid-default1 (app-page) 
------------------------------------- */ 
.app-page .type-grid-default1 ul { }
.app-page .type-grid-default1 li { width:100%; }  

.app-page .type-grid-default1 li .single-box { }

.app-page .type-grid-default1 li .contents-box { }
.app-page .type-grid-default1 li .title-box h3 { font-size:16px; margin:0 0 10px 0; }
.app-page .type-grid-default1 li .contents-box p {  }

.app-page .type-grid-default1 li .image-box-inner { float:left !important; }
.app-page .type-grid-default1 li .image-box { width:100%; margin:0 auto;  }
.app-page .type-grid-default1 li .image-box img { margin:0 auto; max-height:228px; }

.app-page .type-grid-default1 li .embed-box-inner, .type-grid-default1 li .image-box-inner { width:20.5%; float:left; margin:0 20px 10px 0 }            
.app-page .type-grid-default1 li .embed-box { position:relative; width:100%; height:0; max-height:321px; padding-bottom:60%; margin:0 auto; }
.app-page .type-grid-default1 li .embed-box iframe { position:absolute; top:0; left:0; width:100%; height:100% } 

.app-page .type-grid-default1 li .file-box { float:right; display:inline-block; padding:10px 0 18px }
.app-page .type-grid-default1 li .file { }                
.app-page .type-grid-default1 li .file a { }                                                                                  
.app-page .type-grid-default1 li .file a:hover { }                                                                       
.app-page .type-grid-default1 li .file a.file-button:hover { }

/* -------------------------------------
type-grid-default1 (app-list) 
------------------------------------- */ 
.app-list .type-grid-default1 li { }
.app-list .type-grid-default1 li .single-box { margin:0; height:150px;  }   

.app-list .type-grid-default1 li .contents-box { }
.app-list .type-grid-default1 li .title-box h3  { font-size:16px; overflow: hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; word-wrap:break-word; line-height:1.4em; min-height:1.4em; max-height:3.0em; }
.app-list .type-grid-default1 li .contents-box p {  }
.app-list .type-grid-default1 li .summary-box p  { margin:0; padding:0; overflow: hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; word-wrap:break-word;  line-height:.1.4em; height:3.0em; }
.app-list .type-grid-default1 li .date-box p { margin-top:10px; font-size:12px }
.app-list .type-grid-default1 li .views-box p { display:none }       

.app-list .type-grid-default1 li .image-box-inner { }
.app-list .type-grid-default1 li .image-box { position: relative; padding-top:70%; overflow:hidden;   }
.app-list .type-grid-default1 li .image-box .centered { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%);  max-height:143px;  }
.app-list .type-grid-default1 li .image-box .centered img { position: absolute; top: 0; left: 0; width:100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.app-list .type-grid-default1 li .image-box .centered img {   width:auto; height: 100%;  }

.app-list .type-grid-default1 li .embed-box-inner {  }       
.app-list .type-grid-default1 li .image-box.embed-box {  padding:40%; }            
.app-list .type-grid-default1 li .embed-box iframe {  }  
.app-list .type-grid-default1 li .play-video { top:0%; left:0%; } 

/* -------------------------------------
type-grid-default1 (app-detail) 
------------------------------------- */ 
.app-detail .type-grid-default1 ul { }
.app-detail .type-grid-default1 li { }  

.app-detail .type-grid-default1 li .single-box { }

.app-detail .type-grid-default1 li .contents-box { }
.app-detail .type-grid-default1 li .title-box h3 { }
.app-detail .type-grid-default1 li .contents-box p { }

.app-detail .type-grid-default1 li .image-box-inner {  }
.app-detail .type-grid-default1 li .image-box {   }
.app-detail .type-grid-default1 li .image-box img {  }

.app-detail .type-grid-default1 li .embed-box-inner{ }            
.app-detail .type-grid-default1 li .embed-box {  }
.app-detail .type-grid-default1 li .embed-box iframe {} 

.app-detail .type-grid-default1 li .file-box {  }
.app-detail .type-grid-default1 li .file { }                
.app-detail .type-grid-default1 li .file a { }                                                                                  
.app-detail .type-grid-default1 li .file a:hover { }                                                                       
.app-detail .type-grid-default1 li .file a.file-button:hover { }


/* ===============================================
type-grid-default2
=============================================== */ 

/* -------------------------------------
type-grid-default2 (app-page) 
------------------------------------- */
.app-page ul.type-grid-default2  {}
.app-page .type-grid-default2 li { width:48.3%; margin-bottom:30px }

.app-page .type-grid-default2 li .single-box { }

.app-page .type-grid-default2 li .contents-box { }
.app-page .type-grid-default2 li .title-box h3 { font-size:15px; line-height:1.6; margin:0 0 10px 0 }
.app-page .type-grid-default2 li .contents-box p { font-size:13px; line-height:1.5; }

.app-page .type-grid-default2 li .image-box-inner { max-width:200px; margin-right:15px; margin-bottom:20px; float:left !important }
.app-page .type-grid-default2 li .image-box { }
.app-page .type-grid-default2 li .image-box img { max-width:100%; width:auto; height:auto; margin:0 auto; }
                                                                                      
.app-page .type-grid-default2 li .embed-box-inner { width:220px; margin-right:15px; margin-bottom:30px; float:left  }       
.app-page .type-grid-default2 li .embed-box { position:relative; width:100%; height:0;padding-bottom:60%; margin:0 auto;  }            
.app-page .type-grid-default2 li .embed-box iframe { position:absolute; top:0; left: 0; width:100%; height:auto;  }  
.app-page .type-grid-default2 li .play-video  { } 
                                                                            
.app-page .type-grid-default2 li .file-box { display:inline-block; padding:12px 0 25px }         
.app-page .type-grid-default2 li .file { }
.app-page .type-grid-default2 li .file a { }                            
.app-page .type-grid-default2 li .file a:hover { }                                                                       
.app-page .type-grid-default2 li .file a.file-button:hover { }


/* -------------------------------------
type-grid-default2 (app-list) 
------------------------------------- */
.app-list ul.type-grid-default2  {}
.app-list .type-grid-default2 li { width:48%; padding:0 2% 0 0}

.app-list .type-grid-default2 li .single-box { margin:0; height:150px;  } 

.app-list .type-grid-default2 li .contents-box { } 
.app-list .type-grid-default2 li .title-box h3  { font-size:16px; overflow: hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; word-wrap:break-word; line-height:1.4em; min-height:1.4em; max-height:3.0em; }
.app-list .type-grid-default2 li .contents-box p {  }  
.app-list .type-grid-default2 li .summary-box p  { margin:0; padding:0; overflow: hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; word-wrap:break-word;  line-height:.1.4em; height:3.0em; }
.app-list .type-grid-default2 li .date-box p { margin-top:10px; font-size:12px }
.app-list .type-grid-default2 li .views-box p { display:none }      

.app-list .type-grid-default2 li .image-box-inner { width:85%; border:1px solid #ddd } 
.app-list .type-grid-default2 li .image-box { position:relative; padding-bottom:70%; overflow:hidden; }
.app-list .type-grid-default2 li .image-box .centered { position:absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%);  max-height:143px  } 
.app-list .type-grid-default2 li .image-box .centered img { position:absolute; top: 0; left: 0; width:100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0 auto;  }
.app-list .type-grid-default2 li .image-box .centered img { width:100% }

.app-list .type-grid-default2 li .play-video { top:0%; left:0%; } 



/* -------------------------------------
type-grid-default1 (app-detail) 
------------------------------------- */ 
.app-detail ul.type-grid-default2 { }
.app-detail .type-grid-default2 li { }  

.app-detail .type-grid-default2 li .single-box { }

.app-detail .type-grid-default2 li .contents-box { }
.app-detail .type-grid-default2 li .title-box h3 { }
.app-detail .type-grid-default2 li .contents-box p {  }

.app-detail .type-grid-default2 li .image-box-inner {  }
.app-detail .type-grid-default2 li .image-box {   }
.app-detail .type-grid-default2 li .image-box img {  }

.app-detail .type-grid-default2 li .embed-box-inner{ }            
.app-detail .type-grid-default2 li .embed-box {  }
.app-detail .type-grid-default2 li .embed-box iframe {} 

.app-detail .type-grid-default2 li .file-box {  }
.app-detail .type-grid-default2 li .file { }                
.app-detail .type-grid-default2 li .file a { }                                                                                  
.app-detail .type-grid-default2 li .file a:hover { }                                                                       
.app-detail .type-grid-default2 li .file a.file-button:hover { }



/* ===============================================
type-grid-1
=============================================== */ 

/* -------------------------------------
type-grid-1 (app-page) 
------------------------------------- */
.app-page ul.type-grid-1 { margin:0; padding:0 }
.app-page .type-grid-1 li { width:100%; }

.app-page .type-grid-1 li .single-box { position:relative; height:auto; clear:both;}

.app-page .type-grid-1 li .contents-box { } 
.app-page .type-grid-1 li .title-box h3 { font-size:16px; line-height:1.5; margin-bottom:10px  }
.app-page .type-grid-1 li .contents-box p  { font-size:14px; line-height:1.6; }

.app-page .type-grid-1 li .image-box-inner { }
.app-page .type-grid-1 li .image-box { }
.app-page .type-grid-1 li .image-box img { max-width:100%; width:auto; height:auto; max-height:400px; margin:0 auto; }

.app-page .type-grid-1 li .embed-box-inner { margin-bottom:10px }
.app-page .type-grid-1 li .embed-box { position:relative; width:100%; height:0; max-height:400px; padding-bottom:60%; margin:0 auto; }
.app-page .type-grid-1 li .embed-box iframe { position:absolute; top:0; left:0; width:100%; height:100%;  } 

.app-page .type-grid-1 li .file-box { display:inline-block; padding:15px 0 30px; }
.app-page .type-grid-1 li .file {  }
.app-page .type-grid-1 li .file a { }
.app-page .type-grid-1 li .file a:hover { }
.app-page .type-grid-1 li .file a.file-button:hover { }


 
/* -------------------------------------
type-grid-1 (app-list) 
------------------------------------- */             
.app-list .type-grid-1 li { margin-bottom:3%; }

.app-list .type-grid-1 li .single-box { margin-bottom:100px }

.app-list .type-grid-1 li .contents-box { margin-top:20px } 
.app-list .type-grid-1 li .title-box h3 { text-align:center }
.app-list .type-grid-1 li .contents-box p { display:none }   
.app-list .type-grid-1 li .summary-box p  {  }
.app-list .type-grid-1 li .date-box p {  }
.app-list .type-grid-1 li .views-box p { }      

.app-list .type-grid-1 li .image-box-inner { border:1px solid #ddd   }   
.app-list .type-grid-1 li .image-box { position: relative; padding-top:35%; overflow:hidden; }
.app-list .type-grid-1 li .image-box .centered { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%);  max-height:433px} 
.app-list .type-grid-1 li .image-box .centered img { position: absolute; top: 0; left: 0; width:100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);   width:auto; height: 100%; }

.app-list .type-grid-1 li .embed-box-inner { margin-bottom:0 }
.app-list .type-grid-1 li .embed-box { padding-bottom:0;  }
.app-list .type-grid-1 li .embed-box iframe {  } 
.app-list .type-grid-1 li .play-video { top:0%; left:0%; } 



/* -------------------------------------
type-grid-default1 (app-detail) 
------------------------------------- */ 
.app-detail .type-grid-1 ul { }
.app-detail .type-grid-1 li { }  

.app-detail .type-grid-1 li .single-box { }

.app-detail .type-grid-1 li .contents-box { }
.app-detail .type-grid-1 li .title-box h3 { }
.app-detail .type-grid-1 li .contents-box p {  }

.app-detail .type-grid-1 li .image-box-inner {  }
.app-detail .type-grid-1 li .image-box {   }
.app-detail .type-grid-1 li .image-box img {  }

.app-detail .type-grid-1 li .embed-box-inner{ }            
.app-detail .type-grid-1 li .embed-box {  }
.app-detail .type-grid-1 li .embed-box iframe {} 

.app-detail .type-grid-1 li .file-box {  }
.app-detail .type-grid-1 li .file { }                
.app-detail .type-grid-1 li .file a { }                                                                                  
.app-detail .type-grid-1 li .file a:hover { }                                                                       
.app-detail .type-grid-1 li .file a.file-button:hover { }



/* ===============================================
type-grid-2
=============================================== */

/* -------------------------------------
type-grid-2 (app-page) 
------------------------------------- */
.app-page ul.type-grid-2 { }        
.app-page .type-grid-2 li { width:49.7%; }

.app-page .type-grid-2 li .single-box { position:relative; height:auto; }    

.app-page .type-grid-2 li .contents-box { }
.app-page .type-grid-2 li .title-box h3 { font-size:16px; line-height:1.5; letter-spacing:-0.1px; margin-bottom:10px }
.app-page .type-grid-2 li .contents-box p { font-size:14px; line-height:1.6 }                 

.app-page .type-grid-2 li .image-box-inner { margin-bottom:15px }
.app-page .type-grid-2 li .image-box { width:100%;  max-height:321px;  }      
.app-page .type-grid-2 li .image-box img { max-width:100%; width:auto; height:auto; max-height:321px; margin:0 auto;  }
                                                                                                                          
.app-page .type-grid-2 li .embed-box-inner { margin-bottom:10px }
.app-page .type-grid-2 li .embed-box { position:relative; width:100%; height:0; max-height:321px; padding-bottom:60%; margin:0 auto; }
.app-page .type-grid-2 li .embed-box iframe { position:absolute; top:0; left:0; width:100%; height:100% } 

.app-page .type-grid-2 li .file-box {  display:inline-block; padding:12px 0 25px }       
.app-page .type-grid-2 li .file { }
.app-page .type-grid-2 li .file a { }
.app-page .type-grid-2 li .file a:hover { }                                                                       
.app-page .type-grid-2 li .file a.file-button:hover { }


/* -------------------------------------
type-grid-2 (app-list) 
------------------------------------- */
.app-list .type-grid-2 li { margin-bottom:3%; }

.app-list .type-grid-2 li .single-box { }

.app-list .type-grid-2 li .contents-box { }
.app-list .type-grid-2 li .title-box h3 { display: inline-block; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height:1.5; height:3.3em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; }
.app-list .type-grid-2 li .contents-box p { display:none }
.app-list .type-grid-2 li .summary-box p  {  }
.app-list .type-grid-2 li .date-box p {  }
.app-list .type-grid-2 li .views-box p { }    

.app-list .type-grid-2 li .image-box-inner { border:1px solid #ddd;  }   
.app-list .type-grid-2 li .image-box { position: relative; padding-top:75%; overflow:hidden;   }
.app-list .type-grid-2 li .image-box .centered { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); }
.app-list .type-grid-2 li .image-box .centered img { position: absolute; top: 0; left: 0; width:100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.app-list .type-grid-2 li .image-box .centered img {   width:auto; height: 100%;  }

.app-list .type-grid-2 li .embed-box-inner { margin-bottom:0 }
.app-list .type-grid-2 li .embed-box { padding-bottom:0;  }
.app-list .type-grid-2 li .embed-box iframe {  } 
.app-list .type-grid-2 li .play-video { top:0%; left:0%; }


/* -------------------------------------
type-grid-2 (app-detail) 
------------------------------------- */
.app-detail .type-grid-2 ul { }
.app-detail .type-grid-2 li { }  

.app-detail .type-grid-2 li .single-box { }

.app-detail .type-grid-1 li .contents-box { }
.app-detail .type-grid-2 li .title-box h3 { }
.app-detail .type-grid-2 li .contents-box p { }

.app-detail .type-grid-2 li .image-box-inner {  }
.app-detail .type-grid-2 li .image-box {   }
.app-detail .type-grid-2 li .image-box img {  }

.app-detail .type-grid-2 li .embed-box-inner { }            
.app-detail .type-grid-2 li .embed-box {  }
.app-detail .type-grid-2 li .embed-box iframe {} 
                                   
.app-detail .type-grid-2 li .file-box {  }
.app-detail .type-grid-2 li .file { }                
.app-detail .type-grid-2 li .file a { }                                                                                  
.app-detail .type-grid-2 li .file a:hover { }                                                                       
.app-detail .type-grid-2 li .file a.file-button:hover { }



/* ===============================================
type-grid-3
=============================================== */

/* --------------------------------------
type-grid-3 (app-page)
-------------------------------------- */ 
.app-page ul.type-grid-3  { }
.app-page .type-grid-3 li { width:33%; }
.app-page .type-grid-3 li .single-box { position:relative; height:auto; }

.app-page .type-grid-3 li .contents-box { }
.app-page .type-grid-3 li .title-box h3 { font-size:15px; line-height:1.5; letter-spacing:-0.1px; width:98%;  }       
.app-page .type-grid-3 li .contents-box p { font-size:13px; line-height:1.6}   

.app-page .type-grid-3 li .image-box-inner { margin-bottom:15px  }
.app-page .type-grid-3 li .image-box { width:100%; margin:0 auto;  }
.app-page .type-grid-3 li .image-box img { max-width:100%; width:auto; height:auto; max-height:205px; margin:0 auto; } 
.app-page .type-grid-3 li .link-gallery-box .text { font-size:12px; padding:8px 18px; }
 
.app-page .type-grid-3 li .image-box-inner { margin-bottom:15px  }                            
.app-page .type-grid-3 li .image-box { width:100%; margin:0 auto;  }
.app-page .type-grid-3 li .image-box img { max-width:100%; width:auto; height:auto; max-height:205px; margin:0 auto; }                                                                

.app-page .type-grid-3 li .embed-box-inner { margin-bottom:8px }
.app-page .type-grid-3 li .embed-box { position:relative; width:100%; height:0; max-height:205px; padding-bottom:60%; margin:0 auto; }
.app-page .type-grid-3 li .embed-box iframe { position:absolute; top:0; left:0; width:100%; height:100% } 
        
.app-page .type-grid-3 li .file-box { display:inline-block; padding:10px 0 25px }       
.app-page .type-grid-3 li .file { }
.app-page .type-grid-3 li .file a { }
.app-page .type-grid-3 li .file a:hover { }
.app-page .type-grid-3 li .file a.file-button:hover { }


/* --------------------------------------
type-grid-3 (app-list) 
-------------------------------------- */
.app-list .type-grid-3 li { margin-bottom:10px; }
.app-list .type-grid-3 li .single-box { }

.app-list .type-grid-3 li .contents-box { }
.app-list .type-grid-3 li .title-box h3 { display: inline-block; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal;                          line-height:1.5; height:3.3em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; }
.app-list .type-grid-3 li .contents-box p { display:none }
.app-list .type-grid-3 li .summary-box p  {  }
.app-list .type-grid-3 li .date-box p {  }
.app-list .type-grid-3 li .views-box p { }    

.app-list .type-grid-3 li .image-box-inner { border:1px solid #ddd;  }   
.app-list .type-grid-3 li .image-box { position: relative; padding-top:73%; overflow:hidden;   }
.app-list .type-grid-3 li .image-box .centered { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%);  max-height:206px;  }
.app-list .type-grid-3 li .image-box .centered img { position: absolute; top: 0; left: 0; width:100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }            
.app-list .type-grid-3 li .image-box .centered img {   width:auto; height: 100%;  }

.app-list .type-grid-3 li .embed-box-inner { margin-bottom:0 }
.app-list .type-grid-3 li .embed-box { padding-bottom:0;  }
.app-list .type-grid-3 li .embed-box iframe {  } 
.app-list .type-grid-3 li .play-video { top:0%; left:0%; }


/* -------------------------------------
type-grid-3 (app-detail) 
------------------------------------- */
.app-detail .type-grid-3 ul { }
.app-detail .type-grid-3 li { }  

.app-detail .type-grid-3 li .single-box { }

.app-detail .type-grid-3 li .contents-box { }
.app-detail .type-grid-3 li .title-box h3 { }
.app-detail .type-grid-3 li .contents-box p { }

.app-detail .type-grid-3 li .image-box-inner {  }
.app-detail .type-grid-3 li .image-box {  width:100%;  max-height:205px;   }
.app-detail .type-grid-3 li .image-box img {  }

.app-detail .type-grid-3 li .embed-box-inner { }            
.app-detail .type-grid-3 li .embed-box {  }
.app-detail .type-grid-3 li .embed-box iframe {} 
                                   
.app-detail .type-grid-3 li .file-box {  }
.app-detail .type-grid-3 li .file { }                
.app-detail .type-grid-3 li .file a { }                                                                                  
.app-detail .type-grid-3 li .file a:hover { }                                                                       
.app-detail .type-grid-3 li .file a.file-button:hover { }
 

/* ===============================================
type-grid-4
=============================================== */

/* --------------------------------------
type-grid-4 (app-page)
-------------------------------------- */ 
.app-page ul.type-grid-4  { }
.app-page .type-grid-4 li { width:25%; }

.app-page .type-grid-4 li .single-box { position:relative; height:auto; }

.app-page .type-grid-4 li .contents-box  { }
.app-page .type-grid-4 li .title-box h3 { font-size:14px; line-height:1.5; letter-spacing:-0.1px; width:98%; }    
.app-page .type-grid-4 li .contents-box p { font-size:13px; line-height:1.6 }

.app-page .type-grid-4 li .image-box-inner { }
.app-page .type-grid-4 li .image-box { width:100%; margin:0 auto;  }      
.app-page .type-grid-4 li .image-box img { max-width:100%; width:auto; height:auto; max-height:150px; margin:0 auto; } 
.app-page .type-grid-4 li .link-gallery-box .text { font-size:11px; padding:8px 18px; }

.app-page .type-grid-4 li .file-box { display:inline-block; padding:8px 0 20px }         
.app-page .type-grid-4 li .file { }
.app-page .type-grid-4 li .file a { padding: 8px 12px 8px 12px; font-size:12px  }
.app-page .type-grid-4 li .file a:hover { }
.app-page .type-grid-4 li .file a.file-button:hover { }

.app-page .type-grid-4 li .embed-box-inner { margin-bottom:15px }
.app-page .type-grid-4 li .embed-box { position:relative; width:100%; height:0; max-height:150px; margin:0 auto; }
.app-page .type-grid-4 li .embed-box iframe { position:absolute; top:0; left:0; width:100%; height:100% } 


/* --------------------------------------
type-grid-4 (app-list) 
-------------------------------------- */
.app-list .type-grid-4 li { margin-bottom:3%; }

.app-list .type-grid-4 li .single-box  { }

.app-list .type-grid-4 li .contents-box { }
.app-list .type-grid-4 li .title-box h3 { display: inline-block; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height:1.5; height:3.3em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; }
.app-list .type-grid-4 li .contents-box p { display:none }
.app-list .type-grid-4 li .summary-box p  {  }
.app-list .type-grid-4 li .date-box p {  }
.app-list .type-grid-4 li .views-box p { } 

.app-list .type-grid-4 li .image-box-inner { border:1px solid #ddd;  }   
.app-list .type-grid-4 li .image-box { position: relative; padding-top:75%; overflow:hidden;   }
.app-list .type-grid-4 li .image-box .centered { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%);  max-height:151px} 
.app-list .type-grid-4 li .image-box .centered img { position: absolute; top: 0; left: 0; width:100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.app-list .type-grid-4 li .image-box .centered img {   width:auto; height: 100%;  }

.app-list .type-grid-4 li .embed-box-inner { margin-bottom:0 }
.app-list .type-grid-4 li .embed-box { padding-bottom:0;  }
.app-list .type-grid-4 li .embed-box iframe {  } 
.app-list .type-grid-4 li .play-video { top:0%; left:0%; }


/* -------------------------------------
type-grid-4 (app-detail) 
------------------------------------- */
.app-detail .type-grid-4 ul { }
.app-detail .type-grid-4 li { }  

.app-detail .type-grid-4 li .single-box { }

.app-detail .type-grid-4 li .contents-box { }
.app-detail .type-grid-4 li .title-box h3 { }
.app-detail .type-grid-4 li .contents-box p { }

.app-detail .type-grid-4 li .image-box-inner {  }
.app-detail .type-grid-4 li .image-box { }
.app-detail .type-grid-4 li .image-box img {  }

.app-detail .type-grid-4 li .embed-box-inner { }            
.app-detail .type-grid-4 li .embed-box {  }
.app-detail .type-grid-4 li .embed-box iframe {} 
                                   
.app-detail .type-grid-4 li .file-box {  }
.app-detail .type-grid-4 li .file { }                
.app-detail .type-grid-4 li .file a { }                                                                                  
.app-detail .type-grid-4 li .file a:hover { }                                                                       
.app-detail .type-grid-4 li .file a.file-button:hover { }
 



/* --------------------------------------
type-grid-5 (app-page) 
-------------------------------------- */ 
.app-page ul.type-grid-5  { }
.app-page .type-grid-5 li { width:20%; }

.app-page .type-grid-5 li .single-box {  position:relative; height:auto; }

.app-page .type-grid-5 li .contents-box { } 
.app-page .type-grid-5 li .title-box h3 {  font-size:13px; line-height:1.6; letter-spacing:-0.1px }
.app-page .type-grid-5 li .contents-box p { font-size:12px; line-height:1.6 }

.app-page .type-grid-5 li .image-box-inner { margin-bottom:15px  }
.app-page .type-grid-5 li .image-box { width:100%;   }      
.app-page .type-grid-5 li .image-box img { max-width:100%; width:auto; max-height:114px; margin:0 auto; height:auto; }
.app-page .type-grid-5 li .link-gallery-box .text { font-size:10px; padding:8px 12px; }

.app-page .type-grid-5 li .file-box { display:inline-block; padding:8px 0 15px }
.app-page .type-grid-5 li .file { }
.app-page .type-grid-5 li .file a { padding: 6px 8px 6px 8px; font-size:10.5px }
.app-page .type-grid-5 li .file a:hover { }
.app-page .type-grid-5 li .file a.file-button:hover { }

.app-page .type-grid-5 li .embed-box-inner { margin-bottom:15px }
.app-page .type-grid-5 li .embed-box { position:relative; width:100%; height:0; max-height:114px; padding-bottom:60%; margin:0 auto; }
.app-page .type-grid-5 li .embed-box iframe { position:absolute; top:0; left:0; width:100%; height:100%; }     


/* --------------------------------------
type-grid-5 (app-list) 
-------------------------------------- */
.app-list .type-grid-5 li { margin-bottom:3%; }}

.app-list .type-grid-5 li .single-box {  }

.app-list .type-grid-5 li .contents-box { } 
.app-list .type-grid-5 li .title-box h3 { display: inline-block; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height:1.5; height:3.3em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; }
.app-list .type-grid-5 li .contents-box p { display:none }
.app-list .type-grid-5 li .summary-box p  {  }
.app-list .type-grid-5 li .date-box p {  }
.app-list .type-grid-5 li .views-box p { } 

.app-list .type-grid-5 li .image-box-inner { border:1px solid #ddd;  }   
.app-list .type-grid-5 li .image-box { position: relative; padding-top:75%; overflow:hidden;   }
.app-list .type-grid-5 li .image-box .centered { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%);  max-height:114px} 
.app-list .type-grid-5 li .image-box .centered img { position: absolute; top: 0; left: 0; width:100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.app-list .type-grid-5 li .image-box .centered img {   width:auto; height: 100%;  }

.app-list .type-grid-5 li .embed-box-inner { margin-bottom:0 }
.app-list .type-grid-5 li .embed-box { padding-bottom:0;  }
.app-list .type-grid-5 li .embed-box iframe {  } 
.app-list .type-grid-5 li .play-video { top:0%; left:0%; }


/* -------------------------------------
type-grid-5 (app-detail) 
------------------------------------- */
.app-detail .type-grid-5 ul { }
.app-detail .type-grid-5 li { }  

.app-detail .type-grid-5 li .single-box { }

.app-detail .type-grid-5 li .contents-box { }
.app-detail .type-grid-5 li .title-box h3 { }
.app-detail .type-grid-5 li .contents-box p { }

.app-detail .type-grid-5 li .image-box-inner {  }
.app-detail .type-grid-5 li .image-box { }
.app-detail .type-grid-5 li .image-box img {  }

.app-detail .type-grid-5 li .embed-box-inner { }            
.app-detail .type-grid-5 li .embed-box {  }
.app-detail .type-grid-5 li .embed-box iframe {} 
                                   
.app-detail .type-grid-5 li .file-box {  }
.app-detail .type-grid-5 li .file { }                
.app-detail .type-grid-5 li .file a { }                                                                                  
.app-detail .type-grid-5 li .file a:hover { }                                                                       
.app-detail .type-grid-5 li .file a.file-button:hover { }
 

/* #########################################################
fild(section) style -  
(tabmore, tabnormal, textmore, filemore, videomore, extramore)
######################################################### */

/* ===============================================
tabmore
=============================================== */
/* tabmore (app-detail)  */

/* ===============================================
tabnormal
=============================================== */


/* ===============================================
textmore
=============================================== */

/* ===============================================
imagemore
=============================================== */
/* imagemore single-box */
.app-detail-imagemore .type-grid-2 > :nth-child(2n) ~ *, .app-detail-imagemore .type-grid-3 > :nth-child(3n) ~ *, .app-detail-imagemore .type-grid-4 > :nth-child(4n) ~ *, .app-detail-imagemore .type-grid-5 > :nth-child(5n) ~ *  { margin-top:0 }
/* imagemore contents-box */
.app-detail-imagemore .title-box h3  { margin: 0 0 5px 0; font-weight:bold }
.app-detail-imagemore .contents-box { margin-bottom:40px }


/* ===============================================
filemore
=============================================== */
/* filemore image-box */
.app-detail-filemore .image-box img { border:1px solid #ddd }


/* ===============================================
videomore
=============================================== */
/* videomore single-box */
.app-detail-videomore .type-grid-1 li .single-box { border-bottom:1px solid #ddd }

/* ===============================================
extramore
=============================================== */





/* #########################################################
center navi
######################################################### */

           
/* cetner-navi */
.center-navi-wrap {position:relative; display:block; width:100%; max-width:1920px; margin:0 auto; background:#fff; text-align:center;}
.center-navi { position:relative; width:100%; height:57px; box-sizing:border-box; border-top:1px solid #ddd; border-bottom:1px solid #ddd; text-align:justify; z-index:999;}
/* cetner-navi container */
.center-navi .center-navi-container { width:100%; max-width:1200px; margin:0 auto; }
.center-navi .center-navi-container:after {content:""; display:block; clear:both; }
.center-navi .center-navi-container .center-navi-menu { position:relative; float:left; }
.center-navi .center-navi-container .center-navi-menu ul li { float:left; }
.center-navi .center-navi-container .center-navi-menu .home a { display:block; width:55px; height:55px; border-right:1px solid #ddd; border-left:1px solid #ddd; }
/* cetner-navi home */
.center-navi-menu .home a span {display:block; width:100%; height:100%; background:url(http://www.cityehospital.co.kr/cityhospital/image/icon_home.png)no-repeat 50% 50%;}
/* cetner-navi main-menu */
.center-navi-menu .center-navi-main-menu .default-title, .center-navi-menu .center-navi-sub-menu .default-title { position:relative; display:block; width:100%; height:55px; border-right:1px solid #ddd;} 
.center-navi-menu .center-navi-main-menu .default-title p, .center-navi-menu .center-navi-sub-menu .default-title p { position:relative; font-size:14px; font-weight:400; line-height:60px; padding-left:15px;}
/* cetner-navi sub-menu */
.center-navi-menu .center-navi-sub-menu .default-title p span { position:absolute; display:inline-block; top:22px; right:10px;  width:18px; height:18px; background:url(http://www.cityehospital.co.kr/cityhospital/image/icon_menuoff.png)no-repeat;}
.center-navi-menu .center-navi-sub-menu .cn-sub-list ul li {float:clear; width:180px; margin-top:12px;}
.center-navi-menu .center-navi-sub-menu .cn-sub-list ul li a {display:block; box-sizing:border-box; font-size:14px; font-weight:500; line-height:18px; padding-left:10px; }
.center-navi-menu .center-navi-sub-menu .cn-sub-list ul li a:hover { background:url(http://www.cityehospital.co.kr/cityhospital/image/icon_menuon.png)no-repeat 152px 0; text-decoration:underline; }
.center-navi-menu .center-navi-sub-menu .cn-sub-list {position:absolute; display:block; top:55px; right:0; width:180px; height:0; background:#fff; border:1px solid #ddd; overflow:hidden; transition:0.2s; transition-delay:0.1s;  z-index:500; border-top:0;}
.center-navi-menu .center-navi-sub-menu:hover .cn-sub-list { height:180px;}


@media screen and (min-width:320px){
.center-navi-wrap {width:100%; height:100%; min-width:320px; margin:0 auto;}
.center-navi .center-navi-container .center-navi-menu .home a { width:50px  }   
.center-navi-menu .center-navi-main-menu .default-title { width:100px  }     
.center-navi-menu .center-navi-sub-menu .default-title, .center-navi-menu .center-navi-sub-menu .cn-sub-list { width:170px  }  
}

@media screen and (min-width:480px){
.center-navi-wrap {width:100%; height:100%; min-width:480px; margin:0 auto;}
.center-navi .center-navi-container .center-navi-menu .home a { width:60px;}
.center-navi-menu .center-navi-main-menu .default-title {width:160px;}
.center-navi-menu .center-navi-sub-menu .default-title, .center-navi-menu .center-navi-sub-menu .cn-sub-list {width:180px;}
}
@media screen and (min-width:960px){
.center-navi-wrap {width:100%; height:100%; min-width:960px; margin:0 auto;}
} 

@media screen and (min-width:1000px){
.center-navi-wrap {width:100%; height:100%; min-width:1000px; margin:0 auto;}
} 
@media screen and (min-width:1100px){
.center-navi-wrap { width:100%; height:100%; min-width:1100px; margin:0 auto;}  
} 


/* #########################################################
fild(section) style -  border-img, border-box, gallery-box
######################################################### */

.type-grid-1 li .right .image-box { float:right !important; width:40%; margin:0 0 20px 15px }
.type-grid-1 li .left .image-box { float:left !important; width:40%; margin:0 15px 25px 0 }
.type-grid-1 li .center .image-box { display:block; margin:0 auto; text-align:center;}
.type-grid-1 li .file-box { padding:0;}

.type-grid-2 li .center .image-box, .type-grid-3 li .center .image-box, .type-grid-4 li .center .image-box, .type-grid-5 li .center .image-box { text-align:center }
.type-grid-2 li .right .image-box, .type-grid-3 li .right .image-box, .type-grid-4 li .right .image-box, .type-grid-5 li .right .image-box { text-align:right }

/* ===============================================
border-img, border-box, gallery-box
=============================================== */
/* --------------------------------------
border-box, border-img
-------------------------------------- */ 
/* border-box, border-img (basic) */
.border-box .app-detail-masonry-inner, .border-img .app-detail-masonry-inner { }
.border-img .contents-box, .border-box .contents-box { }
.border-box .app-detail-masonry-inner { display:inline-block }

/* --------------------------------------
border-box
-------------------------------------- */ 
/* border-box (basic) */
.border-box .app-detail-masonry-inner { border:1px solid #ddd; }
.border-box .app-detail-masonry-li {  margin-bottom:20px }    

.border-box .contents-box { padding:8px 12px 5px; }     
.border-box .image-box .align-l img { margin:0 15px 0 0  }
.border-box .image-box .align-r img { margin:0 0 0 15px }
.border-box .image-box .align-n img { margin:20px 0 0 0  }

.border-box .type-grid-2 img, .border-box .type-grid-3 img, .border-box .type-grid-4 img, .border-box .type-grid-5 img { width:100% !important;  }
.border-box .type-grid-2 .file-box, .border-box .type-grid-3 .file-box, .border-box .type-grid-4 .file-box, .border-box .type-grid-5 .file-box  { padding:0 }

/* border-box (type-grid-default1) */
.border-box .type-grid-default1 li .app-detail-masonry-inner .image-box-inner, .border-box .type-grid-default1 li .app-detail-masonry-inner .embed-box-inner { margin:8px 15px 20px 15px; }
.border-box .type-grid-default1 .contents-box { margin:0; padding:3px 15px 10px }

/* border-box (type-grid-default2) */
.border-box .type-grid-default2 .single-box { margin-bottom:0 }
.border-box .type-grid-default2 .image-box, .border-box .type-grid-default2 .embed-box-inner { margin:20px 0 15px 15px; padding:0 }
.border-box .type-grid-default2 .contents-box { margin:0; padding:10px 15px 8px; }
  
/* border-box (type-grid-default-1) */
.border-box .type-grid-1 li .file-box  { float:left }
.border-box .type-grid-1 li .right img, .box-img .type-grid-1 li .right img  { float:right !important; max-width:350px; margin-left:18px }

/* border-box (type-grid-default-2) */
.border-box .type-grid-2 li .image-box-inner { margin-bottom:5px }
.border-box .type-grid-2 li .contents-box { padding:12px 10px }
.border-box .type-grid-2 li .contents-box h3 { margin-bottom:10px }

/* border-box (type-grid-default-4) */
.border-box .type-grid-4 li .image-box-inner { margin-bottom:5px }
.border-box .type-grid-4 li .contents-box { padding: 8px 10px }
.border-box .type-grid-4 li .contents-box h3 { margin-bottom:10px }

/* border-box (type-grid-default-5) */
.border-box .type-grid-5 li .image-box-inner { margin-bottom:5px }
.border-box .type-grid-5 li .contents-box { padding: 8px 10px }
.border-box .type-grid-5 li .contents-box h3 { margin-bottom:10px }

/* border-box (imagemore) */
.border-box .type-grid-imagemore .app-detail-masonry-inner { border:none }
.border-box .type-grid-imagemore .app-detail-masonry-inner img  { border:2px solid #ddd; }


/* --------------------------------------
border-img
-------------------------------------- */
/* border-img (basic) */
.border-img .app-detail-masonry-li img { border:1px solid #ddd; padding:10px; }
.border-img .app-detail-masonry-li .embed-box { border:1px solid #ddd;  }

/* border-img (type-grid-default1) */
.border-img .type-grid-default1 li .app-detail-masonry-inner { margin-bottom:25px; }    

/* border-img (type-gridt2) */
.border-img .type-grid-default2 li .file-box { float:left }

/* border-img (type-gridt-1) */
.border-img .type-grid-1 li .contents-box { padding:0 }
.border-img .type-grid-1 li .image-box {  max-width:350px;  float:none; }
.border-img .type-grid-1 li .right .image-box { float:right !important; max-width:350px;  margin:0 0 20px 15px }
.border-img .type-grid-1 li .left .image-box { float:left !important; max-width:350px;  margin:0 15px 25px 0 }
.border-img .type-grid-1 li .center .image-box  { display:block; margin:0 auto; text-align:center; }
.border-img .type-grid-1 li .file-box { }


/* --------------------------------------
gallery-box 
-------------------------------------- */ 
/* gallery-box (basic) */
.gallery-box-inner .image-box img { max-width:100%; height:auto; overflow:hidden; }

/* gallery-box (link) */
.link-gallery-box  { position:relative; width:100%; }

.link-gallery-box .link-image { display:block; width:100%; height:auto; opacity:1; transition: .5s ease; backface-visibility: hidden;}
.link-gallery-box:hover .link-image { opacity: 0.3; }

.link-gallery-box .overlay { position: absolute; top:50%; left:50%; transition: .5s ease; opacity: 0; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align:center; }
.link-gallery-box:hover .overlay { opacity: 1; }

.link-gallery-box .text { background-color: #555; color: white; font-size:14px; padding:10px 20px; }



ul.ul-bullet-square {padding:0 0 0 20px !important; margin:0}
ul.ul-bullet-square li {padding:3px 0; margin:0; list-style:square !important}                                                                                                       
h2.cta-title {width:85% !important}

/* center-c ul, ol, p spacing */                           
#center-c ul, #center-c ol {margin:10px 0 30px 20px;}
ul.app-page-masonry { margin:0 !important; list-style-type:none}
#center-c li {padding:5px 0;}
#center-c ul.type-tabs li {padding:0}
#center-c p {margin-bottom:20px}
#center-c .app-list-text-box p {margin-bottom:0}




/* commonly shared properties */                                                                                                                                                       
.app-page-masonry { margin-bottom:30px; padding:0; overflow:hidden !important}  

/* commons */  
.play-video {width:36px; height:25px;top:50%; left:50%; margin-left:-18px; margin-top:-12.5px; position:absolute; background:url('http://hj.ebiz365.com/assets/icons/icon-youtube.png') no-repeat center center;}          
#side-menu h2 { margin:0; padding:0 }        






/* #########################
SOUTH
*/

/* commons */
#south-n, #south-c, #south-s,#south-sw, #south-sc, #south-se {position:relative;}
#footer p, #south p, #footer-bottom p, #south-bottom p {  font-size:14px; }
.south-sns-share {margin:0 auto; float:right}
.south-sns-share span {overflow:hidden; width:1px; height:1px; position:absolute; top:-10px;}
.south-sns-share a {margin-right:10px; }

#south i {margin-right:7px}
.south-commons #south-n span, .south-commons #south-n .south-n3 h3, .south-commons #south-n .south-n3 p, 
.south-commons .south-n1 p, .south-commons .south-n2 p, .south-commons .south-n3 p {display:none}
.south-commons .south-n1 h3, .south-commons .south-n2 h3 {font-weight:normal; font-size:1.0em}
.south-commons ul, .south-commons h2, .south-commons h3, .south-commons li, .south-commons p {margin:0; padding:0}
.south-commons .home-south-inner {width:95%; margin:0 auto} 

/* south-n */
.south-commons .south-n1, .south-commons .south-n2, .south-commons .south-n3, .south-commons .south-n4 {width:25%; float:left}
.south-commons #south-n li {padding:3px 0}
.south-commons #south-n h2 {margin-bottom:15px}   
.south-commons .south-n3 ul {margin:0 !important; padding:0 !important}

.south-commons .south-n3 li, .south-commons .photo-only li {width:60px; height:60px; float:left; list-style:none !important; padding:0; margin:0 10px 10px 0 !important }
.south-commons .south-n3 li img, .south-commons .photo-only li img {width:60px; height:60px;  border:2px solid #fff; background:#efefef; }

.south-commons .photo-only li img:hover {border:2px solid #f63}
.south-commons .photo-only li h3, .south-commons .photo-only li p, .south-commons .photo-only li span  {width:1px; height:1px; overflow:hidden; position:absolute; top:-10px}
.south-commons .photo-only li:hover {border:none}

.title-only li{padding:5px 0; border-bottom:1px solid #ddd }
.title-only li h3 {font-weight:normal !important; display:block !important; font-size:0.95em; margin:0;  }
.title-only li img, .title-only li span {position:absolute; width:1px; height:1px; overflow:hidden; top:-10px}




/* south-c */
.south-sns-share {width:200px; margin:0 auto; }

/* south-s */
#south-sw, #south-sc, #south-se {width:33% !important;}     
#south-sw { float:left}
#south-sc { float:left; width:23%}
#south-se {float:right !important; text-align:right}

span.terms {width:100%; }
span.terms a {padding:0 7px 0 0; font-size:12px; font-weight:normal  !important }   
span.terms a:hover  { text-decoration:underline }   
span.terms a:last-of-type { border-right:none }


#copyright a { font-weight:normal }


/* #########################
HOMEPAGE, BANNERS and OTHERS
*/
.homepage-floor {width:100%; margin:0 auto; padding:0}
.homepage-container {margin:0; padding:0}
.home-box-inner {background:#fff}

.homepage_banner, .homepage-banner-box {position:relative}
.homepage-banner-box {width:100%; margin:0 auto 40px auto;}
.homepage_banner .playSlider {width:100% !important; margin:0 auto; overflow:hidden}  /* potato */

/* homepage image sizes */
.homepage-col1 img {width:100%; height:280px !important}
.homepage-col2 img {width:100%; height:160px !important}
.homepage-col3 img {width:100%; height:120px !important}
.homepage-col4 img {width:100%; height:100px !important}
.homepage-col5 img {width:100%; height:80px !important}



.source-url { padding-left:30px; border:1px solid #ccc; margin:30px 0;  background:#eee; line-height:20px}






                                           







/* mbkang add    tables
============================================================================ */ 
table { margin:0 0 15px }
table th { text-align:center;}
table, th, td{ border:1px solid #d4e0ee; border-collapse:collapse; color:#555; }
caption{ font-size:120%; font-weight:bold; margin:5px; text-align:left; }
td, th{ padding:4px }
thead th{ background:#f7f7f7; font-weight:bold; font-size:100% !important; text-align:center; color:#333  }
tbody th{ font-weight:bold;}
tbody tr { }
tbody tr.odd{ background:#f7f9fc; }
table a:link { text-decoration:none; }
table a:visited {color:#718abe;text-decoration:none;}
table a:hover{ color:#06c; text-decoration:underline !important;}
table td strong { color:#0851ad; }

tfoot th,tfoot td{font-size:85%;}
#center table, #center-c table {width:98% !important}
table td p {margin:0 !important; padding:0 !important; }


table .navy { background-color:#0851ad; color:#fff  } 
table td li { width:90% !important }




/* catetory-table */
.category-table td { border:1px solid #fff; text-align:center; line-height:1.0; font-weight:bold; color:#333; border-bottom:2px solid #606060; padding:0 0 10px  }




/* end                             
============================================================================ */  


/* app dates, summary etc display none */
/* .blog-list-masonry-inner p.app-list-up-date,  */
.client-list-masonry-inner p.app-list-up-date,
.download-list-masonry-inner p.app-list-up-date,
.faq-list-masonry-inner p.app-list-up-date,
.product-list-masonry-inner p.app-list-up-date,
.service-list-masonry-inner p.app-list-up-date, 
.recruit-list-masonry-inner p.app-list-up-date,
.client-detail-up-date,
.download-detail-up-date,
.faq-detail-up-date,
.product-detail-up-date,
.service-detail-up-date,
.recruit-detail-up-date,
.slider-video .bx-caption {display:none}
 
/* contact page */
.contact-page {background:transparent; width:96%; margin:0 auto 50px; padding:0 0 50px}
.contact-information {width:50%; float:left}
.contact-forms {width:50%; margin: 0 0 50px 0; float:right}
.contact-inner {width:90%}
.contact-map {margin:0 0 30px 0}    
.parking-information {margin:30px 0; }
.parking-information p {margin:0 0 15px }



/* #########################
Utilities and others
*/


/* tables, add to purecss tables */
.pure-table {width:100%; margin:20px 0}
.pure-table td p {margin:0 !important; padding:0 !important}


/* ------------------------------------
button  http://purecss.io/buttons/
------------------------------------ */
.button-success,.button-error,.button-warning,.button-secondary{color:white; border-radius:4px; text-shadow:0 1px 1px rgba(0,0,0,0.2); }
.button-success{background:rgb(150,215,219);/* this is a green */}
.button-error{background:rgb(202,60,60);/* this is a maroon */ }
.button-warning{background:rgb(223,117,20);/* this is an orange */}
.button-secondary{background:rgb(66,184,221);/* this is a light blue */}
.button-xsmall{font-size:70%; }
.button-small{font-size:85%; }
.button-large{font-size:110%; }
.button-xlarge{font-size:125%; }

.jina-button-download {margin-top:15px !important; background:#ddd !important;  border:1px solid #ccc; padding:5px 15px; color:white; border-radius:4px !important; }
.jina-button-download a, .jina-button-download a:visited {color:#000 !important}

.click-box  { padding:20px 0 40px;  }  
.click-box a { padding: 12px 20px 12px 20px;
border: 1px solid #ddd; color: #06c; background: transparent;  font-weight: bold !important;
text-decoration: none;}
.click-box  a:hover { color:#fff; text-decoration:none; }
.click-box a.click-button:hover { color:#fff; background:#444; border-color:#333; }


/* history */
.history.editor h2 { float:left; width:15%; height:100px; padding-top:28px; }
.history.editor blockquote   { border:1px solid #fff !improtant }