/* 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');

* {margin: 0; padding: 0; font-family: 'Noto Sans KR', sans-serif; color: #111;}
li {list-style: none;}
a {text-decoration: none; color: #000;}
body * {box-sizing: border-box;}
img {max-width: 100%; height: auto;}

/* img width 640px 안먹게 아주경제 */
#captionBox {width: auto!important; text-align: center;}
.p_caption {font-size: 16px; padding: 10px 10px 0 10px;}

/* float */
.clear::after {clear: both; display: block; content: '';}
.fl {float: left;}
.fr {float: right;}

/* layout */

/* 전체 가로 넓이 */
.wrap {max-width: 640px; margin: 0 auto; position: relative; overflow-x: hidden;}

/* 타이틀 */
/* 헤더 배경색 */
@keyframes backcolor {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.title-wrap {height: 60px; line-height: 60px; position: relative;}
.scroll-title {font-size: 28px;font-weight: bold; display: none; max-width: 640px; text-align: center; height: 60px; width: 100%;}
.title {font-size: 20px; font-weight: bold; display: inline-block; margin-left: 20px;}
.icon-wrap > div { width: 60px; height: 60px; text-align: center; cursor: pointer; line-height: 60px;}

/* 로고 */
.logo {height: 30px; line-height: 60px; margin-top: 18px; transition: all 0.4s;}

/* 네비게이션 */
nav {height: 50px; border-bottom: 1px solid #eee; line-height: 50px;
  /* background-image: linear-gradient(45deg, #73beff, #d2eaff, #c1c7ff, #adecff, #c1c7ff); */
  background-image: linear-gradient(45deg, #1f138b, #3b95e2);
  /* background-size: 600% 600%; animation: backcolor 15s ease infinite; */
}
#gnb {display: flex; justify-content: space-around; font-weight: bold; text-align: center;}
#gnb > li {height: 50px;}
.sec_a > a {color: #fff; display: block;}

/* 아이콘 */
.icon-star {background-image: url(../images/icon-star.png); background-repeat: no-repeat; background-size: cover;}
.icon-wrap > div > i {color: #ccc; font-size: 24px;}
.icon-bars {padding-top: 2px;}
.icon-close {display: none;}

/*로딩*/
#autoScroll {}
#autoScroll .next {width: 100%; }
#autoScroll .next img {display: block; width: 80px;  margin: 0 auto}

/* sly플러그인 */
/* .frame { width: 100%; height: 50px; padding: 0; } .frame = nav에 주기
.frame .slidee { height: 100%;} .slidee = ul에 주기
.frame .slidee li { float: left; margin: 0 5px 0 0; padding: 0; width: 120px;} */


/* 선택되어있는 카테고리 */
.sec_a.on > a {color: #f2e635;}
.sec_a.on > a::after {display: block; content: ''; border-bottom: 3px solid #f2e635; position: relative; bottom: 3px;}
.sec_a.on.change > a::after {display: block; content: ''; border-bottom: 3px solid #ff8d1d; position: relative; bottom: 3px;}

/* 모바일 네비게이션 */
#m-gnb {
  display: flex; justify-content: space-around; flex-wrap: wrap; font-weight: bold;
  width: 100%; position: absolute; z-index: 10; right: 0; top: 60px;
  background-image: linear-gradient(45deg, #1f138b, #3b95e2); display: none;
}
#m-gnb > li {padding: 10px;}
#m-gnb > li > a {line-height: 2; color: #fff;}
#m-gnb > li > a::after {display: none;}


/* 공지사항 */
.notice {
  height: 50px; background-color: #dff2fa; max-width: 600px; margin: 10px auto; line-height: 50px; padding: 0 20px;
  border-radius: 4px;
}
.n-con > strong {padding-right: 20px;}
.n-close {cursor: pointer;}


/* 컨텐츠 */
.content-wrap {margin: 10px;}
.content {height: 90px; border-bottom: 1px solid #eee; position: relative;}
.txt {padding: 10px; width: 68%; height: 80px; position: relative;}
.txt > strong {
  overflow: hidden; text-overflow: ellipsis;display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical
}
.content > p {font-size: 12px; color: #aaa; position: absolute; bottom: 8px; left: 10px;}
.img {width: 120px; height: 80px; position: absolute; right: 14px; top: 5px;}
.img > img {width: 120px; height: 80px;}
.close {position: absolute; right: 0; top: 0px; font-size: 24px; color: #aaa;}

.tab-con {display: none;}
.show {display: block;}


/******************* index2 *******************/

/* 기사 타이틀 */
.news-wrap {max-width: 600px; margin: 0 auto; position: relative;border-bottom: 1px solid #eee; padding-bottom: 20px;}
.news-title {position: relative; padding: 20px 0 0 0;}
.main-title {font-size: 24px; font-weight: bold; padding: 0 10px 30px; letter-spacing: -1px;}
.main-title > strong {color: #f00;}

/* bottom-wrap */
.bottom-wrap {line-height: 34px; padding: 0 10px;}
.sub-title {color: #aaa;}
/* 기사 아이콘 */
.option > ul > li > a > span,
.option > ul > li > a > strong {color: #aaa;}
.option > ul > li {
  width: 34px; height: 34px; border: 1px solid #eee; text-align: center; line-height: 34px; margin-left: -1px;
  background-size: cover; background-repeat: no-repeat; cursor: pointer;
}
.option > ul > li:nth-child(2) {background-image: url(../images/icon.jpg); background-position: 1px 0;}
.option > ul > li:last-child {background-image: url(../images/icon.jpg); background-position: -32px -1px;}
.option > ul > li:first-child > a > span {font-size: 10px;}
.option > ul > li > a {color: #aaa;}


/* 기사 본문 */
.news-con {padding: 30px 20px; line-height: 1.6; font-size: 18px;}
.news-img {max-width: 600px; text-align: center;}
.news-img > img {max-width: 100%; height: auto;}
.img-title {font-size: 14px; position: relative; left: 30px; color: #aaa;}


/* 댓글 */
.news-comment {padding: 20px;}
.comment-count {font-size: 18px; font-weight: bold; margin-bottom: 20px;}
.comment-wrap { border-bottom: 1px solid #aaa; font-size: 14px; padding-top: 20px; position: relative;}
.comment-wrap:last-child { border-bottom: none; padding-bottom: 80px;}
.user-id {font-weight: bold;}
.user-id > span {font-weight: normal; padding-left: 30px; color: #aaa;}
.comment {padding: 20px 0;}
.comment-option {position: absolute; right: 0;}
.comment-option > div {width: 4px; height: 4px; background-color: #aaa; border-radius: 2px; margin-bottom: 3px;}

/* 댓글 입력창 */
/* .comment-form {
  height: 80px; background-color: white; border-top: 1px solid #aaa; max-width: 600px; width: 100%;
  position: fixed; bottom: 0;
}
.comment-form > .fl > input[type=text] {
  max-width: 480px; width: 100%; position: relative; height: 50px; margin-top: 14px;
  border-radius: 25px; border: 1px solid #aaa; outline: none; padding: 0 20px;
  box-sizing : border-box;
}
.comment-form > .fr > input[type=submit] {
  border: none; outline: none; padding: 0 20px; background-color: transparent;
  color: #227aff; font-size: 18px; font-weight: bold; top: 26px; right: 8px; cursor: pointer;
}

.cmt_l { width:80%;}

.cmt_r { width:20%; padding-top: 4%;}
*/


/* 뉴스기사 하단 10개 리스트 */
.n-list {padding: 0 30px; margin: 30px 0;}
.n-list > ul > li {height: 30px; line-height: 30px;}
.n-list > ul > li > a::before {
  content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 2px; background-color: #111;
  position: relative; top: -5px; margin-right: 10px;
}
.n-list > ul > li > a {
  overflow: hidden; text-overflow: ellipsis;display: -webkit-box;
  -webkit-line-clamp: 1; -webkit-box-orient: vertical
}


/****************** 모달창 ******************/
.modal-wrap {
  height: 100%; max-width: 640px; width: 100%; background-color: rgba(0, 0, 0, 0.4); position: fixed; top: 60px;
  left: 50%; transform: translateX(-50%); display: none;
}
.modal {
  max-width: 580px; width: 100%; background-color: #fff; height: 85%; position: relative; 
  left: 50%; transform: translateX(-50%); margin-top: 40px; border-radius: 30px;
  overflow-y: scroll; -ms-overflow-style: none;
}
/* 스크롤은 숨기고 기능은 살리기 */
.modal::-webkit-scrollbar {display: none;}
.m-title {
  width: 100%; height: 60px; background-image: linear-gradient(45deg, #1f138b, #3b95e2);
  line-height: 60px; font-size: 18px; text-align: center; color: white;
  border-radius: 20px 20px 0 0; 
}
.modal > ul {display: flex; justify-content: space-around; flex-wrap: wrap; margin-top: 20px;}
.modal > ul > li {
  width: 130px; height: 130px; margin: 10px;
  border-radius: 65px; text-align: center; line-height: 130px;
  border: 4px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(120deg, #1f138b,#fff, #3b95e2);
  background-origin: border-box;
  background-clip: content-box, border-box;
  margin: 10px;
}
/* 언론사로고 */
.l-img {
  display: block; border-radius: 65px; 
  background-repeat: no-repeat; background-size: 110px; text-align: center;
}
.no1 {background-image: url(../images/logo/8.png); background-position: 5px 6px;}
.no2 {background-image: url(../images/logo/14.png); background-position: 5px 6px;}
.no3 {background-image: url(../images/logo/46.png); background-position: 6px 6px;}
.no4 {background-image: url(../images/logo/53.png); background-position: 5px 8px;}
.no5 {background-image: url(../images/logo/76.png); background-position: 5px 6px;}
.no6 {background-image: url(../images/logo/77.png); background-position: 5px 6px;}
.no7 {background-image: url(../images/logo/87.png); background-position: 5px 6px;}
.no8 {background-image: url(../images/logo/112.png); background-position: 5px 6px;}
.no9 {background-image: url(../images/logo/545.png); background-position: 5px 6px;}
.no10 {background-image: url(../images/logo/669.png); background-position: 10px 6px;}
.no11 {background-image: url(../images/logo/860.png); background-position: 5px 6px;}
.l-img > span {opacity: 0; text-indent: -9999px;}
.button-bottom {font-size: 50px; color: #ccc; text-align: center; transform: rotate(90deg); margin-top: 20px;}


/* IE10+ 말줄임표 */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .txt, .n-list>ul>li>a {overflow: hidden; text-overflow: ellipsis; /*    white-space:nowrap;*/
    white-space: normal; line-height: 1.2; height: 1.8em; text-align: left; word-wrap: break-word;
    display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; }
 }

/* 450px 언론사 3열 */
 @media all and (max-width:450px) {
  .modal > ul > li {width: 100px; height: 100px;}
  .l-img {background-size: 80px; height: 92px;}
 }
 /* 미디어쿼리 420px (기사타이틀과 이미지가 겹치기 시작하는 시점) */
 @media all and (max-width:400px) {
  .txt {width: 58%;}
  .content > p > span {display: none;}
  nav {font-size: 14px;}
 }

/* 미디어쿼리 380px */
 @media all and (max-width:380px) {
   .title-wrap {/* text-align: center;  */height: 60px;}
   /* .title {margin-left: 0;} */
   .icon-wrap > div {width: 40px; margin-right: 8px;}
   .icon-star {background-image: url(../images/icon-starS.png); background-size: cover; background-position: 0 2px;}
   .icon-wrap > div > i {font-size: 24px;}
   .icon-wrap {position: absolute; text-align: center; right: 0; top: 0;}
   .nav {height: 300px;}
   /* 화면 작아지면 모바일 바 등장 + 기존 아이콘 사라짐 */
   /* .icon-bar {display: block;} */
   /* .notice {font-size: 13px;} */
   /* .logo {height: 30px; margin-top: 16px;} */
	 
	 
   
 }

/*  미디어쿼리 360px 언론사 3열 */
 @media all and (max-width:360px) {
  .modal > ul > li {width: 90px; height: 90px;}
  .l-img {background-size: 70px; height: 82px;}
 }