@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@font-face {/*여기어때잘난체*/
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


body {width:100%; max-width:900px; margin:0 auto; font-family: 'Noto Sans KR', sans-serif; font-weight:400; color:#222;}
* {padding:0; margin:0;}
img {vertical-align:top; border:0; width: 100%;}
li {list-style:none;}
a {text-decoration:none; color:#222;}
input {vertical-align:middle;}
select {vertical-align:middle;}

.clearfix {content:''; display:block; clear:both; height:0;}
.red {color: red}
.u_red {text-decoration-color: red;}

/*헤더*/
header {width:100%; box-sizing: border-box; box-shadow: 0 5px 10px 0px #dcdcdc;}
header img {width: 100%;}


/*메인*/
main {margin-top:10px;}
section {box-sizing:border-box;}
aside {box-sizing:border-box;}


.category { width: 100%; }
.category > ul {display: flex;}
.category > ul > li {width: 20%; height: 44px; line-height: 44px; text-align: center;}
.category > ul > li > a {display: block; width: 100%; height: 100%; color: #; box-sizing: border-box;}
.category > ul > li > a.ca_click {font-weight: 600; border-bottom: 4px solid #c12a1a; color: #c12a1a; }
		
.headline {width: 95%; padding: 25px 0; margin: 0 auto;}
.headline > h1 { font-size: 26px; line-height: 34px; color: #000; font-weight: 600; margin-bottom: 10px;}
.headline > .sub_title {font-size: 16.5px; line-height: 25px;  color: #555; box-sizing: border-box; height: 50px; font-weight: 500; letter-spacing: -1px;}
.headline > .sub_title > p {border-left: 3px solid #333; padding: 0 0 0 10px;}



/*기사본문*/
.article {width:100%; padding: ; box-sizing:border-box; letter-spacing:-0.5px;}
.article p.imgbox {width:100%; margin:7% 0 0 0; box-sizing:border-box;}
.article p.imgbox > span {color: #a6a6a6; text-align: center; margin: 0; font-size: 14px; padding: 2% 0 0; display: block;}
.article p.txtbox {width:100%; margin:7% 0 0 0; box-sizing:border-box; font-size:18px; line-height:30px; padding: 0 3%;}





/*dbform*/
.dbbox { margin: 0 auto 40px; text-align: center; padding: 0 15px 15px; border: 5px solid #242823; border-top: 0px; }
.dbbox3 { margin-top: 50px; background: #0e183c;  margin: 40px auto 0; }
input[type=tel] {width: 26% !important;}
			.telbox {width: 80%; display: inline-block;}
input[type=text], input[type=tel], select { font-size: 20px; border: 1px solid #000; margin: 0px; background-color: #fff; color: #888; height: 35px; padding: 0 0 0 10px; -webkit-appearance: none; }
textarea { resize: none; -webkit-appearance: none; }
input::placeholder { color: #cccccc; }
textarea::placeholder { color: #ccc; font-size: 12px; }
.dbform td { color: #000; font-size: 14px; }
.agree { font-size: 12px; font-weight: 400; text-align: center; color: #000; }
.bt0 { border-top: 0px !important; }
.mt4 { margin-top: 4px !important; }
.h30 { height: 46px !important; }
.checkbox { float: left; margin-top: 3px !important; }
.label { font-size: 12px; color: #aaa; }
.dbtxt { width: 80%; max-width: 300px; display: block; }
.db_top { width: 100%; max-width: 530px; margin: 0 auto; display: block; }
.db_s { width: 100%; max-width: 65px; margin: 25px auto 0; }
.db_arrow { width: 100%; max-width: 711px; margin: 0px auto 0; display: block; padding: 0 10px 10px; }
.dbform { width: 90%; max-width: 450px; margin: 0 auto; font-size: 20px; text-align: left; padding-top: 15px; }
.db_bt { width: 100%; max-width: 450px; margin: 0 auto; margin-top: 12px; margin-bottom: 10px; display: block; }
.dbbottom { padding-bottom: 40px; }
.dbtxt1 { color: #fff; position: absolute; left: 0px; }
.inf_tit { width: 16%; font-size: 0.7em; display: inline-block; }
			.mt10 {margin: 2% 0 0 0;}
/*time*/
.userCounter { font-size: 1.2em; line-height: 1.3;  background: #361206; text-align: center; padding:7px 5px; letter-spacing: -0.05em; position:relative; z-index:999;}
.userCounter > ul > li {font-size: 24px;}
.datebg { display: inline-block; color:#ffe829; font-weight: bold;}
.datebg2{ display: inline-block; color:#fff; font-weight: 400;}
.date2::after, .date4::after{content:':'; padding-left:7px;}


/*comment*/
.bold { font-weight: bold; }
.comment { padding: 0px; margin: 0 auto; max-width: 700px; }
.comment .top-line-title .tit { color: #000; font-weight: bold; font-size: 22px; padding-top: 5px; display: block; float: left; }
.comment .top-line-title .red { color: #ed232b; }
.comment .line { color: #333; padding: 25px 10px 0; font-size: 17px; line-height: 25px; border-bottom: 1px solid #ededed; }
.comment .nickname { color: #000; font-size: 17px; vertical-align: top; color: #26459b; font-weight: 500; padding-top: 10px; }
.comment .bestWrap { height: 14px; }
.comment .best { width: 29px; vertical-align: top; }
.comment .cmt-contents { padding: 15px 0px 20px; }
.comment .cmt-contents span { font-size: 17px; color: #333; line-height: 25px; }
.top-line { font-size: 14px; font-weight: normal; color: #777; vertical-align: top; border-top: 1px solid #a9a9a9; margin: 10px 0 0; }
.top-line .active { border-bottom: 1px solid #f4f4f4; margin-right: 6px; }
.top-line span { color: #222; font-weight: bold; font-size: 18px; border-top: 1px solid #f7f7f7; border-bottom: 1px solid #d2d2d2; display: block; float: left; width: calc(50% - 3px); text-align: center; height: 45px; padding-top: 8px; }
.top-line3 { font-size: 14px; color: #000; font-weight: bold; border-bottom: 1px solid #f1f1f1; padding-bottom: 15px; }
.post-area { position: relative; }
.comment .post-like { position: absolute; right: 0px; top: 0px; font-size: 0px; }
.comment .like { display: inline-block; vertical-align: top; padding-top: 0px; margin-right: 4px; width: 12px; margin-top: 2px; position: absolute; left: 15px; }
.comment .like2 { display: inline-block; vertical-align: top; padding-top: 0px; margin-right: 4px; width: 12px; margin-top: 2px; position: absolute; left: 15px; }
.comment .like_num { font-size: 16px; color: #035382; line-height: 16px; }
.comment .like_num.red10 { color: #ed232b; }
.comment .post-like-box { display: inline-block; border: 1px solid #b6b6b6; background: #fbfbfb; padding-top: 9px; padding-right: 15px; width: 60px; height: ; text-align: right; position: relative; }
.comment .post-like-box:nth-child(1) { margin-right: 7px; }
.comment .comment-btn { float: right; font-size: 20px; width: 110px; height: 42px; color: #0000ee; background: #f4f4f4; font-weight: bold; text-align: center; border: 1px solid #afafaf; border-radius: 10px; padding-top: 6px; }
.comment .comment-reply { color: #000; font-size: 16px; font-weight: normal; margin-bottom: 20px; width: 87px; height: 32px; border: 1px solid #b6b6b6; background: #fbfbfb; padding-top: 5px; text-align: center; }
.comment .comment-reply span { color: #b6b6b6; }
.comment .comment-more { padding: 20px 0 40px; font-size: 20px; font-weight: bold; color: #000; text-align: right; }
.comment .comment-more img { width: 8px; margin-left: 5px; }



@media screen and (min-width:575px) and (max-width:600px) {

}

@media screen and (min-width:566px) and (max-width:574px) {
	
	.headline > h1 {font-size:30px; line-height:38px;}
}

@media screen and (min-width:476px) and (max-width:565px) {
	
	.headline > h1 {font-size:30px; line-height:38px;}
	
}

@media screen and (min-width:452px) and (max-width:475px) {
	#pop > div {position:relative; height:70px; padding:0;}
	#pop > div > img {width:220px; position:absolute; bottom:0; left:-30px;}
	#pop > div > span {font-size:18px; margin-left:200px;}
	nav > .gnb > ul > li > a {margin-left:30px;}
	
	.headline > h1 {font-size:28px; line-height:36px;}
	.headline > p {margin:17px auto 0; padding-left:7px; font-size:18px; line-height:28px; letter-spacing:-1px;}
	.headline > div {margin-top:17px;}
	

}

@media screen and (min-width:410px) and (max-width:451px) {
	
	.headline > h1 {font-size:28px; line-height:36px;}
	.headline > p {margin:17px auto 0; padding-left:7px; font-size:18px; line-height:28px; letter-spacing:-1px;}
	.headline > div {margin-top:17px;}
	

}

@media screen and (min-width:360px) and (max-width:409px) {

	
	.headline > h1 {font-size:27px; line-height:34px;}
	.headline > p {margin:15px auto 0; padding-left:7px; font-size:16px; line-height:26px; letter-spacing:-1px;}
	.headline > div {margin-top:15px; height:50px;}
	
	.article > .img-box {padding:20px 0 0;}
	.article > .txt-box {padding:20px 3% 0; font-size:18px; line-height:26px;}
	

}

@media screen and (min-width:328px) and (max-width:359px) {

	
	.headline > h1 {font-size:26px; line-height:32px;}
	.headline > p {margin:15px auto 0; padding-left:7px; font-size:17px; line-height:26px; letter-spacing:-1px;}
	.headline > div {margin-top:15px; height:40px;}
	.headline > div > div {height:20px;}
	.headline > div > .time {font-size:14px;}
	.headline > div > .sns-icon > a > img {width:20px;}
	
	.article > .img-box {padding:20px 0 0;}
	.article > .txt-box {padding:20px 3% 0; font-size:18px; line-height:26px;}
	

}

@media screen and (min-width:300px) and (max-width:327px) {

	.headline > h1 {font-size:26px; line-height:32px;}
	.headline > p {margin:15px auto 0; padding-left:7px; font-size:17px; line-height:26px; letter-spacing:-1px;}
	.headline > div {margin-top:15px; height:40px;}
	.headline > div > div {height:20px;}
	.headline > div > .time {font-size:14px;}
	.headline > div > .sns-icon > a > img {width:20px;}
	
	.article > .img-box {padding:20px 0 0;}
	.article > .txt-box {padding:20px 3% 0; font-size:18px; line-height:26px;}
	

}