@charset "utf-8";

/* News, Notice, Blog / 언론 보도, 공지 사항, 블로그 페이지 */

/* ----- list.php ----- */
/* ----- search ----- */
.search_box{
  width: 420px;
  height: 3rem;
  margin: 0 auto 3.125rem auto;
  border: 1px solid #414EAC;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search_box input{
  width: 380px;
  height: 3rem;
  margin: 0 auto 0 1rem;
}
.search_box input::placeholder{
  color: #A4A4A4;
}
.search_box button i{
  width: 3rem;
  height: 3rem;
  background-color: #414EAC;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ----- news_write ----- */
.news_write{
  display: flex;
  justify-content: flex-end;
}
.news_write .btn_circle{
  margin: 1rem 0;
}

/* ----- page_image ----- */
.news .page_image{
  margin-bottom: 5rem;
  background: url("https://twinny.ai/assets/img/news_image.png") no-repeat center / cover;
}

/* ----- news_list ----- */
.news_list{
  padding-bottom: 300px;
}
.news_link{
  width: 100%;
  height: auto;
  border-bottom: 1px solid #343448;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: 0.3s;
}
.news_link::after{
  content: '→';
  color: #414EAC;
  font-size: 2rem;
  font-weight: 800;
  position: absolute;
  top: 50%;
  right: 2rem;
  transition: 0.3s;
}

.news_link:hover::after{
  color: #7b86d8;
  animation: btn_news infinite 1s;
}
@keyframes btn_news{
  0%{
    right: 2.5rem;
  }
  60%{
    right: 2rem;
  }
  100%{
    right: 2.5rem;
  }
}

.news_box{
  border-top: 1px solid #343448 !important;
}
.news_info span{
  color: #414EAC;
  font-size: 1rem;
  font-weight: 600;
}
.news_link .news{
  margin-top: 0.5rem;
  line-height: 1.2;
  font-size: 1.8rem;
  font-weight: 600;
  display: flex;
}

/* ----- pagination ----- */
.pagination, .pagination-links{
  width: 12rem;
  margin: 4rem auto 0 auto;
  display: flex;
  justify-content: space-between;
}
.pagination a, .pagination strong,
.pagination-links a, .pagination-links strong{
  color: #343448;
  font-size: 1.25rem;
  transition: 0.3s;
}
.pagination strong, .pagination-links strong{
  color: #414EAC;
  font-weight: 800;
}

/* ----- Blog 블로그 썸네일 ----- */
.blog .news_box{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 30px;
}
.blog .news_box{
  border-top: 1px solid transparent !important;
}
.blog .news_link{
  border: 1px solid #414eac15 !important;
  color: #fff;
  border-radius: 20px;
  box-shadow: 3px 3px 10px #a4a4a43e;
}
.blog .list-link-to, .blog .read-more-icon, .blog .fa-arrow-right{
  height: 0;
  font-size: 0;
}
.blog .post-thumbnail > a > .twmaga-sum{
  width: 100%;
  margin-top: 5px;
  border-radius: 20px;
}
.blog .news_link::after{
  top: 65px;
}

/* ----- blog_view ----- */
.blog_create, .blog_view{
  line-height: 1.5 !important;
  margin: 0 auto !important;
  text-align: center !important;
}
/* 텍스트 스타일 */
.blog_create h1 span, .blog_view h1 span,  .blog_view h1{
  margin-bottom: 30px;
  font-size: 3rem !important;
  font-weight: 800 !important;
  font-family: "Pretendard Variable" !important;
}
.blog_create h2 span, .blog_view h2 span{
  margin-bottom: 30px;
  font-size: 2.8rem !important;
  font-weight: 700 !important;
}
.blog_create h3 span, .blog_view h3 span{
  margin-bottom: 30px;
  font-size: 2.4rem !important;
  font-weight: 600 !important;
}
.blog_create h4 span, .blog_view h4 span{
  font-size: 2rem !important;
  font-weight: 500 !important;
}
.blog_create h5 span, .blog_view h5 span{
  font-size: 1.5rem !important;
  font-weight: 400 !important;
}
.blog_create h6 span, .blog_view h6 span{
  font-size: 1rem !important;
  font-weight: 300 !important;
}
/* 테이블, 표 */
.blog_create .table, .blog_view .table{
  margin: 2rem auto !important;
  border-spacing: 0 !important;
  border: 1px solid #343448 !important;
}
.blog_create .table tbody tr td, .blog_view .table tbody tr td{
  padding: 0.5rem 1rem;
  border: 1px solid #343448;
}
/* 글머리 기호 */
.blog_create ul, .blog_create li, .blog_create dl, .blog_create dt, .blog_create dd,
.blog_view ul, .blog_view li, .blog_view dl, .blog_view dt, .blog_view dd{
  list-style-type: disc !important;
}
.blog_create ol, .blog_view ol, .blog_create ol li, .blog_view ol li{
  list-style-type: decimal !important;
}
.blog_view .newsview-filebox li{
  list-style: none !important;
}
/* 인용 */
.blog_create blockquote, .blog_view blockquote{
  width: fit-content !important;
  margin: 0 auto 30px auto !important;
  border-left: 5px solid #414EAC;
}
.blog_create blockquote, .blog_view blockquote{
  padding: 5px 15px !important;
}
.blog_create blockquote span, .blog_view blockquote span{
  color: #414EAC !important;
  font-weight: 800 !important;
}
/* 링크 스타일 */
.blog_create .newsview a, .blog_view .newsview a, .blog_create .newsview a:focus, .blog_view .newsview a:focus{
  width: fit-content !important;
  margin: auto !important;
  line-height: 1.3 !important;
  color: #414EAC !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  display: flex !important;
  justify-content: center !important;
  position: relative !important;
  transition: 0.3s !important;
}
.blog_create .newsview a:hover, .blog_view .newsview a:hover{
  color: #7b86d8 !important;
}
.blog_create .newsview a::after, .blog_view .newsview a::after{
  content: '' !important;
  width: 100%;
  height: 1.5px !important;
  background-color: #414EAC !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
}
.blog_create .newsview a:hover::after, .blog_view .newsview a:hover::after{
  background-color: #7b86d8 !important;
  animation: link_detail 1s;
}
@keyframes link_detail{
  0%{
    width: 0;
  }
  100%{
    width: 100%;
  }
}
.blog_create .newsview-filebox a, .blog_view .newsview-filebox a{
  font-size: 0.875rem !important;
}
.blog_create .newsview-filebox a::after, .blog_view .newsview-filebox a::after{
  background-color: transparent !important;
}


/* ----- create.php ----- */
/* ----- news_create ----- */
.post-write-box{
  width: fit-content;
  margin: 0 auto;
}

.creat_input_box{
  width: 420px;
  height: 3rem;
  margin: 0 auto 0.5rem auto;
  border: 1px solid #414EAC;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.creat_input_box input{
  width: 380px;
  height: 3rem;
  margin: 0 auto 0 1rem;
}
.newsview-post-btn{
  width: fit-content;
  margin: 2rem auto 300px auto;
}

.notice_creat_textarea{
  height: fit-content;
}
.notice_creat_textarea textarea{
  width: 100%;
  height: 200px;
  padding: 1rem;
}
.notice_creat_fileupload label{
  padding: 0 1rem;
}
.notice_creat_fileupload input{
  width: 70%;
  height: max-content;
}

.login_box{
  margin-top: 2rem;
  padding-bottom: 10rem;
  display: flex;
  justify-content: center;
}

/* ----- edit.php ----- */
/* ----- news_delete ----- */
.news_delete{
  display: flex;
  justify-content: flex-end;
}

/* ----- view.php ----- */
.notice .newsview{
  border-top: 1px solid #414EAC;
  border-bottom: 1px solid #414EAC;
}
.notice .newsview-header{
  padding: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #414EAC;
}
.notice .newsview-header,
.notice .newsview-header .content_title{
  text-align: center;
}
.notice .newsview-body{
  padding: 3rem;
}
.notice .content_title{
  padding: 0 0 2rem 0;
  font-weight: 800;
}
.notice .newsview-filebox{
  width: fit-content;
  margin: 3rem auto 0 auto;
  padding: 0.8rem 1rem;
  border: 1px solid #414EAC;
  border-radius: 20px;
  transition: 0.3s;
}
.notice .newsview-filebox:hover{
  border: 1px solid #7b86d8;
}
.notice .newsview-filebox li a{
  color: #414EAC;
  font-size: 0.875rem;
  font-weight: 800;
  transition: 0.3s;
}
.notice .newsview-filebox:hover li a{
  color: #7b86d8;
}



@media (max-width: 1100px){
  /* ----- news_list ----- */
  .news_list{
    padding-bottom: 200px;
  }
  .news_link .news{
    font-size: 1.5rem;
  }

  /* ----- news_create ----- */
  .newsview-post-btn{
    margin: 2rem auto 200px auto;
  }
}

@media (max-width: 900px){
  /* ----- news_list ----- */
  .news_link .news{
    font-size: 1.25rem;
  }
}

@media (max-width: 700px){
  /* ----- search ----- */
  .search_box, .creat_input_box{
    width: 250px;
    height: 2.5rem;
  }
  .search_box input, .creat_input_box input{
    width: 185px;
    height: 2.5rem;
  }
  .search_box button i{
    width: 2.5rem;
    height: 2.5rem;
  }
}