html, head, body {
    margin:0;
    padding:0;
    font-size:1em;
    font-family:"Apple SD Gothic Neo", 'Jeju Gothic', 'Nanum Gothic', sans-serif !important;
    box-sizing:initial;
}
body { overflow-y:scroll; margin:auto; /*width:1100px; padding:0 20px;*/}

.debug {display:none !important;}

.contentBody input[type=password],
.contentBody input[type=text] {
    -webkit-appearance: textfield !important; 
}

#container .content.detail.news .contentBody *,
#container .content.detail.interview .contentBody *,
#container .content.detail.column .contentBody *,
#container .content.detail.eduenglish .contentBody *,
#container .content.detail.eduinfo .contentBody *
{ font-family:unset !important; font-size:16px !important; line-height:24px !important; }


.replyCnt {color:red; margin-left:5px;}
.textEllipseOneline { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }


/* CONTENT BOX */
.contentBox .listHeader { font-weight:bold; font-size:20px; margin-bottom:15px; margin-top:2px;}
.contentBox ul { overflow:hidden; margin:0; padding:0; list-style:none;}
.contentBox ul li { font-size:15px; padding-left:10px; line-height:20px; margin-bottom:10px;}
.contentBox .dot ul li::before {
    /* Bullet configuration */
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: firebrick; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */ 
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -8px; /* Also needed for space (tweak if needed) */
}


#header { width:1100px; margin:auto; padding:0 20px; padding-top:30px; }
#header #headerWrapper {width:100%; position:fixed; z-index:1200;}
#header #headerContainer {padding:0 20px;}
#header #top { width:1100px; margin:auto; }
#header #top #logo { height:100px; }
#header #top #logo a img { margin-top:-20px; }
#header #top ul.menu a { text-decoration:none; font-size:1.2em; color:black;}
#header #top ul.menu a:hover { color:#c41916;}
#header #top form.searchSection input { border:none; }
#header #top form.searchSection input.searchTerm { font-size:1.2em; }
#header #top .searchMode .centerSection li a { color:#aaa; }
#header #top #indexTopMenu input.searchBtn {
    display:none;
    width: 30px;
    height:35px;
    background: url(/common/img/icon_common.png) no-repeat -97px -26px;
    z-index:1;
}
#header #top #indexTopMenu.searchMode input.searchBtn { display:block; }
#header #top #indexTopMenu ul.menu li {font-weight:bold;}
#header #top #indexTopMenu ul.menu a { padding:6px 10px; cursor:pointer; line-height:25px;}
#header #top #indexTopMenu ul.menu a:hover,
#header #top #indexTopMenu ul.menu a:hover li,
#header #top #indexTopMenu ul.menu a.active,
#header #top #indexTopMenu ul.menu a.active li { background-color:firebrick; color:white; font-weight:normal; }
#container { width:1100px; margin:auto; margin-top:10px; padding:0 20px;}
#container section { display:flex; align-items:center; justify-content:space-between; margin:25px auto; }
#container section .separator-right { border-right:1px solid #d7d7d7; padding-right:20px; margin-right:20px;}
#container section .separator-left { border-right:1px solid #d7d7d7;}
#container hr {height:1px; border:none; background-color:#e58387; }

