@CHARSET "UTF-8";

#sub-wrap{
  position: relative;
  width: 1100px;
  margin: 0 auto;
}

#snb-wrap{
  width: 100%;
  border-bottom: 1px solid #dedede;
}

.snb-top{
  height: 134px;
}

.snb-top h1{
  font-family: 'Noto Serif CJK KR', serif;
  text-align: center;
  font-weight: 400;
  line-height: 146px;
  background: url(../img/common/h2.gif) center 34px no-repeat;
}

.snb-menu{
  width: 100%;
  height: 54px;
  border-top: 1px solid #dedede;
  position: relative;
}

.snb-menu ul{
  margin: 0 auto;
  width: 700px;
  padding-top: 12px;
}

.snb-menu li {
  font-family: 'Noto Sans CJK KR';
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  display: inline-block;
  display: table-cell;
  padding: 0 42px;
}

.snb-menu li a{
  font-family: 'Noto Sans CJK KR';
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  display: inline-block;
  display: table-cell;
  padding-bottom: 6px;
  color: #1b1b1b;
}

.snb-menu li a:hover{
  transition: 0.4s;
  color: #bb1d23;
}

.snb-menu li.on{
  border-bottom: 6px solid #bb1d23;
  color: #bb1d23;
  font-weight: 400;
}


/****sub-content****/

#sub-content{
  width: 100%;
  margin: 40px 0;
}

#sub-content h2{
  font-family: 'Noto Serif CJK KR', serif;
  text-align: left;
  font-weight: 400;
  line-height: 146px;
  background: url(../img/common/slash.png) left 34px no-repeat;
  display: inline-block;
}

#sub-content h3{
  font-family: 'Noto Sans CJK KR';
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
  padding: 10px 0;
}

#sub-content h4{
  font-family: 'Noto Sans CJK KR';
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  padding: 10px 0;
}

#sub-content p{
  font-family: 'Noto Sans CJK KR';
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  padding: 10px 0;
}

/****회원 문학관****/
#dm_ul{
  min-width: 300px;
  background-color: #fff;
  text-align: center;
}
.dropmenu ul ul{
  position: absolute;
  display: none;
  z-index: 999999;
}
.dropmenu ul ul li{
  display: block;
  background-color: #fff;
  color: white;
  font-family: 'Noto Sans CJK KR';
  z-index: 999999;
}
.dropmenu ul li{
  display: inline-block;
  border: #b9b9b9 solid 1px;
  font-family: 'Noto Sans CJK KR';
  z-index: 999999;
  background-color: #ffffff;
}
.dropmenu ul li a{
  display: block;
  width: 155px;
  color: #6f6f6f;
  line-height: 20px;
  padding: 14px 0;
  text-decoration: none;
  font-family: 'Noto Sans CJK KR';
  background-color: #ffffff;
  z-index: 999999;
}
.dropmenu ul li a:hover{
  background-color: #fff;
  color: red;
  background-color: #ffffff;
  z-index: 999999;
}

#member-left{
  width: 770px;
  padding-right: 40px;
  border-right: 1px solid #eeeeee;
  display: inline-block;
}

#member-right{
  width: 330px;
  padding-left: 40px;
  display: inline-block;
  position: absolute;
  top: 380px;
}
.member-content{
  margin-bottom: 60px;
}
.member-content p, span, h4, h5, h6 {
    font-size: 16px !important;
    line-height: 28px;
  }

.member-content h3{
  font-family: 'Noto Serif CJK KR', serif;
  text-align: left;
  font-weight: 400;
  line-height: 80px!important;
  background: url(../img/common/h2.gif) left 12px no-repeat;
}

.member-content dl{
  padding: 10px 0;
}

.member-content dt{
  font-family: 'Noto Sans CJK KR';
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  padding: 4px 0;
}

.member-content dd{
  font-family: 'Noto Sans CJK KR';
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
}

.arrow-home{
  top: 6px;
  margin-left: 20px;
  vertical-align: text-bottom;
}

/************연혁*************/
.greeting-left{
  display: inline-block;
  width: 727px;
  padding-right: 40px;
}
.greeting-right{
  display: inline-block;
  width: 333px;
  vertical-align: top;
  padding-top: 158px;
}

/***************************************************연혁**************************************************/

