@charset "utf-8";



.wrapper { width: 100%; max-width: 1600px; margin: 0 auto; position: relative; }

/* skip navi */
#skip { width:100%; margin:0 auto; position:relative;}
#skip ul {position:absolute; z-index:999;}
#skip ul a {float:left; height:1px; width:1px; margin-bottom:-1px; overflow:hidden; text-align:center; white-space:nowrap; font-size:0.688em; display: block;}
#skip ul a:focus, #accessibility a:active {top:10px; height:auto; width:1080px; padding:10px 0; margin:0 auto; font-weight:bold; background:#000; color:#fff;}


#header { width: 100%; display: flex; justify-content: space-between; box-sizing: border-box;  height: 112px; }
#header h1#logo { width: 330px; padding: 10px 0; }
#header h1#logo a { display: inline-block; margin: 0 auto; overflow: hidden; }

#header > .wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}

/* nav#gnb { width: calc(100% - 400px); } */
nav#gnb { width: calc(100% - 330px); } 
nav#gnb ul.wrapper { display: grid; grid-template-columns: repeat(9, 1fr); justify-items: center; align-items: center; height: 112px; } 
nav#gnb ul.wrapper > li { width: 100%; position: relative; box-sizing: border-box; height: 112px; display: flex; align-items: center; justify-content: center; } 
/* nav#gnb ul.wrapper > li:hover::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; display: block; height: 5px; background: #7f3c8c; } */
nav#gnb ul.wrapper > li > a { font-family: 'yg-jalnan'; display: block; text-align: center; padding: 49px 10px; box-sizing: border-box; width: 100%; font-size: 1.25em; line-height: 1; } 
nav#gnb ul.wrapper > li:hover > a { color:#7f3c8c; }

nav#gnb .subGnb { display: none; padding: 20px 0; box-sizing: border-box; position: absolute; top: 112px; left: 0; width: 100%; z-index: 9999; background: #7f3c8c;  }
nav#gnb .subGnb li { text-align: center; line-height: 2.2;  }
nav#gnb .subGnb li a { display: block; font-family: 'yg-jalnan'; font-size: 1.1em; color: #fff; }
nav#gnb .subGnb li a:hover { color: #b33258; font-weight: 500; }




#header .gnb_m_open { position:absolute; width:1px; height:1px; margin:0; padding:0; background:none; font-size:0px; color:transparent; line-height:0; right:9999px; top:-9999px; overflow:hidden; }

#all_menu { display:none; }

.container { padding: 00px 0 40px; }

#footer #btmGnb { padding: 12px 0; background: #939598; text-align: center; }
#footer #btmGnb .wrapper > ul li { display: inline-block; }
#footer #btmGnb .wrapper > ul li a { font-size: 0.875em; color: #fff; }
#footer #btmGnb .wrapper > ul li:last-child::after { display: none; }
#footer #btmGnb .wrapper > ul li::after { content: '|'; font-size: 0.875em; margin: 0 19px; color: #999; vertical-align: baseline; }

#footer .addBox .wrapper { padding: 15px 0; font-size: 0.875em; line-height: 1.9; text-align: center;  }
#footer address span { padding-left: 15px;}










/* 메인 */
.mainCon { background: #fdece4; padding: 40px 0; }


.mainTop { display: flex; justify-content: space-between;}
.mainTop .mainVisual { max-width: 1000px; width: 70%; text-align: center; }
.mainTop .mainVisual img { width: 100%; }
.mainTop .mainVisual img.mobileVisual { display: none; }

.mainTop .banners { width: calc(30% - 40px);}
.mainTop .banners a { display: block; background-color: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 20px; box-sizing: border-box; margin-bottom: 20px; }
.mainTop .banners h3 { font-size: 1.25em; font-weight: 600; margin-bottom: 10px;}
.mainTop .banners span { font-weight: 300;}

.mainTop .banners a:first-child h3 { color: #f39200;}
.mainTop .banners a:nth-child(2) h3 { color: #87bd15;}
.mainTop .banners a:nth-child(3) h3 { color: #009fe3;}
.mainTop .banners a:last-child h3 { color: #953f95;}







/* .mainCon .wrapper .mainLeft { width: 55%; }

#mainVisual figure { width: 100%; background: #fff; box-shadow: 10px 10px 25px #99173e;  }
#mainVisual figure img { width: 100%;  }
#mainVisual figure iframe { width: 100%; height: 400px;}

#mainVisual a { display: block; background: #fff; box-sizing: border-box; padding: 7px 10px; font-size: 0.9em; text-align: center;  }
#mainVisual a span { display: block;  background: #99173e; color: #fff; padding: 3px 7px; word-break: keep-all; width: 100px; margin: 4px auto 0; }

#mainVisual section { position: absolute; right: 0; top: 50px; width: 426px; }
#mainVisual section p { text-align: center; color: #fff; font-size: 1.65em; font-weight: 600; margin-top: 10px; letter-spacing: 0;}
#mainVisual section ul { box-sizing: border-box; padding: 10px; background: rgba(255,255,255,0.8); margin-top: 10px; }
#mainVisual section ul li { font-weight: 500; margin-bottom: 7px;}
#mainVisual section ul li::before { content: '-'; display: inline-block; margin-right: 5px;}
#mainVisual section ul li:last-child { margin:0;}


#mainBan { display: flex; justify-content: space-between; position: relative; width:100%;  flex-wrap: wrap; margin-top: 20px; }
#mainBan li { width: 49%; border: 5px solid #99173e; background: #fff; box-sizing: border-box;  position: relative; margin: 0 0 10px; box-shadow: 10px 10px 25px #99173e; }
#mainBan li a { height: 100%; display: block; padding: 20px 20px 60px; box-sizing: border-box; }
#mainBan li a { background: url('../img/mainIcon01.png') no-repeat right 15px bottom 15px; }
#mainBan li:nth-child(2) a { background-image: url('../img/mainIcon02.png'); }
#mainBan li:nth-child(3) a { background-image: url('../img/mainIcon03.png'); }
#mainBan li:nth-child(4) a { background-image: url('../img/mainIcon04.png'); }
#mainBan li p { color: #99173e; display: inline-block; background: linear-gradient(to top, #ffe400 50%, transparent 50%); font-size: 1.125em; font-weight: 500; padding: 0 5px; margin-bottom: 10px; }
#mainBan li span { display: block; font-size: 0.875em; }

.mainRight { width: 40%; }
.mainRight figure { text-align: left; margin: 0 0 10px; }
.mainRight .frmDate { padding: 9px 10px 5px; box-sizing: border-box; border: 5px solid #ffe400; color: #fff; font-size: 1.6em; text-align: center; box-shadow: 10px 10px 25px #99173e; width: 91%;  }
 */