/* SECTION - COMMON SETTING */
section a,
section a .title { text-decoration:none; color:#252525; transition:0.5s;}
section a:hover,
section a:hover .title { text-decoration:underline; color:firebrick !important;}

/* SECTION - HEADLINE */
section#headline { display:flex; align-items:start;}
section#headline .separator-right { padding-right:24px; }
section#headline .content { height:330px; }
section#headline .content .newsLatestList .newsList li { height:19px; line-height:19px; }

section#headline .headline-news { display:inline-block; width:730px; height:100%; float:left;}
section#headline .headline-news .content { height:360px; }
section#headline .headline-news .newsMain { width:520px; height:100%; float:left; overflow:hidden;}
section#headline .headline-news .newsMain .newsImg { height:240px; border:1px solid silver; overflow:hidden;}
section#headline .headline-news .newsMain .newsImg img { object-fit:cover; width:100%; height:100%; transition:0.3s;}
section#headline .headline-news .newsMain:hover .newsImg img { transform:scale(1.1);}
section#headline .headline-news .newsMain .title { font-weight:bold; font-size:20px; line-height:35px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
section#headline .headline-news .newsMain .desc { font-size:14px; line-height:21px; color:#666; word-break:break-all; height:84px; overflow:hidden;}
section#headline .headline-news .newsThumbList { width:200px; height:100%; float:right; }
section#headline .headline-news .newsThumbList ul { list-style:none; margin:0; padding:0; height:auto;}
section#headline .headline-news .newsThumbList ul li  {width:190px; height:115px; margin-bottom:7px;}
section#headline .headline-news .newsThumbList ul li .img{ width:190px; height:80px; overflow:hidden;}
section#headline .headline-news .newsThumbList ul li img{ width:100%; height:100%; object-fit:cover; transition:0.3s;}
section#headline .headline-news .newsThumbList ul li:hover img{ transform:scale(1.1);}
section#headline .headline-news .newsThumbList ul li .title{color:#333; font-weight:bold; font-size:14px; height:35px; line-height:18px; overflow:hidden;}
section#headline .latest-news { display:inline-block; width:320px; height:100%; float:right; }
section#headline .latest-news .content { height:240px; }
section#headline .latest-news ul { height:202px; }
section#headline .latest-news .promo-video { margin-top:4px; }
section#headline .latest-news .promo-video.fixedToTop { position:fixed; top:30px; z-index:2;}
section#headline .latest-news .promo-video .title { text-align:center; line-height:40px; font-weight:bold; font-size:18px; color:white; background-color:brown; margin-top:-5px;}
section#headline .latest-news .promo-video a:hover { text-decoration:none; }
section#headline .latest-news .promo-video a:hover .title{ color:white !important; background-color:#c52a2a; }
section#headline .newsMain a:hover { text-decoration:unset; color:firebrick;}
section#headline .newsMain a:hover .desc { color:firebrick;}

/* SECTION - SECONDROW */
section#edu-mix { display:flex; align-items:start;}
section#edu-mix .contentBox { width:340px; }
section#edu-mix .contentBox ul { height:270px; }
section#edu-mix .contentBox ul li { width:fit-content; line-height:20px; color:black; font-size:14px; line-height:17px; font-weight:bold;}
section#edu-mix .contentBox ul li .title {display:inline-block; font-weight:normal; }

section#edu-mix .contentBox .mainArticle .thumb {height:160px; border:1px solid #d7d7d7; margin-bottom:10px; overflow:hidden;} 
section#edu-mix .contentBox .mainArticle .thumb img {width:100%; height:100%; object-fit:cover; transition:0.3s;} 
section#edu-mix .contentBox .mainArticle:hover .thumb img {transform:scale(1.1);} 
section#edu-mix .contentBox .mainArticle .title {font-weight:bold; font-size:18px; line-height:22px; height:48px; margin-bottom:10px; } 

section#edu-mix .contentBox.univ-admission  .content, 
section#edu-mix .contentBox.seminarNews     .content,
section#edu-mix .contentBox.eduEnglish      .content {background-color:white;}
section#edu-mix .contentBox.eduEnglish .cateName {display:inline-block;}
section#edu-mix .contentBox.eduEnglish .mainArticle .title {
    display:block; height:29px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
section#edu-mix .contentBox.eduEnglish ul li .title {display:inline-block;}
section#edu-mix .content { height:370px; overflow:hidden;}

/* SECTION - INTERVIEW-COLUMN */
section#interview-column { display:flex; align-items:start;}

section#interview-column .contentBox.interview .content { background-color:white; margin-right:3px;}
section#interview-column .contentBox.eduColumn {width:330px;}

section#interview-column .interview .listHeader { display:inline-block; width:160px; height:100%; }

section#interview-column .listHeader ul.subcate { margin-top:30px; }
section#interview-column .listHeader ul.subcate a { text-decoration:none; }
section#interview-column .listHeader ul.subcate li { text-align:left; color:dimgray; font-weight:bold; font-size:14px; 
    cursor:pointer; margin:0; line-height:30px; padding-left:15px; padding-right:10px; border-right:3px solid transparent; 
    list-style:disc; list-style-position:inside;}
