@charset "UTF-8";
/* layout system */
.col-list-container:after { display: table; content: ""; line-height: 0; clear: both; }
.col-list { float: left; }
.col-1-2 { width: 50%; }
.col-1-3 { width: 33.333333%; }
.col-1-4 { width: 25%; }
.col-1-5 { width: 20%; }
.col-1-6 { width: 16.666666%; }
.col-2-3 { width: 66.666666%; }
.col-3-4 { width: 75%; }
.col-4-5 { width: 80%; }

/* base layout */
html { height: 100%;}
body { font-size: 14px; font-family: 'Noto Sans KR', "Helvetica Neue", Helvetica, "돋움", "돋움체", Arial, sans-serif; line-height: 1.7; color: #666; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: none;letter-spacing: -0.3px; font-weight: 300;}
a {font-size: inherit; color: inherit; text-decoration: none; line-height: inherit; font-weight: inherit}
a:hover, a:focus {color: inherit;}

.wrap {padding: 0 2.0833333%;}
.container {width: 1200px; margin:0 auto; *zoom:1;}
.container:after {display: block; width: 0; height: 0; content: ''; clear: both;}
#contents {min-height: 600px}

/* 스킵 네비게이션 */
.skipNav-container a { display: block; width: 1px; height: 1px; overflow: hidden; margin-top: -1px; }
.skipNav-container a:focus, .skipNav-container a:active { width: 100%; height: auto; padding: 10px 0; text-align: center; }


/* ------------------------------------------------
** header / GNB
---------------------------------------------------- */
#header {position: relative;}
.head-top {height: 35px; line-height: 35px; border-bottom: 1px solid #e4e4e4;}
.head-util {text-align: right}
.head-util > a {position: relative; padding: 0 18px; line-height: 1; font-size: 13px; color: #858585;}
.head-util > a:before {position: absolute; top:5px; left: 0; width:1px; height: 12px; background: #ccc; content:'';}
.head-util > a:first-child:before {display: none}
#header h1 {position: absolute; left:5px; top:15px;}
.gnb-container {padding-left: 350px;  z-index: 11}
.gnb-main {text-align: right}
.gnb-main >li {float: left;}

.gnb-main >li >a {display: block; font-size: 17px; font-weight: 500; color: #000; padding: 30px 32px 30px 40px;}
.gnb-main >li.last>a {padding-right: 0;}
.gnb-main >li >a:hover {color: #1b7955;}

.gnb-sub {position: absolute; width:1200px; box-sizing:border-box; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); left:0; top:88px; background: #fff; padding: 20px 0 20px 10px;display: none; z-index: 12}

.gnb-sub .sub-menu {float: left;font-size: 13px;}
.gnb-sub .sub-menu > li {text-align: center}
.gnb-sub .sub-menu > li >a {display: inline-block; line-height: 2; padding: 0.2em 1.5em;}
.gnb-sub .sub-menu > li >a:hover {background: #2461bb; color: #fff; transition: all .3s ease ;}
.gnb-sub .sub-menu.is0 {width: 290px; margin-left: 50px; margin-bottom: -10px;}
.gnb-sub .sub-menu.is1 {width: 140px;}
.gnb-sub .sub-menu.is2 {width: 130px;}
.gnb-sub .sub-menu.is3 {width: 140px;}
.gnb-sub .sub-menu.is4 {width: 170px;}
.gnb-sub .sub-menu.is5 {width: 100px; margin-left: 30px;}
.gnb-sub .sub-menu.is6 {padding-left:10px;}
/* ------------------------------------------------
** subpage / sub-container: left +right(#content)
---------------------------------------------------- */
.sub-top-outer {}
.sub-top {height:220px; margin-bottom: 40px; background:#a7c4db url(../images/img-sub/bg-sub-top.jpg) center center no-repeat;}
.sub-top-txt {padding-top: 120px; color: #fff; text-align: center;}
.sub-top-txt h2 {display: inline-block; font-size: 32px; color: #12205d; text-shadow: 1px 1px 6px rgba(255, 255, 255, 0.7); line-height: 1; font-weight: 500;}
.sub-top .route {position: absolute; top:190px; right:0;color: #000; font-size: 14px;}
.sub-top .route img {vertical-align: middle}
.sub-top .route .gubun-h {padding: 0 0.5em;}
.sub-top .route strong {color: #000; font-weight: 300;}

.left-container {float: left; width: 218px;}
.right-container {float: right; width: 930px; min-height: 500px}
.sub-heading {text-align: center; margin-bottom: 30px;}

.sub-heading h3 {position: relative; display: inline-block; font-size: 30px; line-height: 1; color: #000; letter-spacing: 0.2px}
.sub-heading h3:before {position: absolute; left:-45px; top:50%; width: 30px; height: 2px; background: #444; content: '';}
.sub-heading h3:after {position: absolute; right:-45px; top:50%; width: 30px; height: 2px; background: #444; content: '';}


.sub-con {font-size: 16px; text-align: justify;}
.sub-con strong {font-weight: 500; color: #143a72; font-size: 18px;}

.tb-history td, .tb-history th {text-align: left; vertical-align: top; color: #344096; padding: 4px;}
.tb-history th.year {position: relative; text-align: center; font-size: 28px; font-weight: 600; background: url(../images/img-common/bg-line-v1.png); background-position: right 0; background-repeat: repeat-y; line-height: 1;}
.tb-history th.year:after {position: absolute; top:12px; right: -6px; width: 9px; height: 9px;  background: #fff; border: 2px solid #84a1ad; content:''; transform: rotate(45deg);}
.tb-history .day {text-align: center; font-size: 16px; color: #222; font-weight: 500;}
.sec-is1 {margin-bottom: 50px; padding-bottom: 30px; border-bottom: 1px solid #f1f1f1;}
.sec-is3 {margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #f1f1f1;}

.sub-link-site a {float: left; width: 33%; text-align: center; margin: 10px 0;}

/*정관 한자 많음 */
.font-sc {font-family: 'Noto Sans SC', 'Noto Sans KR', "Helvetica Neue", Helvetica, "돋움", "돋움체", Arial, sans-serif;}
.sec-is2{margin-bottom: 25px;}/* 규약 정의*/
.sec-is2 h2 {font-size: 20px; color: #333; margin-bottom: 5px; text-align: center; font-weight: 500;}
.sec-is2 h3 {font-size: 16px; color: #444; margin-bottom: 3px; font-weight: 500;}
.sec-is2 h4 {font-size: 14px; color: #333; font-weight: 500;}
/* 사진갤러리게시판  섬네일 리스트 */
.photo-list {margin-left: -39px;}
.photo-list > li {margin-left: 39px; float: left; position: relative; width: 284px; margin-bottom: 30px;}
.photo-list > li .img {position: relative; height: 180px; line-height: 160px;  box-sizing: border-box; border: 1px solid #eee; text-align: center; padding:0; }
.photo-list > li .img img {vertical-align: middle; max-height: 178px; width: auto; }
.photo-list > li .dim-over {position: absolute; width: 100%; height: 180px; background: rgba(0,0,0, 0.35); top:0; left:0; display: none}
.photo-list > li .dim-over span {position: absolute; top:50%; left:50%; font-size: 40px; color: #fff; margin-left: -30px; margin-top: -30px; width: 60px; height: 60px; line-height: 60px; text-align: center; background: rgba(0,0,0, 0.65); border-radius: 30px}
.photo-list > li >a:hover .dim-over {display: block;}
.photo-list .tit input[type=checkbox], .photo-list .tit h5 {display: inline-block; vertical-align: middle}
.photo-list .tit h5 {height: 30px; line-height: 30px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 250px;}
.photo-list > li .over-ut {position: absolute; top:10px; right: 10px; width: 40%; height: 60px; text-align: right}
.photo-list > li .over-ut>a {padding-left: 0.5em; position: relative;}
.photo-list > li .over-ut>a:hover .tooltip {display: block;}
.photo-view-container h3 {font-size: 20px; margin-bottom: 20px;}
.photo-view-container .photo {position: relative; margin-bottom: 15px; text-align: center}
.photo-body {padding: 1em 0.5em; margin-bottom: 15px; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}

.rule {font-size: 13px}
.rule h3 {font-size: 17px; color: #000; font-weight: 500;}
.rule h4 {font-size: 16px; color: #000; font-weight: 500;}
.rule h5 {font-size: 14px; color: #444; font-weight: 500;}
.rule h6 {font-size: 13px; color: #444; font-weight: 500;}
.rule h3 span {font-weight: 400; color: #666;}
.rule .list li,  .rule .row{padding-left: 18px;}
.rule .list li span.num,  .rule .row span.num {display: inline-block; margin-left: -14px; margin-right: 4px;}
.rule .exp {color: #7a7567; padding-left: 10px}

/* ------------------------------------------------
** left-container
---------------------------------------------------- */
.left-container {border: 1px solid #afc5f6; background: #f2f2f2 url(../images/img-sub/bg-bgleft.jpg) 0 0 no-repeat; height: 340px}
.lnb >li {}
.lnb >li > a {display: block;padding: 15px 0 15px 20px; border-bottom: 1px solid #d0ddf9;color: #222; font-size: 15px; font-weight: 500;}
.lnb >li > a.active, .lnb >li > a:hover {background: url(../images/img-sub/bg-left.jpg); color: #fff;  -webkit-transition: color 1s; transition: color .5s;}

/* ------------------------------------------------
** ADMIN
---------------------------------------------------- */
.ad-list {display: table; width: 100%; margin-bottom: 13px;}
.ad-list  .row {display: table-row;}
.ad-list  .cell {display: table-cell; width: 20%; border: 1px solid #ddd; padding: 0.7em 1em; border-left: 0;}
.ad-list  .cell:first-child {border-left: 1px solid #ddd; background: #f5f5f5; font-size: 16px; color: #333;}


/* ------------------------------------------------
** footer
---------------------------------------------------- */
#footer {background: #a5b1c3; padding: 30px 0; margin: 50px 2.08333333% 0 2.08333333%;}
#footer .foot-logo {float: left; width: 360px; padding-left: 10px;}
#footer .foot-cnt {position: relative; float: left;font-size: 13px; color: #424242;}
#footer .view-map {width: 95px; height: 24px; line-height: 24px; background: #828e9f; border: 1px solid #c3c9c9; color: #f0f0f0; padding:0; font-size: 13px;}
.to-top {position: fixed; z-index: 9999; right: 20px; bottom:20px;}

/* ------------------------------------------------
** page
---------------------------------------------------- */
.container {width: 1200px; margin: 0 auto;}

.container500 {width: 500px; margin: 0 auto;}
.container600 {width:600px;}
.container800 {width:800px; margin: 0 auto;}
.container1000 {width:1000px;}

.col-tb {display: table; width: 100%;}
.col-tb > .row {display: table-row;}
.col-tb >.row> .cell {display: table-cell; padding: 1em;}
.col-tb .cell.r-line {border-right: 1px solid #d2dbe3;}
.col-tb .cell.narrow {padding: 0.3em 1em;}



/* ------------------------------------------------
 ** 팝업창
 ------------------------------------------------*/
 .wrap-pop{}
 .wrap-pop > .p-heading {background:#4c4c4c;}
 .wrap-pop > .p-heading h2 {font-size: 17px; color: #fff; padding: 0.4em 1em;}
 .pop-container {padding: 1em;}
 .pop-container.body {min-height: 350px}
 .wrap-pop .btns {text-align: center; padding: 1em 0;}
 .pop-botttom {background: #000; padding-left: 1em; height: 25px; line-height: 25px; color: #fff; font-size: 12px}
 .login-form {padding: 20px 20px 0 20px;}
 .login-form .left {float: left; width: 70%;}
 .login-form .right {float: right; width: 26%;}
 .login-form .inset {padding-bottom: 0.8em;}
 .login-form .inset input {width: 100%; height: 36px}
 .login-form .btn-main {width: 100%; height: 82px; font-size: 18px; letter-spacing: 1px}


/* ------------------------------------------------
 ** sitemap, login,  login-adm: Modal layer
 ------------------------------------------------*/
 .map-layer {position: fixed; top:200px; left:50%; width:600px; margin-left: -300px; background: #fff; box-shadow: 1px 1px 4px  rgba(0, 0, 0, 0.25); z-index: 1000; display: none; padding: 30px;}
 .map-layer .close {position: absolute; top:10px; right:20px;}

 .login-layer {position: fixed; top:180px; left:50%; width:660px; height: 320px; margin-left: -330px; background: #fff url(../images/img-common/bg-login.jpg) 0 0 no-repeat; box-shadow: 1px 1px 4px  rgba(0, 0, 0, 0.25); z-index: 1000; box-sizing: border-box; padding: 26px 50px 0 280px;  display: none;}
 .login-layer .close {position: absolute; top:8px; right: 10px; z-index: 1001}
 .login-layer h2 {font-size: 28px; color: #344096; margin-bottom: 20px;}
 .login-layer h2 span {font-size: 24px; color: #999; font-weight: 300;}
 .login-layer input[type='text'], .login-layer input[type='password'] {border: 0; border-bottom: 1px solid #999; width: 100%}
 .login-layer .inset {margin-bottom: 20px;}
 .login-layer .btn-main {width: 100%; height: 38px; background: #344096; border-radius: 19px; font-size: 17px; font-weight: 400;}
 .login-layer .join-pw {padding-top: 20px; padding-right: 10px; font-size: 13px; color: #474747; text-align: right;}
 .login-layer .join-pw a {text-decoration: underline; display: inline-block; margin-left: 20px;}
 
 table.form-tb td {padding: 0.4em 0.4em 0.4em 1.2em; text-align: left}
 table.form-tb .btn-sub {width: 100%; height: 70px; font-size: 15px}
 .login-adm {position: absolute;top: -200px; right: 0; width: 460px; height: 240px; background: #fff; z-index: 1000; display: none; padding: 30px 20px; box-sizing: border-box;}
 .login-adm h3 {font-size: 24px; margin-bottom: 10px;}
 .tb-join tr>th {text-align: left; padding-left: 1.5em; background: #f7f7f7;}

 .search-box {text-align: center; margin-bottom: 20px;}
 .modal-fix-default.commentary {top: 150px;}
 


/* ------------------------------------------------------ 
 *	common style define
 ------------------------------------------------------ */
 .heading {position: relative; padding: 20px 0; border-bottom: 1px solid #ebebeb; margin-bottom: 35px;}
 .heading h3 {font-size: 24px; line-height: 1; color: #333;}
 .heading .right {position: absolute; top:20px; right: 0; padding-left: 20px; background: url(../images/img-sub/ico-rout.png) 0 4px no-repeat; font-size: 13px; color: #a6a5a6;}
 .heading .right.no-bg {background: none;}
 .heading .right span {padding:0 4px;}
 .title-is1 {position: relative; font-size: 20px; color: #333; font-weight: 500; padding-left: 20px; line-height: 1; margin-bottom: 20px;}
 .title-is1:before {position: absolute; top:7px; left: 0; width:14px; height: 4px; border-radius: 2px; background: #405351; content: '';}
 .title-is2 {font-size: 18px; color: #ed1c24;}

	/* tab style basic */
.tab-menu:after {display: table; content: ""; line-height: 0; clear: both;}
.tab-menu > li { float: left;text-align: center}
.tab-menu > li > a { display: block; box-sizing: border-box; background: #fff; border: 1px solid #344096; padding: 8px 0.2em; font-size: 16px; color: #474747; font-weight: 400;}
.tab-menu > li:first-child > a{ border-right: 0; }
.tab-menu > li > a.active, .tab-menu > li > a:hover { background: #344096; color: #fff; transition: all .8s ease ;}

.tab-menu.col2 > li {width: 50%;}
.tab-menu.col3 > li {width: 33.333333%;}
.tab-menu.col4 > li {width: 25%;}
.tab-menu.col5 > li {width: 20%;}

.tab-content {display: none;}
.tab-content.active {display: block;}
.tb {display: table;}
.tb>.rows {display: table-row;}
.tb>.rows>.cells {display: table-cell; vertical-align: top}

.error-box {padding: 1em; background: #ebebeb; color:#ed1c24;}
.success-box {padding: 1em; background: #ebebeb; color:#5195ce;}
.def-box {padding: 1em; background: #f2f2f2; border: 1px solid #ededed;}
.cnt-ml {padding-left: 1em}
.cnt-ml span.ml {display: inline-block; margin-left: -1em; width: 1em;}
.p-ml {padding-left: 3.5em;}
.p-ml .ml {display: inline-block; margin-left: -3.5em; color: #333; font-weight: 500;}


	/* common form style */
	.grp-form input, .grp-form button, .grp-form select {margin-right: 2px; vertical-align: middle;}
	.form-grp1 input[type="text"], .form-grp1 input[type="search"], .form-grp1 button, .form-grp1 select {height: 30px}
	.form-grp1 button {background: #b2b2b2; color: #fff; font-size: 13px;}
	.form-grp1 input[type="search"]+button {margin-left: -1px}

	.form-grp2 input[type="text"], .form-grp2 input[type="search"], .form-grp2 button, .form-grp2 select {height: 28px}
	.form-grp2 button {height: 28px}
	.form-grp2 input[type="search"]+button {margin-left: -1px}

	.cal-ui {display: inline-block;}
	.cal-ui input[type="text"] {width: 8em;}
	.cal-ui span {padding: 0 0.4em;}
	.cal-ui img {vertical-align: middle; padding-left: 4px}
	.addr-form > div {margin-bottom: 5px}
	.addr-form > div:last-child {margin-bottom: 0}
	.addr-form input[type="text"], .addr-form button {height: 28px}
	.addr-form button {background: #8f9195; color: #fff; font-size: 12px;}
	.tell-ui input {width: 4em; height: 28px; text-align: center}
	.tell-ui span {padding: 0 0.3em;}
	.mail-ui span {float: left; padding-right: 10px;}
	a.btn {display: inline-block; border: 1px solid #99a5b0; padding: 0 0.2em; background: #f9fcff; height: 24px; line-height: 24px; font-size: 12px; color: #444;    width: auto; height: auto;}
	mark.is1 {padding: 0 1em;}

.helper {position: relative; cursor: help;}
.helper .balloon {position: absolute;  top:1.5em; left: -40px; background: #fbfbfb; border: 1px solid #ccc; padding: 0.3em 0.5em; font-size: 12px; color: #585858; font-weight: normal; text-align: left; box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); display: none;}
.helper:hover .balloon {display: block;}
.gubun-h {padding: 0 0.5em; font-size: 12px}
.gubun {padding: 0 1em; font-size: 12px}
.gubun-w {padding: 0 1.5em; font-size: 12px}
.link-txt {text-decoration: underline; color: #6797cd;}
.att-ment-bg {background: #eee; color: red; padding: 4px 4px 4px 10px; font-size: 13px}
.no-data {padding: 2em 1em; /*border-top: 1px solid #eee; border-bottom: 1px solid #eee;*/ font-size: 16px; color:#aaa; text-align: center}
.file-down {display: inline-block; font-size: 13px; line-height: 1; padding: 0.3em 0.5em; border: 1px solid #ddd; color: #555fae;}
.letter-s1 {letter-spacing: 1px}
.txt-box {display: inline-block; padding: 0.4em 1em; border: 1px solid #ccc; background: #f2f2f2;}

.over-dim-layer {position: fixed; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); z-index: 999}
/* 모달디폴트-absolute 창 */
.modal-page-default { position: absolute; top: 150px; left: 50%; background: #fff; width: 500px; margin-left: -300px; box-sizing: border-box; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25); z-index: 1000; display: none; }
.modal-page-default .close { position: absolute; top: 5px; right: 5px; }
.modal-page-default.w700 { width: 700px; margin-left: -485px; top: 60px; }
.modal-page-default.w710 { width: 710px; margin-left: -355px; top: 60px; }
.modal-page-default.w1000 { width: 1000px; margin-left: -500px; top: 60px; }

/* 모달디폴트-fix 창 */
.modal-fix-default { position: fixed; top: 50%; left: 50%; background: #fff; width: 500px; margin-left: -250px; margin-top: -100px; box-sizing: border-box; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25); z-index: 1000; display: none; }
.modal-fix-default .close { position: absolute; top: 5px; right: 5px; }
.modal-fix-default.w500 { width: 500px; margin-left: -250px; }
.modal-fix-default.w600 { width: 600px; margin-left: -300px; }
.modal-fix-default.w700 { width: 700px; margin-left: -350px; }
.modal-fix-page-attend {position: fixed; width:600px; left:50%; top:0; margin-left: -300px; box-sizing: border-box; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25); z-index: 1000; display: none; }