
/************ Font ************/
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); /* 일반 텍스트 */
@import url(http://fonts.googleapis.com/earlyaccess/hanna.css); /* 헤더 텍스트 */
@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css); /* 메뉴 텍스트 */
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css); /* 아이템 텍스트 */
@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css); /* FONT */
@import url(plugin/icon/font-awesome.min.css);
@import url(plugin/icon/ionicons.min.css);

.enFont { font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; }
.fontT1 { font-family: 'Hanna' , serif; }
.fontT2 { font-family: 'Jeju Gothic', serif; }
.fontT3 { font-family: 'Nanum Gothic Coding', serif; }

body { scrollbar-face-color: #f0f0f0; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-3dlight-color: #ffffff;scrollbar-arrow-color: #454545; scrollbar-track-color: #ffffff;scrollbar-darkshadow-color: #ffffff; } 
/*********** Base ***********/
.dotted { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.clear { clear:both; display:block; }
.center { text-align:center; vertical-align:middle; }
.bold { font-weight:bold; }
.pNoMargin { margin-bottom:0px; margin-top:0px; }
.divider { width:100%; height:30px; background:transparent; margin-bottom:30px; clear:both; }
html, body { height:100%; }
body { background:#ffffff; display:flex; min-height:100vh; flex-direction:column; }
main { flex: 1 0 auto; font-size:1em; line-height:1.4em; overflow-x:hidden; }
header, footer { max-height:100%; }
footer { display:table; }
h2 { word-break:break-all; }
/** @media only screen and (max-width:993px) { main .container { width:100%; } } **/

/*********** Side Menu *********/
.mHeader { width:100%; height:120px; text-align:center; box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);}
.mHeader img { width:180px; margin-top:34px; }

/************ countNum **********/
.count-num { display:inline-block; margin-left:5px; background-color:#999999; padding:0 4px; border-radius:4px; color:#fff !important; font-size:11px; font-weight:bold; line-height:15px; text-align:center; }

/*********** Nav ************/
@media only screen and (min-width: 993px) { nav { height:90px; } .hTop { height:90px; } nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i { line-height:90px; height: 90px; }}
@media only screen and (max-width:992px) { nav .brand-logo { left:100px; }}

nav { background-color:#ffffff; z-index:1000; }
#pLogo { width:160px; height:100%;}
#mLogo { width:100px;  height:100%; }

@media only screen and (min-width:601px) and (max-width:992px) { #mLogo { margin-top:20px }}
@media only screen and (max-width:600px) { #mLogo { margin-top:16px; } }
@media only screen and (min-width:992px) { #pLogo  { margin-top:25px; } }

.headerNav { position:relative; padding-left:20%; }
.headerNav #topnav {}
#mMenu li.bold a { font-weight:bold; color:#505050; }
#mMenu ul.collapsible-accordion li.bold ul li a { font-weight:normal; color:#5d5d5d; }
#mMenu li.choice > a, #mMenu ul.collapsible-accordion li.bold ul li.choice > a { color:white; background:#7e308e; }

#topnav{padding:0; color:#454545; clear:both; word-wrap:normal; white-space:nowrap; box-shadow:none; height:auto; max-height:100%; z-index:1001; }
#topnav ul{margin:0; padding:0; list-style:none; font-size:12px; max-height:100%; }
#topnav li{position:relative; display:block; float:left; margin:0 0 0 20px; padding:0;}
#topnav li:first-child{}
#topnav li a{display:block; line-height:90px;}
#topnav a{color:#454545; font-weight:bold;}
#topnav li.active > a, #topnav a:hover{ color:#7e308e; background:transparent ; }
#topnav li a.drop, #topnav li.active a.drop {padding-left:15px; background-image:url("../img/icon/dropdown_side.gif"); background-position:5px center; background-repeat:no-repeat;}

nav ul li.active { background-color:transparent; }

#mMenu li a span.drop { padding-left:15px; background-image:url("../img/icon/select.png"); background-position:10px center; background-size:15px 4.5px; background-repeat:no-repeat;}


.subNav { overflow:hidden; position:fixed; top:91px; left:0; width:100%; height:0px; background:#fff; z-index:500; -webkit-transition: -webkit-transform 0.3s ease-in-out, height 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out, height 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out, height 0.3s ease-in-out; transition: transform 0.3s ease-in-out, height 0.3s ease-in-out; }
#topnav .subNav ul li { float:none; }
#topnav ul li:hover > .subNav { top:90px; height:120px; border-top:2px solid #7e308e;}

.subNav:hover + li:hover { color:#7e308e; background:transparent ; }
#subNav .snBox { height:80px; margin:20px 20px; }
#subNav .snHeader { font-size:18px; border-right:1px solid #7e308e; font-weight:bold; line-height:normal; }
#subNav .snNav{ line-height:20px; cursor:default; }
#subNav .snNav ul, #subNav .snNav ul li { margin:0; }
#subNav .snNav ul li a{ line-height:20px; font-weight:normal; cursor:pointer; font-size:14px; color:#696969; }
#subNav .snNav ul li a:hover { text-decoration:line; color:#7e308e; }

@media only screen and (min-width:992px) { .navbar-fixed { height:90px; } }
/************** iconNav *******************/
.iconNav { position:absolute; right:0px; }
.iconNav .iconBox { display:inline-block; color:#8c8c8c;  margin-left:20px; line-height:20px; text-align:center; cursor:pointer; }
.iconNav .iconBox span { font-size:28px; }
.iconNav .iconBox .iconTxt { font-size:13px; }
.iconNav .iconBox:hover, .iconNav .iconBox.active { color:#7e308e; }
@media only screen and (min-width:601px) and (max-width:992px) { .iconNav .iconBox  { margin-top:18px }}
@media only screen and (max-width:600px) { .iconNav .iconBox { margin-top:14px; } }
@media only screen and (min-width:992px) { .iconNav .iconBox  { margin-top:21px; } }

/************** searchBox ****************/
#searchBox { position:fixed; cursor:default; top:90px; right:0px; height:0px; width:100%; z-index:400; overflow:hidden; }
#searchBox.active { height:50px; }
.searchForm { max-width:900px; width:100%; margin:0 auto; background:rgba(0,0,0,0.4); height:50px; }
.searchForm > .searchTxt { float:left; text-align:center; font-weight:bold; width:15%; color:#ffffff; line-height:50px; font-size:16px; }
.searchForm > .searchIn { float:left; width:70%; background:#fff; border:0px; box-shadow:none; padding-left:10px; padding-right:10px; margin-bottom:0px; height:34px; margin-top:8px; }
.searchForm > .searchBtn { float:right; width:10%; background:#7e308e; color:white; font-size:26px; border:0; height:50px; }
@media only screen and (min-width:601px) and (max-width:992px) { #searchBox { top:64px; } } 
@media only screen and (max-width:600px) { #searchBox { top:56px; } }
@media only screen and (max-width:992px) { .searchForm > .searchTxt{ display:none; } .searchForm > .searchIn { padding-left:2%; padding-right:2%; margin-left:5%; margin-right:5%; width:71%; } .searchForm > .searchBtn { width:15%; }}

/************* langBox **************/
#langBox { position:fixed; cursor:default; text-align:right; top:90px; right:0px; height:0px; width:100%; margin:0 auto; z-index:300; overflow:hidden; }
#langBox.active { height:auto; }
.langForm { width:100%; max-width:1280px; margin:0 auto; }
.langForm ul { margin:0; padding:0; height:100% !important; float:right; width:200px; background:rgba(0,0,0,0.4);}
.langForm ul li { float:none; cursor:default; height:40px; line-height:40px; color:#fff; text-align:center; }
.langForm ul li:hover { background:rgba(0,0,0,0.2); }
.langForm ul li a { color:#fff; }
@media only screen and (min-width:601px) and (max-width:992px) { #langBox { top:64px; }}
@media only screen and (max-width:600px) { #langBox { top:56px; } }

/************** main ***************/
@media only screen and (min-width:993px) { .container { width:90%; } }
.divider { margin-top:20px; margin-bottom:20px; }

/************* item ***********/
.item .title {  padding-left:10px; font-family:"CaviarDreamsBold", Arial, Helvetica; color:#454545; width:100%; height:50px; line-height:50px; font-size:1.5em; }
.item .title span { float:right; cursor:pointer; line-height:50px; font-size:1em; color:#454545; padding-right:10px; }
.item .title span:hover { color:#898989; }
.item .content { width:100%; margin-top:20px; margin-bottom:20px; margin-left:0px; margin-right:0px; }

/************ Gallery **********/
.box { float: left; position: relative;  width: 25%; padding-bottom: 20%; }
@media only screen and (max-width : 650px) { .box { width: 50%; padding-bottom: 50%; } }
@media only screen and (max-width : 1100px) and (min-width : 651px) { .box { width: 33.3%; padding-bottom: 33.3%; }}

.boxInner { position: absolute; left: 10px; right: 10px; top: 10px; bottom: 10px; overflow: hidden; }
.boxInner img { width: 100%; height: 100%; }
.boxInner .titleBox { position: absolute; bottom: 0; left: 0; right: 0;  margin-bottom: 0px; background: #000; background: rgba(0, 0, 0, 0.5); color: #FFF; padding: 10px; text-align: center; font-size:12px; }

/*********** BOARD ********/
.board { width:96%; margin:0 auto; margin-top:10px; }
.board li { position:relative; width:100%; border-bottom:1px solid #e9e9e9; height:30px; line-height:30px; }
.board li div.title { padding-left:20px; font-size:14px; width:70%; float:left; line-height:30px; height:30px; }
.board li:before { content:''; position:absolute; background:url('../img/icon/icon-commLeft.png') 0px 0px no-repeat; background-size:10px 8px; width:10px; height:8px; top:11px; left:0px;  }
.board li div.date { font-size:13px; width:26%; float:right; color:#898989; text-align:right; }

/********* Right Gallery *********/
.container .eBox { position:relative; width:100%; border:1px solid #d8d8d8; margin-left:0px; margin-right:0px; overflow:hidden; }
.rBox { float:left; position: relative;  width: 30%; padding-bottom: 30%; }
.rBox .boxInner { top:0px; left:0px; right:0px; bottom:0px; }
.rTitle { position: absolute; width:60%; top:50%; left:34%; margin-top:-10px; font-size:12px; line-height:20px; color:#898989; }


/********* sideNav ***********/
.sideNav { position:relative; margin:0; padding:0; margin-top:-80px; z-index:999; }
.sideNav li { width:100%; padding:15px 10px; letter-spacing:-1px; font-size:1em; padding-left:14px; border-left:1px solid #e9e9e9; border-right:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; }
.sideNav li a { color:#616161; }
.sideNav li.active a, .sideNav li a:hover { color:#ee6e73; }
.sideNav li.header { margin:0; padding-left:14px; width:100%; height:80px; color:#fff; font-size:1.4em; line-height:70px; background:rgba(0,0,0, 0.6); font-weight:bold; border:0px;}


/******** subHeader *********/
.subHeader { margin-top:20px; height:100px; width:100%; position:relative; border-bottom:2px solid #ee6e73; }
.subHeader .title { position:absolute; bottom:10px; left:20px; font-size:1.8em; color:#646464; } 
.subHeader .thum { position:absolute; top:5px; left:20px; font-size:13px; }
.thum, .thum a { color:#8e8e8e; } 
.thum span.active { color: #ee6e73; } 

/******* subContent *********/
.subContent { padding:5% 5%; width:100%; line-height:2em; color:#6e6e6e; padding-top:30px; }


/******** footer *********/
footer { background: #232323; font-size:12px; color:#c3c3c3; width:100%; }
footer .container { padding-top:30px; padding-bottom:30px; margin-bottom:0px; }
footer .addr { width:100%; }
footer .addr ul { margin:0; }
footer .addr li { display:inline-block; }
footer .sTxt { color:#454545; font-weight:bold; padding-left:5px; padding-right:5px; }
footer .fLogo { position:relative; margin-left:5px;  width:100%: } 
@media only screen and (max-width:993px) { footer .fLogo { margin-bottom:30px; } footer .fLogo img { margin-left:10px; } }


/******** mainHeader ********/
.mainHeader { position:relative; height:120px; margin-top:20px; }
.mainHeader > .container { border-bottom:1px solid #e9e9e9; }
.mainHeader .title { font-size:30px; line-height:70px; }
.mainHeader .title span { border-left:2px solid #7e308e; height:30px;  }
ol.breadcrumb { font-size:12px; line-height:30px; background:none; text-transform:uppercase; list-style:none; margin:0; padding:0; text-align:right;}
.breadcrumb > li { padding: 0 10px 0 0; display:inline-block; }
.breadcrumb > li > a { color:#8c8c8c; }
.breadcrumb > .active { color:#0f1923; }
.breadcrumb > li + li::before { content: ""; width: 12px; height: 9px; padding: 0 10px; display: inline-block; background: url('../img/icon/breadcrumb-arrow-right.png') no-repeat;}
.breadcrumb:before { content:""; }

/******** mainItem *******/
main .old { width:100%; background:#ffffff; height:auto; display:block; overflow:auto; overflow-x:hidden; }
main .even { width:100%; background:#f3f3f3;  height:auto; display:block; overflow:auto; overflow-x:hidden; }
main .old > .container { margin-top:50px; margin-bottom:50px; clear:both; text-align:center; }
main .even > .container { margin-top:50px; margin-bottom:50px; clear:both; text-align:center; }
main .old h2, main .even h2 { font-size:24px; font-weight:bold; }
main .old p, main .even p { color:#565656; text-align:left; line-height:1.5em;}

/******** copyright ********/
.copyright { text-align:right; }
@media only screen and (max-width:993px) { .copyright { text-align:center; } }