@charset "utf-8";

@media screen and (max-width:767px) {
  header{
    position:relative;
    background: #f1f1f1;
    width:100%; height: 70px; z-index: 100;
  }
  header h1{
		top:20px; width:15%;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
	}
  header h1 img{width:100%;}


  /* ★ 모바일 햄버거 토글 ★ */
  #toggle{
    display:block;
    background:#396ccc; border-radius: 10px;
    padding:8px;
    position: absolute; right:3%;top:24px;
    width:32px;height:32px;
    z-index: 1002;
  }
  #toggle span{
    display:inline-block;
    width:32px;height:2px;
    background:#fff;
    position:absolute;
    transition:0.5s;
  }
  #toggle span:first-child{top:12px;}
  #toggle span:nth-child(2){top:22px;}
  #toggle span:last-child{bottom:12px;}

  .rotate1{
    transform:rotate(45deg);
    left:9px;
    top:23px !important;
  }
  .rotate2{
    transform:rotate(-45deg);
    bottom: 23px !important;
    right:7px;
  }
  .bgcolor{background:rgba(18, 18, 18,.8) !important}



  /* ★ 모바일 내비게이션 서식 ★ */
  header .gnb{
    position:fixed;top:60px;
    width:100%; height:100%;
    z-index:1001;
  }
  /* 메인메뉴 */
  .gnb{
    width:90%;
    position: absolute;
    right: 5%; top: 90px;
    display:none;
    align-items:center;
  }
  .gnb > ul{
    width:100%;
    display: block;
    margin: 0px auto;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0px 0px 10px 0px #ccc;
  }
  .gnb li a{
    display: block;
    line-height:230%;
    font-size:1rem;
    text-align:center;
  }
  /* 서브메뉴 */
  .sub{
    display:none;
    position:absolute;
    width:90%;left:5%;
    box-shadow: 0px 3px 2px #ccc;
    border:1px solid #ccc;
    z-index: 100;
  }
  .sub li a{background:#e8e8e8;}
  .sub li a{background: #e8e8e8;}

  /* pc 검색폼 */
  fieldset{display: none;}

  /* 검색폼 */
  .gnb label > i.fa-xmark{display: none;}
  .gnb a > label.fa-search{
    border: 1px solid #333; border-radius: 50px;
    padding: 10px;
    font-size: 1rem;
    position: absolute;
    top: 105%; right: 9%;
  }
  .gnb input[type="search"]{
    width: 70%;
    border: 1px solid #979797; border-radius: 5px;
    text-align: center;
    position: absolute; left:10%; top: 105%;
    margin: 0px auto; padding: 10px;
  }
  .gnb > .inner_btn > a.fa-search{
    font-size: 1rem; padding: 10px; border: 1px solid #333; border-radius: 50px;
    position: absolute; top: 105%; right: 5%;
  }
  header > fieldset > a.fa-search{display: none;}


  /* pc 회원가입 로그인 */
  nav.lnb > ul{display: none;}



  /* ************************* */
  /* ★ 메인 서식 ★ */
  /* 1. 메인 슬라이드 서식 */
  .visual{
    position: relative;
    height: 60vh;
    overflow: hidden;
    background: #f1f1f1;
  }
  .visual > h2{display: none;}
  .visual > div{
    position: absolute;
    width: 100%;
    top: 0px; left: 0px;
  }
  .visual > div > p{ /* 쓰는 존재와 읽는 당신 사이, */
    font-size: 1.2rem;
    position: absolute;
    top: 110px; left: 20%;
    text-align: center;
    z-index: 2;
  }
  .visual > div > p > span{ /* 삶의 틈을 문학으로 채우다 */
    font-size: 1.8rem; color: #fff; background: #333;
    font-weight: bold;
    line-height: 60px;
  }
  .visual > .slide1 > img{position: absolute;}
  .visual > .slide1 > .slide1_book{ /* 책 */
    width: 120%;
    position: absolute; top: 120px; left: -50px;
    z-index: 1;
  }
  .visual > .slide1 > .slide1_text{ /* 텍스트 */
    width: 100%;
    top: 0px; left: 0px;
    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: block; justify-content: center; padding: 30px 0px;}

  /* 유튜브 */
  .media_you{width: 100%; margin-bottom: 80px; text-align: center;}
  .media_you > iframe{width: 100%; height: 350px;}
  .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: 100%; text-align: center;}
  .media_blg a > img{width: 70%;}
  
  
  /* 3. 탭콘텐츠 (신간/베스트) */
  .tab_con{background: #fff;}
  .tab_con article{
    width: 100%; height: 730px;
    margin: 0px auto;
  }
  .tab_con article > h2{display: none;}
  .tab_con_wrap{
    display: flex;
    padding-top: 50px;
    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: 500px;
    position:absolute;
    /* border: 1px solid #f00; */
    width: 100%; left:20px; top:90px;
    display: none;
    overflow: hidden;
  }
  
  .new > .cont{display: block;}
  
  .cont > ul{
    display: flex;
    width: 500%;
    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: 100%;
    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%; height: 250px;
    text-align: center;
    position: relative;
  }
  .book_o{margin-top: 5px;}
  .book_s > img, .book_o > img{width: 200%; position: absolute;}
  .book_s > img{
    top: 0px; left: -200px;
    display: none;
  }
  .book_o > img{
    top: 0px; left: -170px;
    display: none;
  }
  .book_s .book_img_m > img, .book_o .book_img_m > img{
    width: 100%;
  }

  .book_s > p, .book_o > p{
    position: absolute;
    font-size: 0.9rem;
    line-height: 25px;
  }
  .book_s > p{
    top: 20%; left: 10%;
    text-align: left;
  }
  .book_o > p{
    top: 40%; right: 5%;
    text-align: right;
  }
  .book_sbox{top: 31%; left: 10%;}
  .book_obox{top: 51%; right: 5%;}
  .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: 45%; left: 10%;}
  .book_s > input:hover, .book_o > input:hover{
    border:1px solid #333; background: #fff; color: #333;
    font-weight: bold;
  }
  .book_o > input{top: 65%; right: 5%;}
  .book_img_t{display: none;}
  
  
  /* 5. 민음사 멤버십 슬라이드 서식 */
  .event{
    width:100%;
    margin:100px auto;
    position:relative;
    overflow-x: hidden;
  }
  .event > h2{
    font-size:23px; font-weight:bold;
    padding-bottom:20px;
    text-align: center;
  }
  .e_slide{
    display:flex; position:relative;
    overflow-x: hidden;
  }
  /* 이미지 슬라이드 */
  .es_wrap{display:flex; width:340%;}
  .es_wrap div{
    width:90%;
    padding: 0px; margin: 0px auto;
  }
  .es_wrap div a img{border-radius: 10px;}
  .es_wrap div a{text-align: center;}
  .es_wrap div a div{width: 100%; text-align: left;}
  .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;
  }
  .e_slide{display: block; text-align: left;}
  .e_slide a{display:block; height: 370px;}
  .e_slide .e_txt{padding:0px 0px 0px 40px;}
  .e_txt h3{
    font-weight: bold; font-size:20px;
    line-height:60px;
  }
  .e_txt p{font-size:16px;}
  .event i.fa-angle-left{left: 10px;}
  .event i.fa-angle-right{right: 10px;}
  
  
  /* 6. 인스타그램 */
  .instar{padding: 40px 0px; background: #333;}
  .instar > h2{
    width: 100%;
    margin: 0px auto;
    display: block;
    font-weight: bold; font-size: 1.4rem; text-align: center;
    padding-bottom: 10px;
    color: #fff;
  }
  .id_name{
    font-size: 0.95rem; font-weight: normal;
    display: block;
    line-height: 300%;
  }
  
  .gallery > li{overflow: hidden;}
  .gallery{
    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(255,255,255,.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: #000; color: #fff;
  }
  .f_inner{background: #333; position: relative; height: 250px;}
  .f_inner a{transition: 0.5s;}
  .f_inner a:hover{text-decoration: none;}
  .f_inner nav{
    display: flex; justify-content: space-around;
    width: 100%; margin: 0px auto; padding: 0px 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{
    position: absolute; top: 75%; right: 3%;
    display: inline-flex;
    align-items: flex-end;
  }
  footer .sns > dt{margin-right: 20px;}
  footer .sns i.fab{
    font-size: 0.9rem;
    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;
  }
}