@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.4/dist/web/static/pretendard.css");
@import url("./fonts.css");
@import url("./normalize.css");
@import url("./reset.css");
@import url("./fontello.css");

/* 숨김 콘텐츠 */
.sr-only, legend {  /*레전드 안보이게*/
  /* 접근성 마크업을 하면서 css 스타일 또한 중요한데 텍스트를 숨김처리하는 동시에 스크린리더기에서만 읽게 하도록 하는 방법 중 
  clip속성을 이용하여 스타일링 한 방법. */
  /*display: none;으로 숨기면 리더기가 못읽음*/
  position: absolute;
  /* top: -998px; 음수값을 이용해 화면에서 날림. 문제: 리더기가 읽을 때 탑좌표 이동을 시도해서 스크롤을 맨 위로 올려버림*/
  /* width, height 0으로 하면 컨텐츠가 존재하지 않는다고 판단해서 안읽음 */
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: polygon(0 0, 0 0, 0 0);
}
/* 기본 스타일 */
*, *::before, *::after {
  /* box-sizing의 초기값이 inherit이 아니고 컨텐트 박스이기 때문에 자식 요소인 가상요소 선택자도 박스 사이징 보더 박스로 줘야한다 */
  box-sizing: border-box;
}
/* 링크 스타일 */
a {
  color: inherit; /*body의 컬러를 캐스캐이딩*/
  text-decoration: none;
}
/* 본문 스타일 */
html {
  /* 아래에서 rem으로 쓰기 편하게 하려고 */
  font-size: 10px; /*가급적 16*/
}
body {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-weight: 400;
  background: url(./images/bg_flower.png) no-repeat 50% 0, #ccc linear-gradient(to bottom, #ccc 0%, #eee 50%, #fff 60%, #fff 100%); /*배경*/
  color: #181818;
  font-size: 1.4rem;
}

/* 스킵 내비게이션 */

.skip-nav {
  position: absolute;
  width: 100%;
  text-align: center; /*텍스트 가운데 정렬*/
  padding: 4px 0;
  transform: translateY(-110%); /*포커스하기 전에는 위로 올려서 안보이게*/
  background: #000;
  color: #fff;
  z-index: 10; /*맨 위로 올려줌*/
}
.skip-nav span {
  display: inline-block;
  padding: 8px;
  border: 2px solid #00f;
  border-radius: 4px;
}
.skip-nav:focus { /*a태그의 아웃라인 사라짐*/
  outline: 0;
  transform: none;  /*윈위치*/
}

/* 레이아웃 */
.header, .visual, .main, .slogan, .footer-inner {
  width: 940px;  /*  940px로 똑같이 맞춰줌 */
  margin: 0 auto; /* 가운데 위치 */
}
/* 헤더 */
.header {
  background: #fff;
  position: relative; /* 로고 앱솔루트하기 위해서 */
  padding: 8px 30px;  /* 상하좌우 여백 마련해줌 */
  border-radius: 0 0 15px 15px;
}
/* 로고 */
.logo {
  position: absolute;
  /* 가장 가까운 부모요소 중에서 스태틱이 아닌 .header 기준으로 */
  top: 50px;  
  left: 65px;
  /* z-index: 1; */
}