section#interview-column .listHeader ul.subcate li:hover,
section#interview-column .listHeader ul.subcate li.active { color:firebrick; font-weight:bold; border-right:3px solid firebrick;}
section#interview-column .listHeader ul.subcate li:hover  { background-color:antiquewhite;}
section#interview-column .listHeader ul.subcate li.active { background-color:transparent; cursor:default;}

section#interview-column .content { height:240px; }
section#interview-column .content .interviewSummary { display:inline-block; vertical-align:top; width:525px; height:100%; overflow:hidden}
section#interview-column .content .interviewSummary .thumbnail {display:inline-block; width:130px; height:120px; overflow:hidden; vertical-align:top; border-radius:20px;}
section#interview-column .content .interviewSummary .thumbnail img { width:100%; height:100%; object-fit:cover; transition:0.3s;}
section#interview-column .content .interviewSummary:hover .thumbnail img { transform:scale(1.1);}
section#interview-column .content .interviewSummary .info {display:inline-block; width:380px; float:right; word-break:break-all; line-height:20px; overflow:hidden;}
section#interview-column .content .interviewSummary .info::after {clear:both; }
section#interview-column .content .interviewSummary .info .title {color:black; font-weight:bold; font-size:16px; margin-bottom:5px; height:40px; overflow:hidden; }
section#interview-column .content .interviewSummary .info .subtitle {color:brown; font-weight:bold; font-size:14px; margin-bottom:5px; height:40px; overflow:hidden;}
section#interview-column .content .interviewSummary .info .desc {color:dimgray; font-size:14px; height:40px; overflow:hidden;}

section#interview-column .content .eduNewsList.interview { display:inline-block; vertical-align:top; width:530px; height:100px; margin-top:20px;}
section#interview-column .content .eduNewsList.interview li { height:25px; color:black; font-size:14px; font-weight:bold; margin-bottom:7px;}
section#interview-column .column { display:inline-block; width:320px; height:100%; float:left;}

/* SECTION - EDU INFO */
section#edu-info { display:flex; align-items:start;}

section#edu-info .contentBox.eduInfo .content { background-color:white; margin-right:3px;}

section#edu-info .eduInfo .listHeader { display:inline-block; width:160px; height:100%; }

section#edu-info .eduInfo { display:inline-block; height:100%; float:left;}

section#edu-info .listHeader ul.subcate { margin-top:30px; }
section#edu-info .listHeader ul.subcate a { text-decoration:none; }
section#edu-info .listHeader ul.subcate li { 
    text-align:left; color:dimgray; font-weight:bold; font-size:14px; 
    cursor:pointer; margin:0; line-height:30px; padding-left:15px; padding-right:10px; 
    list-style:disc; list-style-position:inside; border-right:3px solid transparent;
    white-space:nowrap;
}
section#edu-info .listHeader ul.subcate li:hover,
section#edu-info .listHeader ul.subcate li.active { color:firebrick; font-weight:bold; border-right:3px solid firebrick;}
section#edu-info .listHeader ul.subcate li:hover  { background-color:antiquewhite;}
section#edu-info .listHeader ul.subcate li.active { background-color:transparent; cursor:default;}

section#edu-info .content { height:240px; }
section#edu-info .content .eduInfoList { display:inline-block; vertical-align:top; width:530px; height:100%; overflow:hidden}
section#edu-info .content .eduInfoList a { display:inline-block; width:160px; height:240px; overflow:hidden; padding:0 7px; transition:0.3s;}
section#edu-info .content .eduInfoList a li { padding:0; margin:0;}
section#edu-info .content .eduInfoList a.hide { width:0; padding:0}
section#edu-info .content .eduInfoList a.hide li{ padding:0; margin:0;}
section#edu-info .content .eduInfoList li img { transition:0.3s;}
section#edu-info .content .eduInfoList li:hover img { transform:scale(1.1);}
section#edu-info .content .eduInfoList .cate{ display:inline-block; border:2px solid #009da5; color:#009da5; font-weight:bold; font-size:14px; padding:1px 8px; }
section#edu-info .content .eduInfoList .title{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:bold; }
section#edu-info .content .eduInfoList .desc{ height:44px; font-size:12px; line-height:15px; overflow:hidden; word-break:break-all; margin-top:4px;}
section#edu-info .content .eduInfoList .thumb{ 
    position:relative; width:100%; height:160px; margin-bottom:10px; 
    overflow:hidden; border:1px solid #d7d7d7;}