.history {
	position:relative;
  font-family: 'Noto Sans CJK KR';
}
.history dl {
	position:relative;
	padding-bottom:22px;
  font-family: 'Noto Sans CJK KR';
}
.history dl::before {
	display:inline-block;
	content:'';
	width:100px;
	height:44px;
	position:absolute;
}
.history dl dt {
	font-size:25px;
	font-weight:bold;
	padding-top:8px;
	margin-bottom:12px;
	color:#c70b50;
  font-family: 'Noto Sans CJK KR';
}
.history dl dd {
	font-size:16px;
	line-height:28px;
	color:#000;
	position:relative;
  font-family: 'Noto Sans CJK KR';
}
.history dl dd span {
	display:inline-block;
	width:60px;
	font-size:20px;
	color:#c70b50;
	position:absolute;
  font-family: 'Noto Sans CJK KR';
}

.history dl:nth-child(odd) {
	text-align:right;
	width:550px;
	padding-right:98px;
	border-right:1px solid #dddddd;
  font-family: 'Noto Sans CJK KR';
}
.history dl:nth-child(odd) dd {
	padding-right:60px;
  font-family: 'Noto Sans CJK KR';
}
.history dl:nth-child(odd) dd span {
	right:0;
  font-family: 'Noto Sans CJK KR';
}
.history dl:nth-child(odd)::before {
	background:url(../img/sub/history_bg03.png) 0 0 no-repeat;
	right:-20px;
}
.history dl:nth-child(1)::before {
	background:url(../img/sub/history_bg01.png) 0 0 no-repeat;
}
.history dl:nth-child(even) {
	width:550px;
	left:550px;
	padding-left:98px;
	border-left:1px solid #dddddd;
}
.history dl:nth-child(even)::before {
	background:url(../img/sub/history_bg02.png) 0 0 no-repeat;
	left:-20px;
}
.history dl:nth-child(even) dd {
	padding-left:64px;
  font-family: 'Noto Sans CJK KR';

}
.history dl:nth-child(even) dd span {
	left:0;
	text-align:left;
  font-family: 'Noto Sans CJK KR';
}
.history dl:nth-child(odd):last-child {
	border-right:none !important;
	padding-right:100px;
	padding-bottom:0;
}
.history dl:nth-child(even):last-child {
	border-left:none !important;
	padding-bottom:0;
	padding-left:100px;
}
.history dl:nth-child(odd):last-child::before {
	right:-20px;
}
.history dl:nth-child(even):last-child::before {
	left:-22px;
}

/****오시는길****/
.subway-wrap{
  display: inline-block;
  padding: 20px 0;
  border-bottom: 1px solid #dedede;
  width: 100%;
}
.subway-img{
  display: inline-block;
  margin-right: 20px;
}
.subway-text{
  display: inline-block;
  vertical-align: text-bottom;
}