/* 멤버링크 */
.member {
  text-align: right; /* 우측정렬 */
  transform: translateX(8px); /* 우측으로 좀 땡김 */
}
.member li {
  display: inline-block;  /*float나 flex로도 가로정렬할 수 있지만 인라인 블록으로도 할 수 있다.*/
  text-transform: uppercase;  /*상속되는 속성*/
}
.member a {
  display: inline-block;  /* 패딩을 주기 위해서 인라인 블록 */
  padding: 8px;
}
/* 메인메뉴 */
.navigation {
  /* 서브메뉴가 앱솔루트라서 떠있기 때문에 밑에 공간을 확보 */
  padding-bottom: 30px; 
}
.menu {
  background: #d16527 linear-gradient(to bottom,#edad2d 0%,#d16527 45%,#d16527 60%,#edad2d 100%); 
  padding-left: 232px;  /* 로고 공간 확보 */
  display: flow-root; /*플로트 문제 해결*/
  height: 47px; /*안바뀌는 레이아웃이라서 고정해줌.*/
  border-top: 2px solid #000;
  border-radius: 0 0 5px 5px;
}
.menu-item {
  position: relative; /*서브 메뉴 앱솔루트 기준*/
  float: left;  /*이번에는 플로트로 가로 정렬*/
}
.menu-button { /*클릭시 다른 곳으로 이동하는게 아니고 아래 하위태그가 나옴 -> a태그 말고 버튼*/
  line-height: 45px; /*가운데 처럼 보이게함 라인하이트 트릭/ 47(menu높이)-2(보더)=45*/
  border: 0;  /*기본 버튼에 디폴트로 보더가 있음*/
  padding: 0 21px;  /*좌우 패딩*/
  background: transparent; /*배경 투명*/
  border-left: 2px solid #fff;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;  /*그림자로 테두리 표현*/
}

.menu-item.is-active .menu-button{  /*활성화된 메뉴아이템의 버튼 폰트색*/
  color: #ff0;
}
.menu-item.is-active .menu-button::after { /*활성화된 메뉴아이템의 메뉴 밑줄*/
  /* 보더바텀이 아니고 가상요소 선택자로 만들음 */
  content: "";
  display: block;
  background: #000;
  height: 2px;
}

.menu-item:nth-child(-n+3) .sub-menu {  /*처음부터 3번째까지*/
  left: 0; /*좌로밀착*/
}
.menu-item:nth-child(n+4) .sub-menu { /*4번째부터 끝까지*/
  right: 0; /*우로밀착*/
}
.sub-menu {
  position: absolute; /* .menu-item이 기준*/
  display: none;  /*기본적으로 안보이는 상태*/
  top: 47px;  /*메뉴 아래로 빠져나옴*/
  white-space: nowrap; /* 줄바꿈하지마/ 부모 요소의 크기를 벗어나서 줄바꿈되는 것을 없앰 / 그리고 앱솔루트기 때문에 크기 마음대로 조절해도 부모요소에 영향을 안미침 */
}
.sub-menu li {
  display: inline-block; /*가로정렬*/
  /* 인라인블록 공백문자생김. 근데 어차피 밑에서 더 벌릴거라 상관 없음. 공백문자 없애는 테크닉도 있음 */
}
.sub-menu a {
  display: inline-block; /*크기조절 위해서*/
  padding: 8px 10px;
  margin-right: 10px;
}
.sub-menu a::before {
  /* 폰텔로 css에서 카피함 */
  content: '\f192';
  font-family: 'fontello';
  display: inline-block;
  width: 1em;
  margin-right: .2em; 
}
.sub-menu a:hover::before, .sub-menu a:focus::before {
  /* 폰텔로 css에서 카피함 / 호버했을 때나 탭으로 포커스했을 때 이모티콘 변경*/
  content: '\e800';
}

.menu-item.is-active .sub-menu  {
  /* 부모가 액티브되면 보이게함 */
  display: block;
}


/* 비주얼 */
@keyframes moveEffect {
  0%{
    font-size: 12px;
    color: rgba(0, 0, 0, 0);
    /* padding-top: 0;
    padding-left: 0; 리플로우에 영향을 줌*/
    /* top: 0;
    left: 0;  리플로우에 영향을 줌*/
    transform: translate(0, 0); /*없어도 동작함*/
  }
  100%{
    font-size: 24px;
    color: rgba(0, 0, 0, 1);
    /* padding-top: 75px;
    padding-left: 400px; 리플로우에 영향을 줌*/
    /* top: 75px;
    left: 400px; 리플로우에 영향을 줌*/
    transform: translate(400px, 75px);
  }
}