section#edu-info .content .eduInfoList .thumb .cate{ 
    display:inline-block; 
    border:2px solid #009da5; 
    color:#009da5; 
    font-weight:bold; 
    font-size:14px; 
    padding:1px 8px; 
    text-align:center;
    line-height:40px;
    display:block;
    width:120px;
    margin:auto;
    margin-top:60px;
}
section#edu-info .content .eduInfoList .thumb img{ width:100%; height:100%; object-fit:cover; }
section#edu-info .content .eduInfoList .thumb.edu-info-seminar{background:url(/education/img/edu_info_seminar.jpg) no-repeat}
section#edu-info .content .eduInfoList .thumb.edu-info-admission{background:url(/education/img/edu_info_admission.jpg) no-repeat}
section#edu-info .content .eduInfoList .thumb.edu-info-consulate{background:url(/education/img/edu_info_consulate.jpg) no-repeat}



section#edu-info .community { display:inline-block; width:320px; height:100%; float:left;}
section#edu-info .community .content .communityList { height:215px; overflow:hidden;}
section#edu-info .community .content .communityList .cateName { display:inline-block; margin-right:5px; font-weight:bold;}
.communityList .cateName.comm-ab-study { color:tomato; }
.communityList .cateName.comm-edu      { color:darkgreen;}

#footer{padding:0 20px;}







/*******    Advertisement    *******/
.promo {margin-top:15px; margin-left:auto; margin-right:auto; height:90px; display:flex; align-items:center; justify-content:center;}
#header #top .promo {width:320px; height:90px; position:absolute; top:5px; margin-top:auto; overflow:hidden; z-index:100;}
#header #top .promo.left {left:0px;}
#header #top .promo.right {right:0px;}
#header #top .promo img{width:100%}

#headline .promo a {display:inline-block; vertical-align:middle; text-align:center; width:100%; height:100%;}
#headline .promo a img {width:100%;}





/*******    List & Content & Submenu  *******/
#container .list,
#container .content.detail {float:left; width:740px; padding-right:30px; border-right:1px solid #d7d7d7; margin-bottom:10px;}
#container .list a {text-decoration:none; color:#222;}
#container .list a:hover {text-decoration:none; color:firebrick;}
#container .list ul {list-style:none; padding-left:10px; padding-right:10px;}
#container .list ul li {margin-bottom:30px; display:inline-block;}
#container .list ul li.googlePromo {padding:0 5px;}

#container .list .submenu {padding-top:5px;}
#container .list .submenu ul {border-bottom:1px solid darkgray; text-align:right; line-height:19px; padding:0;}
#container .list .submenu ul li {border:1px solid darkgray; border-bottom:unset; display:inline; padding:5px 10px; padding-bottom:1px; font-size:16px; font-weight:bold;}
#container .list .submenu ul li:hover {font-weight:bold; color:firebrick; border-color:firebrick;}
#container .list .submenu ul li.active {background-color:bisque; font-weight:bold; border-color:firebrick;}
#container .list .submenu ul li.active:hover {color:black;}

#container .list ul.contentList {padding:0}
#container .list .contentList h3 {margin-bottom:10px; font-size:18px;}
#container .list .contentList h3:hover {text-decoration:underline;}
#container .list .contentList h3 .cateName {display:contents; color:firebrick;}
#container .list .contentList h3 .replyCnt {display:inline-block; font-size:16px;}
#container .list .contentList .desc {
    color:#666; font-size:16px; font-weight:normal; line-height:20px; 
    display:block; height:100px; overflow:hidden;}