/*서브 테이블*/
.table			{float:left; width:100%; margin:10px 0; font:normal 14px/1.8 'Noto Serif CJK KR'; color:#222}
.table p:before				{content:"·"; position:relative; left:-3px}
.table td.le				{text-align:center; background:#f9f9f9}
.table td a					{color:blue; text-decoration:underline}
.table th,.table td			{border-right:1px #ddd solid; border-bottom: 1px #ddd solid; padding:10px;text-align:center}
.table th.end,.table td.end	{border-right:none; text-align:left;}
.table th.end_title {border-right:none; text-align:center;}

/*입력폼*/
.form	{float:left; width:100%; margin:30px 0}
.form table	{float:left; width:100%; border-top:1px #888 solid; margin-bottom:40px; background: #ffffff;}
.form th	{width:70px; font:normal 16px/2 'Noto Serif CJK KR'; color: #000000; background:#f9f9f9; text-align:center;}
.form th span		{font:normal 18px/2 'Noto Serif CJK KR'; color: #000000; margin-left:3px}
.form th,.form td	{padding:15px; border-bottom:1px #ededed solid;}
.form td b			{font: normal 14px/1.4 'Noto Serif CJK KR'}
.form input	{height: 25px; border: 1px solid #ccc; border-radius: 3px; background: #fafafa; padding: 3px 5px; margin: 2px; font: normal 14px/20px 'Noto Sans CJK KR'; color: #555;}
.form select	{height:33px; border: 1px solid #ccc; border-radius: 3px; }

/*서브탭*/
.sub_tab {float:left; width: 200px; height: 100px; font: normal 17px 'Noto Serif CJK KR'; color: #4b4b4b; text-align:center; margin: 25px 25px; border: 1px #ddd solid;}
.sub_tab li:hover {color: #bb1d23; border: 1px #bb1d23 solid; height: 65px;}
.sub_tab li {float:left; width: 200px; height: 100px; text-align:center; padding-top: 35px; }

/*로그인*/
.container_page	{float:left; width:100%; color: #888; padding-bottom: 40px;}
.login_wrap					{width:311px; margin:0 auto;}
.login_wrap .input_box		{float:left; width:311px;}
.login_wrap .input_box input{width:311px; height:35px; margin-bottom: 20px;}
.login_wrap .btn			{float:left;}
.login_wrap .btn button		{width:311px; border:none; border-radius: 2px; background:#bb1d23; cursor:pointer; color:#fff; font:normal 18px 'Noto Sans CJK KR'; position:relative; margin-bottom: 20px;}
.login_wrap	p	{float:left; width:311px; text-align:center; color:#888; border-top:1px #ddd dotted; margin-top:20px; padding-top:10px}
.login_wrap	p a	{color:#bb1d23; font:normal 13px/1.8 'Noto Sans CJK KR';}

/*아이디,비밀번호 찾기*/
.find_wrap		{float:left; width:940px; padding-bottom:100px; position:relative; left:130px}
.find_wrap h2	{float:left; width:408px; margin-bottom:25px; padding:5px 0 20px 0; border-bottom:1px #ccc solid}
.find_box		{width:508px; height: 630px;  margin:0 10px; padding:20px; border:1px #ddd solid; font-size: 13px; display:inline-block;}
.find_box .btn	{margin:20px 0!important}
.find_box span	{width: 55px; display:inline-block; font-size: 13px; }
.find_box form	{display: inline-block;}
.find_box input	{margin:6px 0!important; width: 100px;}
.find_box select{margin:6px 0!important; position:relative; left:-3px}
.find_box_check {padding-bottom: 30px;}

/*탈퇴*/
.del_wrap		{width:940px; padding-bottom:100px; position:relative; left:130px; text-align: center;}
.del_wrap h2	{margin-bottom:25px; padding:5px 0 20px 0; border-bottom:1px #ccc solid}
.del_box		{margin:0 10px; padding:20px; border:1px #ddd solid; font-size: 13px;}
.del_box .btn	{margin:20px 0!important}
.del_box span	{font-size: 13px; }
.del_box_check {padding-bottom: 30px;}

/*회원가입*/
.box.join	{float:left; width:100%; height:200px; overflow-y:scroll; border:1px #ddd solid; padding:20px; background:#f9f9f9; font:normal 13px/1.8 'malgun gothic'; color:#666}
.process_join_wrap {width:1100px; margin:0 auto;}
.process.join		{float:left; width:100%; margin:30px auto; }
.process.join1	{float:left; width:100%; margin:16px auto; }
.process.join1 h2	{font:normal 22px/28px 'Noto Serif CJK KR';}
.process.join ul {float:left; width:1100px; margin:0 auto; text-align:center;}
.process.join li	{float:left; width:366px; border:1px #ddd solid; text-align:center; padding:3px 0; }
.process.join li.on	{width:33%; background:#bb1d23; color:#fff; border:none; padding:4px 0}
.process.join li span	{font:normal 24px/2 'Noto Sans CJK KR'; margin-right:10px; color:#bb1d23}
.process.join li.on span{color:#fff}

.join_select_wrap {width:1100px; margin:0 auto;}
.join_select_wrap_2 {padding-left: 150px;}
.join_select {position:relative; font:normal 24px/2 'Noto Sans CJK KR'; color:#4b4b4b; width:350px; height: 100px; border:1px #ccc solid ; text-align:center; display: inline-block; margin: auto 50px; background-color: #fff; padding-top: 50px}
.join_select a {position:relative; font:normal 24px/2 'Noto Sans CJK KR'; color:#4b4b4b; text-align:center;}
.join_select a:hover	{ cursor: pointer; font:normal 24px/2 'Noto Sans CJK KR'; color:#bb1d23; }
.join_select a:link 	{text-decoration:none;}

.check_box			{float:left; font:normal 16px "Noto Sans CJK KR"}
.check_box input	{margin-right:5px}
.check_box.all		{width:1100px; padding-top:30px;}
.join input	{height: 34px; border: 1px solid #ccc; border-radius: 3px; background: #fafafa; padding: 3px 5px; margin: 2px; font: normal 14px/20px 'Noto Sans CJK KR'; color: #555;}
.join .btn		{float:none; width:100px; height:33px; margin-left:5px; background:#535a65; color:#fff; border:none; font:normal 13px/1.8 'malgun gothic'; cursor:pointer}
.join select	{height:33px; border: 1px solid #ccc; border-radius: 3px; }

.join-btn{width:152px; margin: 0 auto;}
.ok{background:#0f59e4; }
.ok button:hover{background:#063184; }
.cancle{background:#888; }
.cancle button:hover{background:#333333; }


/*스토리텔링 페이지*/
.story-wrap {position: relative; padding: 40px 0;}
.story-wrap .year {}
.story-wrap .year ul {text-align: center;}
.story-wrap .year ul li {display: inline-block; font:normal 40px/1.8 'Noto Sans CJK KR'; color: #9a9a9a; margin: 0 20px;}
.story-wrap .year ul li a {font:normal 40px/1.8 'Noto Sans CJK KR';}
.story-wrap .year ul li.on{color: #bb1d23;}
.story-wrap .year ul li.on::after {content: ''; width: 20px; height: 14px; display: block; position: relative; background: url('../img/sub/story-year-arrow.png'); left: 34px;}

.story-wrap .local {position: relative; }
.story-wrap .local ul {text-align: center; border-bottom: 1px solid #dedede;}
.story-wrap .local ul li {display: inline-block; font:normal 18px/1.8 'Noto Sans CJK KR'; color: #4b4b4b; margin: 10px 30px;}
.story-wrap .local ul li a { font:normal 18px/1.8 'Noto Sans CJK KR'; }
.story-wrap .local ul li.on{color: #bb1d23;}

.story-wrap .local dl {text-align: center; padding: 10px;}
.story-wrap .local dl dt, dd {display: inline-block; font-family: 'Noto Sans CJK KR'; color: #4b4b4b;}
.story-wrap .local dl dt {font-size: 18px; border-bottom: 1px solid #dedede;}
.story-wrap .local dl dt.on {color: #bb1d23;}
.story-wrap .local dl dd {font-size: 16px; margin: 0 10px;}
.story-wrap .local dl dd a { font:normal 18px/1.8 'Noto Sans CJK KR';}
.story-wrap .local dl dd.on {color: #bb1d23; }

.story-wrap .story-content-wrap {padding: 20px 80px;}
.story-wrap .story-content-wrap .center {font:normal 32px/1.8 'Noto Serif CJK KR';}
.story-wrap .story-contents {padding: 20px 0;}
.story-wrap .story-contents dl {padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #dedede;}
.story-wrap .story-contents dt { font:normal 16px/1.8 'Noto Sans CJK KR'; display: block;}
.story-wrap .story-contents dt span { font:normal 16px/1.8 'Noto Sans CJK KR'; border-radius: 20px; background-color: #e0e0e0; padding: 2px 10px; color: #4b4b4b;}
.story-wrap .story-contents .title {font:bold 24px/1.8 'Noto Sans CJK KR'; padding: 8px 0 20px;}
.story-wrap .story-contents dd {font:normal 16px/30px 'Noto Sans CJK KR'; display: block;}

.story-wrap .story-contents-details dl {padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #dedede; text-align: center;}
.story-wrap .story-contents-details dt { font:normal 16px/1.8 'Noto Sans CJK KR'; text-align: center; display: block;}
.story-wrap .story-contents-details dt span { font:normal 16px/1.8 'Noto Sans CJK KR'; border-radius: 20px; background-color: #e0e0e0; padding: 2px 10px; color: #4b4b4b;}
.story-wrap .story-contents-details .title {font:bold 28px/1.8 'Noto Sans CJK KR'; padding: 16px 0 60px; text-align: center;}
.story-wrap .story-contents-details dd {font:normal 16px/30px 'Noto Sans CJK KR'; text-align: justify; display: block;}
.story-wrap .story-contents-details p {font-weight: 400 !important;}