@charset "utf-8";
/* pc.css */

@media screen and (min-width:1024px){
header{
  width: 100%; height: 150px;
  position: absolute;
  z-index: 1000;
}

header h1{
  /* background: #f00; */
  width: 100px;
  position: absolute;
  top: 40px; left: 10%;
}
header h1 img{width: 100%;}



/* ★ 메인메뉴 서식 ★ */
.gnb{
  position: absolute;
  left: 17%; top: 40px;
}
.gnb > ul{display: flex;}
.gnb > ul > li{
  width: 90px;
  text-align: center;
  margin: 0px 15px;
  position: relative;
  line-height: 40px;
}
.gnb > ul > li > a{
  font-size: 1.2rem;
  color: #333;
}
.gnb > ul > li > a:hover{color: #396ccc; font-weight: bold; transition: 0.4s;}
.gnb > ul > li > a > i{display: none;}


  /* 서브메뉴 서식 */
  .sub{
    border:1px solid #ccc;
		box-shadow: 0px 1px 1px #ccc;
		border-radius:4px;
		padding:2px;
		background:#fff;
    position:absolute;
    width:100%;
    display: none;
  }
  .sub > li{text-align: center;}
  .sub > li > a{
    font-size: 14px;
    display: block;
    line-height: 36px;
    transition: 0.2s;
  }
  .sub > li:hover a{background-color: rgba(76, 137, 228, 0.3); color: #333;}

  .gnb li:first-child .sub a, .gnb li:nth-child(2) .sub a{padding: 0px 10px;}

  .gnb li:last-child, .gnb li:nth-child(8){display: none;} /* 모바일 로그인/회원가입 버튼 */


/* 로그인/회원가입 서식 */
.lnb{position: absolute; top: 50px; right: 10%;}
.lnb > ul{display: flex;}
.lnb > ul > li{margin: 0px 12px;}
.lnb > ul > li > a{font-size: 1.2rem;}
.lnb > ul > li > .lnb_login{color: #396ccc;}


/* 검색폼 서식 */

/* 모바일 검색폼 서식 */
.gnb > #sear_btn_inner, .gnb > a{display: none;}

fieldset > .src_close_btn{display: none;} /* 검색폼 닫기 아이콘 */
/* 검색어 입력창 */
fieldset > #sear_btn{
  border: none; border-bottom: 1.5px solid #333;
  background: none;
  width: 250px;
  position: absolute;
  top: 50px; right: 22%;
  padding: 5px 10px;
}
fieldset > #sear_btn:focus{outline: none;}
/* 검색 아이콘 */
fieldset > a > .fa-search{
  position: absolute;
  top: 55px; right: 23%;
}
fieldset > a > label > span, .gnb > .inner_btn > a.fa-search{display: none;}

header > fieldset > p > a.fa-search{
  position: absolute; top: 35%; right: 22.5%;
  font-size: 1rem;
}



/* 메인 서식 */
/* 1. 메인 슬라이드 서식 */
.visual{
  position: relative;
  height: 83vh;
  background: #f1f1f1;
  overflow: hidden;
}
.visual > h2{display: none;}
.visual > div{
  position: absolute;
  width: 100%;
  top: 0px; left: 0px;
}
.visual > div > p{ /* 쓰는 존재와 읽는 당신 사이, */
  font-size: 40px;
  position: absolute;
  top: 300px; right: 25%;
  text-align: right;
  z-index: 2;
}
.visual > div > p > span{ /* 삶의 틈을 문학으로 채우다 */
  font-size: 55px; color: #fff;
  background: #333;
  padding: 0px 10px;
  font-weight: bold;
  line-height: 100px;
}
.visual > .slide1 > img{position: absolute;}
.visual > .slide1 > .slide1_book{ /* 책 */
  width: 50%;
  left: 10%;
  transform: rotate(-7deg);
  z-index: 1;
}
.visual > .slide1 > .slide1_text{ /* 텍스트 */
  width: 40%;
  top: 70px; left: 40%;
  animation: rotate;
  animation-duration: 50s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rotate{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
}


/* 2. 유튜브/블로그 컨텐츠 서식 */
.media_con{width: 100%; background: #414141;}
.media_con > .media_box{display: flex; justify-content: center; padding: 50px 0px;}
/* 유튜브 */
.media_you{width: 600px; display: block;}
.media_you > iframe{width: 500px; height: 280px;}
.media_you p, .media_blg > p{color: #fff; font-size: 1rem;}
.media_you p > span, .media_blg > p > span{line-height: 50px; font-size: 1.5rem; font-weight: bold;}
/* 블로그 */
.media_blg{width: 400px;}
.media_blg a > img{width: 100%;}


/* 3. 탭콘텐츠 (신간/베스트) */
.tab_con{background: #fff; overflow: hidden;}
.tab_con article{
  width: 1280px; height: 730px;
  margin: 0px auto;
}
.tab_con article > h2{display: none;}
.tab_con_wrap{
  display: flex;
  padding-top: 40px;
  position: relative;
  justify-content: center;
}
.tab_con_wrap > li > a{
  padding: 10px;
  font-size: 17px;
  margin: 5px;
}
.tab_con_wrap > li > a:hover{text-decoration: none; color: #396ccc;}

.t_act{background: url('../img/mark_icon.png') no-repeat center left !important;}

/* 슬라이드 */

.cont{
  height: 600px;
  position:absolute;
  /* border: 1px solid #f00; */
  width:54%;left:20px;top:90px;
  display: none;
}

.new > .cont{display: block;}

.cont > ul{
  display: flex;
  width: 3000px;
  justify-content: space-around;
  position: absolute;left:0px;
  transform: translateY(10px);

  /* border: 2px solid #00f; */
}
.cont > ul > li{width: 240px; margin: 30px; position: relative;}
.cont > ul > li:first-child{margin-left: 0px;}
.cont > ul > li > a > img{width: 100%; box-shadow: 0px 4px 10px 0px rgba(0,0,0,.25);}

.cont > ul > li > p{line-height: 15px;}
.cont > ul > li > .book_title{
  font-weight: bold; font-size: 15px;
  margin: 10px 0px;
}
.cont > ul > li > .book_write > span{font-weight: bold; margin-right: 7px;}
.cont > ul > li > .book_text{margin-top: 10px; color: #6D6D6D;}

/* 컨트롤 */
.new_ctrl_btn{
  position: absolute; bottom: 20px;
  width: 1280px;
  text-align: center;
}
.c_btn{
  width: 12px; height: 12px;
  display: inline-block;
  background: #D1D1D1; border-radius: 50%;
  cursor: pointer;
}
.c_act{background: #396ccc;}


/* 4. 북클럽 / 북샵 서식 */
.book_s, .book_o{
  background: #D6D6D7;
  width: 100%;
  text-align: center;
  position: relative;
}
.book_o{margin-top: 5px;}
.book_s > img, .book_o > img{width: 1000px;}

.book_s > p, .book_o > p{
  position: absolute;
  font-size: 15px;
  line-height: 50px;
}
.book_s > p{
  top: 20%; left: 30%;
  text-align: left;
}
.book_o > p{
  top: 30%; right: 32%;
  text-align: right;
}
.book_s > p > .text_blue, .book_o > p > .text_blue{color: #396ccc;}
.book_s > p > .text_title, .book_o > p > .text_title{font-size: 25px; font-weight: bold;}
/* 버튼 */
.book_s > input, .book_o > input{
  background: #333; color: #fff;
  border-radius: 50px; border: none;
  font-weight: bold;
  padding: 5px 10px; 
  position: absolute;
  cursor: pointer;
}
.book_s > input{top: 60%; left: 30%;}
.book_s > input:hover, .book_o > input:hover{
  border:1px solid #333; background: #fff; color: #333;
  font-weight: bold;
}
.book_s .book_img_m, .book_o .book_img_m, .book_img_t{display: none;}
.book_o > input{top: 69%; right: 31.9%;}


/* 5. 민음사 멤버십 슬라이드 서식 */
.event{
  width:900px;
  margin:100px auto;
  position:relative;
}
.event > h2{
  font-size:23px;
  font-weight:bold;
  padding-bottom:20px;
}
.e_slide{
  display:flex;
  position:relative;
  overflow:hidden;
}
.es_wrap{display:flex; width:3600px;}
.es_wrap div{width:1200px;}
.es_wrap div a img{border-radius: 10px;}
.event > .e_slide > .es_wrap > div > a > .e_txt > p{line-height: 30px;}
.event i.fas{
  position:absolute;
  top:120px;
  font-size:30px;
  padding:5px 12px;
  border-radius:50%;
  border:1px solid #333;
  background:#fff;
}
.event i.fa-angle-left{left:-70px;}
.event i.fa-angle-right{right:-50px;}
.e_slide a{display:flex;}
.e_slide .e_txt{padding:30px 0px 0px 40px;}
.e_txt h3{
  font-weight: bold;
  font-size:20px;
  line-height:60px;
}
.e_txt p{
  font-size:16px;
}


/* 6. 인스타그램 */
.instar{padding: 40px 0px; background: #333;}
.instar > h2{
  width: 760px;
  margin: 0px auto;
  display: block;
  font-weight: bold; font-size: 23px; text-align: left;
  padding-bottom: 10px;
  color: #fff;
}
.id_name{
  font-size: 15px; font-weight: normal;
  display: block;
  line-height: 300%;
}

.gallery > li{overflow: hidden;}
.gallery{
  width: 40%;
  margin: 0px auto; padding: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(3,auto);
  grid-template-rows: repeat(3, auto);
}
.gallery img{width: 100%; transition: all 0.3s linear;}
.gallery img:hover{transform: scale(1.05);}


  /* 7. 모달윈도(팝업레이어) */
  .modal{
    position: fixed; top: 0px;
    width: 100%; height: 100%;
    background: rgba(266,266,266,.5);
    z-index: 9999;
  }
  .modal > .banner{
    position: absolute;
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 380px; height: 380px;
  }
  .modal > .banner > .banner_box{box-shadow: 0px 0px 10px 1px rgba(0,0,0,.3);}
  .banner_text{
    width: 95%;
    background: #fff;
    margin-top: -1.5px; padding: 10px 9.5px;
    display: flex; justify-content: space-between;
  }
  .banner_text > label{
    font-weight: bold; line-height: 50px;
  }
  .banner_text > #modal_cbtn{
    border: none; background: #fff;
    padding: 5px 5px;
    font-weight: bold;
    cursor: pointer;
  }


/* ******************** */
/* 푸터서식 */
footer{
  width: 100%;
  background: #222; color: #fff;
  z-index: 1;
}
.f_inner{background: #444;}
.f_inner a{transition: 0.5s;}
.f_inner a:hover{text-decoration: none;}
.f_inner nav{
  display: flex; justify-content: space-between;
  width: 1200px; margin: 0px auto; padding: 50px 0px;
}
footer dl{line-height: 30px;}
footer dl dt{font-size: 16px;}
footer dl dt a{
  color: rgb(106, 188, 255);
  font-weight: bold; font-size: 16px;
}
footer dl dt:hover a{color: rgb(0, 230, 57);}
footer dl dd:hover a{color: #1aaa21;}
footer dl dd a{color: #d1d1d1;}

/* sns 서식 */
footer dl:last-child{text-align: center;}
footer dl:last-child dt{font-size: 18px;}
footer .sns i.fab{
  font-size: 14px;
  border: 1px solid #ccc;
  padding: 6px 8px; margin: 18px 6px 0px 6px;
  transition: 0.5s;
}
.sns dd i.fab:hover{color: rgb(106, 188, 255); border: 1px solid rgb(106, 188, 255);}

/* address 서식 */
address{
  display: flex; justify-content: space-between;
  height: 70px;
}
address > .f_logo{width: 100px; padding: 10px 0px 0px 5%;}
address > .f_logo > a > img{width: 100%;}
address p{padding-right: 3%; line-height: 70px;}

  /* top 서식 */
  .t_btn{
    font-size: 1.2rem;
    position: fixed; bottom: 10%; right: 5%;
    background: rgba(115, 176, 255, 0.8);border-radius: 50px; color: #fff;
    padding: 15px;
    display: none;
    z-index: 999;
  }

}