@keyframes fadeEffect {
  0% {opacity: 1;}  /*보였다 안보이기*/
  100% {opacity: 0;}
}
.visual {
  height: 120px;  /*높이 고정*/
  position: relative; /*가상요소들 앱솔루트 기준잡기 위해서*/
}
.visual::before, .visual::after {
  content: '';
  position: absolute; /*기준은 .visual*/
  /*visual에 꽉차게*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  /* animation-name: fadeEffect;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-direction: alternate; */
  animation: fadeEffect 2000ms infinite alternate; /*애니메이션 숏컷*/
}

.visual::before{ 
  /* 멀티 백그라운드 */
  background-image: url(./images/ani_flower_01.png) , url(./images/ani_flower_02.png);
  background-position: 0 -10px , 670px 0;
}

.visual::after{ 
  /* 멀티 백그라운드 */
  background-image: url(./images/ani_flower_03.png) , url(./images/ani_flower_04.png);
  background-position: 300px 10px , 800px 10px;
  animation-delay: 1000ms;  /*애니메이션 딜레이줌*/
}

.visual-text {
  /* position: absolute; */
  animation-name: moveEffect;
  animation-duration: 2000ms;
  animation-fill-mode: forwards;
  display: inline-block;  /*애니메이션 실행했을 때 오버플로우 해결*/
  font-family: Georgia, 'Times New Roman', Times, serif;
}


/* 메인콘텐츠 */
.main {
  display: flow-root;
  background: #fff;
  padding: 30px 15px;
  border-radius: 15px 15px 0 0;
  min-height: 400px;
  /* overflow: hidden; */
  /* display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  padding: 30px 15px; */
  
}
/* .main::after {
  content: "";
  display: block;
  clear: both;
} */
/* 그룹 */
.group {
  float: left;
  margin: 0 15px;
}
.group1 {
  width: 250px;
}
.group2 {
  width: 380px;
}
.group3 {
  width: 190px;
}
/* 로그인 */
.login {
  background: #ed552f radial-gradient(circle at right top, #e8852e , #ed552f); /*백그라운드 컬러 / 폴백*/
  border-radius: 5px 5px 5px 5px;
  padding: 10px;
  box-shadow: 5px 5px 0 0 #aaa;
}
.login-title {
  color: #ff0;
  font-size: 1.5rem;
  font-weight: 600;
  text-indent: 10px;  /*패딩 레프트와 차이*/
}
.login-form {
  margin-top: 10px;
  background: #fff;
  padding: 10px 10px 0 10px;  
  border-radius: 5px 5px 0 0;

}
.login-form fieldset {
  position: relative; /*버튼 앱솔 기준*/
  border-bottom: 1px solid #aaa; /*필드셋 사이즈에 맞춰 밑줄*/
  padding-bottom: 10px;
}
.user-email {
  margin-bottom: 5px;
}

.login-form label {
  display: inline-block;  /*인라인 속성이기 때문에 크기조절 안됐었음*/
  width: 56px;
}
.login-form input { /*인풋은 인라인 블록이라 크기조절 가능 버튼이나 셀렉트도*/
  /*인풋 스타일*/
  width: 90px;
  height: 24px;
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 2px 2px 2px .5em;
}

.login-button {
  position: absolute; /*필드셋을 기준으로 / 어디를 기준으로 해야할지 잘봐라 */
  top: 0;
  right: 0;
  width: 53px;
  height: 53px;
  /*form관련 태그들은 유난히 브라우저마다 설정된 값이 있음 / 그거 리셋*/
  padding: 0;
  font-size: 1.3rem;
  color: #fff;
  background: #ed552f;
  border: 0;
  border-radius: 4px;
}

.sign {
  display: flow-root;
  background: #fff;
  padding: 4px 10px;  
  border-radius: 0 0 5px 5px; /*우하, 좌하*/
}
.sign li:first-child {
  float: left; /*플로트로 좌우 정렬*/
}
.sign li:last-child {
  float: right;
}