#container .list .contentList .desc:hover {color:black;}
#container .list .contentList .desc .thumb {margin-right:20px; float:left; width:160px; height:100%;}
#container .list .contentList .desc .thumb img {width:100%; min-height:100%;}

#container .list .contentList.community .desc {height:auto; margin-bottom:10px;}

#container .list .contentList .info {display:block; clear:both;}
#container .list .contentList .writer,
#container .list .contentList .reporter {color:#666; font-size:12px; font-weight:bold;}
#container .list .contentList .date {color:#999; font-size:12px; font-weight:bold; margin-left:10px; padding-left:8px; border-left:0px solid #d7d7d7;}

#container .content .contentHeader { height:auto; border-bottom:1px solid darkgray; padding-bottom:10px}
#container .content .contentHeader h2.title { display:block; margin:0; margin-bottom:10px; font-size:24px;}
#container .content .contentHeader h4.subtitle { display:block; margin-top:0; color:#555; font-size:15px;}
#container .content .contentHeader .group { display:block; vertical-align:top; height:100%; font-weight:bold; font-size:16px; color:gray;}
#container .content .contentHeader .info  { display:block; height:100%; position:relative;}
#container .content .contentHeader .info span { font-size:12px; font-weight:bold;}
#container .content .contentHeader .info .writer,
#container .content .contentHeader .info .date {color:#999; font-weight:normal; }
#container .content .contentHeader::after  { clear:both; }
#container .content .contentBody { padding: 30px 0; }
#container .content .contentBody .newsDetailImageBox.vertical { text-align:center; }
#container .content .contentBody .newsDetailImageBox.horizontal { width:100%; text-align:center; }
#container .content .contentBody .newsDetailImageBox.horizontal img { display:block; margin-left:auto; margin-right:auto; max-width:100%;}
#container .content .contentBody .reply {
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    padding:20px;
    margin-top:-1px;
}
#container .content .contentBody .reply.expert {vertical-align:top; background-color:#fdf9e9;}
#container .content .contentBody .reply.expert .userImage{border:1px solid gray; display:inline-block; overflow:hidden; width:100px; height:100px;}
#container .content .contentBody .reply.expert .userImage img{width:100%;}
#container .content .contentBody .reply.expert .user{vertical-align:top; margin-left:15px; line-height:26px;}
#container .content .contentBody .reply.expert .user span{display:block; margin:0;}
#container .content .contentBody .reply.expert .user .date {font-weight:normal;}

#container .content .contentBody .reply.expert .expertCate {font-size:16px;}
#container .content .contentBody .reply.expert .expertName {margin-left:10px;}
#container .content .contentBody .reply.expert .email {margin-left:10px; color:brown;}
#container .content .contentBody .reply.expert .desc {font-weight:bold;}
#container .content .contentBody .reply.last {border-bottom:none;}
#container .content .contentBody .replyBox {padding-top:0; margin-top:30px; border-top:2px solid #d6d6d6; border-bottom:2px solid #d6d6d6;}
#container .content .contentBody .replyBox .replyBoxHeader {padding:8px 20px;}
#container .content .contentBody .replyBox .replyBoxHeader .replyCnt {color:firebrick; font-weight:bold;}
#container .content.community .contentBody .replyBox .reply .user {display:inline-block; font-size:13px; font-weight:bold; color:#333;}
#container .content .contentBody .replyBox .reply .date {display:inline-block; font-size:11px; color:#999; margin-left:10px;}
#container .content .contentBody .replyBox .reply .date::after {clear:both;}
#container .content .contentBody .replyBox .reply .desc {font-size:13px; margin-top:10px; line-height:20px; color:#666;}

#container .content .contentBody .replyBox .formNewReply {min-height:70px; padding:10px 20px; background-color:#f8f8f8;}

#container .content .contentBody .replyBox textarea.newReply {width:600px; height:66px; line-height:22px; resize:vertical;}
#container .content .contentBody .replyBox textarea.newReply::placeholder { text-align:left; }