.sign a {
  display: block;
  padding: 6px 0;
  font-size: 1.3rem;
  /* letter-spacing: -1px; */
}
.sign .icon-right-open::before {/*가상요소로 설정돼서 이걸로 스타일 조절*/
  color: #ed552f;
}


/* 유효성 검사 배너 */
.validation-list {
  margin-top: 25px; /*로그인 박스의 그림자는 사이즈에 포함안돼서 20이 기준인데 25로줌*/
} 
.validation-list li {
  margin-top: 10px; /*첫번째 버튼의 마진탑은 어차피 마짐 겹칩 현상으로 상쇄됨*/
} 
.validation-list a{ /*a태그가 꽉차야하기 때문에 a태그에 스타일을 준다.*/
  /*background: #aaa; 리니어그라디언트 안되는 경우*/
  /* 멀티 백그라운드 숏컷 */
  background: url("./images/validation_icon.png") no-repeat 20px 50% / 16px 16px, 
  #aaa linear-gradient(to bottom, #ccc, #aaa) repeat;  /*먼저 선언한게 위로 올라감*/
  /* background-size: 16px 16px;  */
  display: block; /*인라인이기 때문에 블록으로*/
  padding: 10px;
  border-radius: 50px;
  padding-left: 45px;
} 
.validation-list a:hover, .validation-list a:focus {  /*a태그 이벤트*/
  color: #f00;
  background-size: 14px 14px, 100%; /*그라디언트는 안줌*/
}

/* 웹 관련 용어 */

.term {
  margin-top: 20px;
  background: linear-gradient(to bottom, #ccc, #eee);
  border: 1px solid #aaa;
  border-radius: 5px;
  padding: 15px;
}
.term-title {
  font-weight: 700;
  font-size: 1.5rem;
}
.term-list {
  margin-top: 15px;
}
.term-list div {
  display: flow-root;
  margin-top: 10px;
}
.term-list-subject {
  width: 145px;
  color: #296797;
}
.term-list-thumbnail {
  position: relative;
  top: 2px; /*글자랑 높이 맞추기*/
}
.term-list-thumbnail img{
  /* display: block; */
  vertical-align: top; /*인라인이 문제야*/
}
.term-list-brief {
  width: 145px;
  margin-top: 5px;
  line-height: 1.5; /*1.6 정도가 보통 이쁨*/
}

.odd .term-list-thumbnail,
.even .term-list-subject, 
.even .term-list-brief {
  float: left;
}
.odd .term-list-subject, 
.odd .term-list-brief,
.even .term-list-thumbnail {
  float: right;
}

/* 검색 폼 */
.search-form {
  background: #ccc linear-gradient(to bottom, #ccc, #eee);
  border: 1px solid #aaa;
  border-radius: 10px 10px 0 0;
  padding: 15px 25px 10px;
  border-bottom-color: #fff;
}
.search-form fieldset {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
}
.search-form input {
  -webkit-appearance: none;
  border: 1px solid #aaa;
  height: 24px;
  border-radius: 4px 4px 0 0; /*?*/
  padding: 2px 2px 2px 0.5em;
  width: 100%; /*문제해결됨 / 나머지 공간 전부차지 */
  margin: 0 10px;
  background: #fff;
}
.search-form label, .search-button {
  white-space: nowrap; /*개행 금지*/
}
.search-button {
  background: #000;
  color: #fff;
  padding: 2px 10px;
  height: 24px;
  border: 0;
  border-radius: 5px;
}
/* 공지사항 및 자료실 */
/* 3가지 방식 / 처음 2개는 주석처리된 보드 클래스 */
/* .board {
  margin-top: 20px;
  background: yellow;
  position: relative;
}
.board-tab {
  float: left;
  border: 1px solid #aaa;
  border-radius: 5px 5px 0 0;
  background: #ccc;
  padding: 10px 15px;
  color: #666;
}
.board-section.is-select .board-tab {
  background: #fff;
  color: #ed552f;
  border-color: currentColor currentColor #fff currentColor;
}
.board-panel {
  display: none;
  position: absolute;
  top: 45px;
  left: 0;
  width: 100%;
}
.board-section.is-select .board-panel {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}
.board-panel li {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  align-items: center;
}

.board-panel a {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 0;
}
.board-more {
  display: none;
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 8px; 
}
.more::before {
  color: hsla(110, 50%, 30%, 1);
}

.board-section.is-select .board-more {
  display: block;
} */
/* .board {
  margin-top: 20px;
  position: relative;
  padding-top: 45px;
  min-height: 214px;
}
.board-tab {
  position: absolute;
  top: 0;
  border: 1px solid #aaa;
  border-radius: 5px 5px 0 0;
  background: #ccc;
  padding: 10px 15px;
  color: #666;
}
.notice-tab {
  left: 0;
}
.archive-tab {
  left: 80px;
}

.board-section.is-select .board-tab {
  z-index: 10;
  background: #fff;
  color: #ed552f;
  border-color: currentColor currentColor #fff currentColor;
}
.board-panel {
  display: none;
}
.board-section.is-select .board-panel {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}
.board-panel li {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  align-items: center;
}

.board-panel a {
  flex-grow: 1; 나머지 자리 차지
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 0;
}
.board-more {
  display: none;
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 8px; 면적 넓힘
}
.more::before {
  color: hsla(110, 50%, 30%, 1);
}

.board-section.is-select .board-more {
  display: block;
} */




.board {
  margin-top: 20px;
  position: relative;
  min-height: 214px;
  /* background: yellow; */
}

.tab {
  border: 1px solid #aaa;
  border-radius: 5px 5px 0 0;
  background: #ccc;
  padding: 10px 15px;
  color: #666;
}


.tab.is-select {  /*스크립트로?*/
  background: #fff;
  color: #ed552f;
  border-color: currentColor currentColor #fff currentColor;
}


.board-list {
  display: none;
  padding-top: 10px;
}
.is-select .board-list {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}

.tab-panel li {
  display: flex;
  flex-flow: row nowrap;
  max-width: 100%;
  align-items: center;
}

.tab-panel li a {
  flex-grow: 1; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 0;
}
.board-more {
  display: none;
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 8px;
}
/* 공지사항, 자료실, 새소식, 인기사이트 더보기 링크 웹폰트 글자 생상 일괄 적용 */
.more::before {
  color: hsla(110, 50%, 30%, 1);
}

.is-select .more {
  display: block;
} 

/* 새소식 */
.news {
  margin-top: 20px;
  position: relative; /*더보기, 언더라인 기준*/
}
.news-title {
  color: #d16527;
  font-weight: 700;
  font-size: 1.5rem;
}
.news::before { /*선 만드는 법*/
  content: '';
  position: absolute;
  top: 30px;
  left: 0;
  width: 80%;
  height: 1px;
  background: #aaa linear-gradient(to right, #aaa, #fff);
}
.news-link {
  /*마진 겹침은 인접해있는 블록요소끼리만 일어난다. 그래서 해결 방법으로 인라인 블록 이용하기도 함.
  여기에서는 마집겹침 현상 이용. 
  */
  /*background: pink; d백그라운드를 설정했을 때 a태그 안에 블록 요소 있을 때 안보임. 
  inline 은 width 와 height 를 가질 수가 없습니당. 그렇다보니 backgroun-color 가 칠해질 공간도 없게 되는거
  */
  display: block; 
  /*border-top: 1px solid transparent;   마진 겹침 현상 해결*/
}
.news-item {
  margin-top: 35px;
  padding-left: 130px;  /*왼쪽에 공간 확보해서 그곳에 사진 넣음*/
  position: relative;
  min-height: 115px; /*글 내용이 적었을 때 그림이 앱솔루트기 때문에 침법될 수 있는 거 방지*/
}
.news-item-title {
  font-weight: 600;
  margin-bottom: 5px;
}
.news-item-brief {
  line-height: 1.5;
  margin-top: 10px;
  text-align: justify; /*양쪽 정렬*/
}

.news-item-thumbnail {
  position: absolute; /*앱솔루트로 레이아웃 짬*/
  top: 0;
  left: 0;
  text-align: center; /*굳이 플렉스로 안해도됨*/
}

.news-item-thumbnail img {
  box-shadow: 0 15px 15px 5px #aaa;
}

.news-item-thumbnail figcaption {
  margin-top: 15px;
}

.news-more {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 8px;
}

/* 신규 이벤트 및 관련사이트 */
.gradient-effect {
  border: 1px solid #aaa;
  border-radius: 5px;
  padding: 10px;
  background: #ccc linear-gradient(to bottom, #ccc, #eee);
}
.accent-color {
  color: #d16527;
}
.event {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  border-bottom: 1px solid #aaa;
}

.event-title, .related-title, .favorite-title {
  font-size: 1.5rem;
  font-weight: 700;
}


.event-button-wrapper {
  margin-left: auto;  /*왼쪽 마진 다 차지해서 오른쪽으로 정렬*/

  height: 18px; /*부모에 높이 설정하고 오버플로우 히든*/
  overflow: hidden;

  display: flex;
  gap: 6px;
}
.event button { /*ir 기법중 패딩 트릭*/
  width: 19px;
  height: 0 !important; /*높이 0으로 하고*/
  border: 0;
  padding: 18px 0 0 0;  /*패딩을 줌*/
  background-color: transparent;
  background-image: url('./images/back_forward.png');
  background-repeat: no-repeat ;
}
.event button:focus {
  outline-offset: -2px;
}

.event-button-next {
  
  background-position: -36px 0; 
}
/* 위하고 안겹쳐서 가능. 숏컷말고 속기법으로 해결 */
/*이미지 스프라이트*/

/* .event-button-container {
  padding: 4px; 탭으로 포커스시 아웃라인 자연스럽게
  margin-left: auto; 왼쪽의 마진 전부 차지해서 오른쪽으로 이동함
  display: flex;
  flex-flow: row nowrap;
  gap: 6px;
  transform: translate(4px, -4px);
}
.event-button-container button {
  정렬한 다음에 그냥 딱 보더 패딩 다 필요없이 콘텐츠 크기만 가지게 하고 배경색 투명으로 하고 배경 이미지 설정 
  width: 19px; 버튼 크기만큼 설정하고
  height: 18px;
  padding: 0;   패딩, 보더 0
  border: 0;
  background-color: transparent ; 투명하게
  background-image: url(./images/back_forward.png);
  background-repeat: no-repeat;
}
.event-button-container .event-button-next {
  background-position: -36px 0; 스프라이트 이미지 기법
} */



.event-detail {
  width: 100%;  /*한 라인 다 차지하게 해서 wrap으로 줄바꿈함*/
}


.event-thumbnail {
  margin: 2px 0 10px;
}
.event-brief {
  margin: 10px 0;
}

.event-thumbnail img {
  border: 1px solid #aaa;
  box-shadow: 5px 5px 0 0 #bbb;
}


/* 관련 사이트 */

.related {
  padding-top: 10px;
}
.related-list {
  margin-top: 10px;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 5px;
  height: 27px; /*보더 포함/ 호버나 포커스 안했을 때 높이 정해줌*/
  overflow: hidden;
  transition: height 400ms, padding 400ms 400ms; /*늘 있어야하는 선택자에 걸어야함. 그래야 호버했을 때하고 뺐을 때도 동작함. 딜레이걸음*/
}

.related-list:hover, .related-list:focus { /*텝인덱스 해줘서 포커스 가능*/
  /*이벤트 일어나야 높이, 패딩 설정*/
  height: 147px;
  padding: 10px 0;
}


.related-list a {
  display: block; /*글자가 아닌공간 눌러도 이동할 수 있게 a를 기준으로*/
  line-height: 25px;  /*라인하이트로 높이 조절*/
  padding: 0 0 0 20px;
}


/* 인기사이트 */

.favorite {
  position: relative;
  margin-top: 20px;
}
.favorite-list {
  margin-top: 10px;
  /* overflow: hidden; */
  list-style-type: none;
}
.favorite-more {
  position: absolute; /*우상단 이동*/
  top: 2px;
  right: 2px;
  padding: 8px;
}

.favorite-list li {
  position: relative;
  margin-top: 8px;
  counter-increment: number;  /*순서대로*/
}
.favorite-list li::before {
  content: counter(number); /*노가다 줄여줌*/
  display: inline-flex;
  padding: 2px 5px 1px;
  font-size: 1.1rem;
  color: #fff;
  background: #aaa;
  border-radius: 4px;
  min-width: 1.5em; /*1만 작은거 해결*/
  justify-content: center;
  margin-right: 0.5em;
}

.favorite-list a {

  vertical-align: middle; /*텍스트 수직 가운데 정렬*/
}
.favorite-list em {

  position: absolute;
  /* 크기 설정하고 */
  width: 9px;   
  height: 11px;
  right: 0;
  top: 50%; /*50%주고 높이의 절반만큼 빼준다.*/
  margin-top: -5px; /*높이의 절반*/
  background-image: url(./images/rank.png);
  background-repeat: no-repeat;
}
.favorite-list .stop {
  background-position: 0 50%; /*백그라운드 포지션도 퍼센트 활용하면 효율적*/
}
.favorite-list .down {
  background-position: 0 100%; /*이따 한번 봐바*/
}




/* 슬로건 */
.slogan {
  position: relative;
  padding: 10px 100px 10px 180px; /*텍스트가 들어갈 장소 만들어줌*/
  margin-top: -100px;
}
.slogan-title {
  /*앱솔루트의 기준들*/
  /* left: 35px;
  position: absolute; 
  bottom: -25px; */
  transform: translate(-140px, 90px); 
  /* filter: grayscale(80%); */


  width: 110px; /*사이즈 조절*/
  height: 83px;
  line-height: 83px;  /*텍스트 중앙 정렬*/
  text-align: center;
}
.slogan-title::after {  /*가상요소 선택자로 배경이미지 만들어주고 덮어씌움*/
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(./images/coffee.png) no-repeat 0 0;
}


.slogan-content {

  color: #a09784;
  line-height: 1.5;
}

.slogan-content q::before { /*앞에 쌍따옴표*/
  display: inline-block;
  font-size: 2.5rem;
  transform: translateY(5px);
}
.slogan-content q::after {  /*뒤에 쌍따옴표 없애줌*/
  content: "";
}

/* 푸터 */
.footer {
  background: #ccc linear-gradient(to bottom, #ccc 0%, #eee 50%, #fff 60%, #fff 100%); /*배경*/

}
.footer-inner {
  display: grid;
  grid-template-columns: 140px 1fr 120px;
  /* grid-template-rows: auto auto auto; 오토일 때는 생략해도 됨 */
  padding: 20px 0;
}
/* 푸터로고 */
.footer-logo {
  /* grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 4;
  grid-column-end: 2; */

  /* grid-row: 1/4;
  grid-column: 1/2; */

  grid-area: 1/1/4/2;
  align-self: center; /*y축 정렬*/
  justify-self: center; /*x축 정렬*/
}

/* 가이드 링크 */
.guide-list {
  grid-area: 1/2/2/3;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  background: #7b8385;
  color: #fff;
  border-radius: 20px;
  padding: 4px 20px;
  margin: 5px 20px;
  /*대문자 변환같은 거는 한번 봐두는 정도*/
  text-transform: uppercase;
  /*font-variant: small-caps; 소문자 크기*/
}
.guide-list a {
  display: block;
  padding: 6px 10px;
}
/* 주소 */

.address {
  grid-area: 2/2/3/3;
  margin: 5px 20px;
}

/* 저작권 */
.copyright {
  grid-area: 3/2/4/3;
  margin: 5px 20px;
}

/* 배지그룹 */
.badge-container {
  grid-area: 1/3/4/4;
}