#container .content .contentBody .replyBox .userInfo { display: block; margin-top:4px;}
#container .content .contentBody .replyBox .userInfo .name {width:140px; height:24px; margin-bottom:6px; text-align:center;}
#container .content .contentBody .replyBox .userInfo .pass {width:140px; height:24px; text-align:center;}

#container .content .contentBody .replyBox *::placeholder {text-align:center; color:#999; font-size:12px;}
#container .content .contentBody .replyBox .userInfo.logged .name {height:66px; color:gray;}
#container .content .contentBody .replyBox .userInfo.logged .pass {display:none;}

#container .content .contentBody .replyBox .btn.submitReply {
    border: 1px solid;
    display: inline-block; vertical-align: top;
    height: 100%; width: 87px;
    line-height: 70px;
    text-align: center;
    font-weight: bold;
    cursor:pointer;
    background-color:#fafafa;
    border-color:#a9a9a9;
    color:#000;
}
#container .content .contentBody .replyBox .btn.submitReply:hover {
}

/*******    Sublist     *******/
#container .content .contentPreNextList { padding: 30px 0;  margin-top:30px;}
#container .content .contentPreNextList .contentBox { }
#container .content .contentPreNextList .contentBox .header { font-weight:bold; font-size:20px; padding-bottom:40px; border-bottom:1px solid #ddd;}
#container .content .contentPreNextList .contentBox .header .cate { float:left; font-size:20px; color:firebrick;}
#container .content .contentPreNextList .contentBox .header .more { float:right; font-size:14px; color:black;}
#container .content .contentPreNextList .contentBox .contentList li {  
    position:relative;
    display:block;
    padding:0px 10px;
    margin:0;
    border-bottom:1px solid #ddd;
    font-size:14px;
}
#container .content .contentPreNextList .contentBox .contentList li .title{ float:left; width:600px; 
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#container .content .contentPreNextList .contentBox .contentList li .date { float:right; width:100px; text-align:right;}

#container .content .contentPreNextList .contentBox .contentList li a{
    display:inline-block;
    width: 100%; height: 100%;
    line-height: 50px;
    color:#888;
}
#container .content .contentPreNextList .contentBox .contentList li:hover,
#container .content .contentPreNextList .contentBox .contentList li.focus{  
    background-color:#f2f2f2;
}
#container .content .contentPreNextList .contentBox .contentList li:hover a {
    color:black;
}
#container .content .contentPreNextList .contentBox .contentList li.focus a:hover{
    cursor:default;
}
#container .content .contentPreNextList .contentBox .contentList li.focus span{  
    color:firebrick;
    font-weight:bold;
}

/*******    Sidebar    *******/
#sidebar.edu { width:300px; float:right; padding-left:29px; margin-bottom:10px; border-left:1px solid #d7d7d7; margin-left:-1px;}
#sidebar ul {list-style:none; padding:0}
#sidebar ul li {margin-bottom:30px;}




/******    COMMON - PAGING    ******/
/*
section#listpaging  {display:block; text-align:center;}
section#listpaging ul {display:inline-block;}
section#listpaging ul li {
    width: 33px;
    height: 33px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    margin: 3px;
    padding: 0;
    float:left;
}

section#listpaging ul li.active { background-color: transparent; border-color:firebrick; color:firebrick; font-weight:bold;}
section#listpaging ul li.dummy { border:unset;}
section#listpaging ul li.prev,
section#listpaging ul li.next { color:gray; font-size:25px; }
section#listpaging ul a li { transition:all 0.5s}
section#listpaging ul a li:hover { background-color:transparent; border-color:firebrick; color:firebrick; transition:all 0.5s}
*/



/****** temporary ******/
#container section { border:0px solid red; }
#container section .content { overflow:hidden;}
#container section#headline .content,
#container section#edu-info .content { background-color:unset }
#container section div { border:0px solid blue; }
.promo {background-color:aliceblue; background-color:transparent; border:0px solid red !important; overflow:hidden;}
/* temporary */
section#headline .headline-news .newsMain,
section#headline .headline-news .newsThumbList { border:0px solid red;}




/* for semantic ui - modal */
.ui.modal>.content  {box-sizing:border-box; }

.eduNewsList.eduColumn ul li .title {text-indent:8px;}