@charset "UTF-8";
button:focus {
  outline: none;
}
html,body {
  overflow-x: hidden;
  position: relative;
  height: 100%;
}
@media (max-width:768px) {

}

/*사이드 메뉴*/
#sideMenu .modal-dialog {
position: fixed; right:0; background-color:#fff; margin: auto; width: 400px;
max-width:100%;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
     -o-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);}

#sideMenu.fade .modal-dialog {
right: -320px;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
        transition: opacity 0.3s linear, right 0.3s ease-out;}
#sideMenu.fade.in .modal-dialog {right: 0;}

#sideMenu .modal-dialog {padding:20px; overflow-y: scroll;}
#sideMenu .modal-dialog .close {max-width:24px;}
#sideMenu .modal-dialog .close img {width:100%;}

#sideMenu .modal-dialog .sideLogo {max-width:128px; margin:36px 0 12px 0;}
#sideMenu .modal-dialog .title_text1{font-size:16px;}
#sideMenu .modal-dialog .title_text2{font-size:16px; font-weight:bold;}
#sideMenu .modal-dialog .title_text2 span{color: #8cd9ef;}

#sideMenu .modal-dialog .article_list {
  list-style-type:none; margin-top:30px; border:1px solid #ddd; border-width:1px 0; padding:30px 5px;}
#sideMenu .modal-dialog .article_list li {margin-bottom:12px;}
#sideMenu .modal-dialog .article_list li .left {width:80px; height:80px; margin-right:12px; float:left;}
#sideMenu .modal-dialog .article_list li .right {height:80px;}
#sideMenu .modal-dialog .article_list li .right .text_wrap p {font-size:16px; line-height:20px;text-overflow:ellipsis;white-space:nowrap; word-wrap:normal; overflow:hidden;}
#sideMenu .modal-dialog .article_list li .right .text_wrap p span {margin-top:12px;display:inline-block;font-size:14px;font-weight:bold;/* background-color:#ffd669; */padding:4px 8px;margin-bottom:8px;}


#sideMenu .cate1 {background-color:#8cd9ef;}
#sideMenu .cate2 {background-color:#ff99a7;}
#sideMenu .cate3 {background-color:#ffd769;}

/*이전호보기 */
@media(max-width:767px) {
  #bottomlist {position:relative;width:100%;background-color: #ddd;margin:40px 0;}
  #bottomlist .showbtn {
    color: #333;padding: 5px 10px;cursor: pointer;
    border : 1px solid #ddd; position: relative; width:100%;}
  #bottomlist .showbtn::after{content:"▼"; position:absolute; right:20px;}
  #bottomlist .coverlist {
    display:none; position: absolute; bottom: 20px; width: 100%; z-index: 2;
    background: #3f3f3f; color: #d9d9d9; padding:0; font-size: 14px; list-style:none; padding:5px;
    }
  #bottomlist .coverlist li {padding:5px;}
}



.full.cover_slide {height:400px;/* background-color:#ffd769; */background-image:url(../img/vol/slide.png);background-size:cover;background-position:center;}
.full.cover_slide .col-sm-12 {margin-top: -30px;}
.full.cover_slide .topbar {text-align:left;}
.full.cover_slide .topbar .logo {display:block; margin-top:20px;margin-bottom:6px;}
.full.cover_slide .topbar .logo img{max-width:91px;}
.full.cover_slide .topbar .date,.full.cover_slide .topbar .name {font-size:1.1em;}
.full.cover_slide .topbar .date span {font-weight:bold; color:#fff;}
.full.cover_slide .topbar .date span.vol {font-weight:bold; color:#222;}
.full.cover_slide>.container {max-width:980px;}
.full.cover_slide>.container {padding:0;}





/*백그라운드 슬라이드*/
@media(max-width:767px) {
  .full.cover_slide .topbar .logo {position: absolute;}
  .full.cover_slide {background-image:url(../img/vol/slide_m.png); background-size:cover; background-position:center;}
  .full.cover_slide .topbar {padding:0 15px;}
}

/*상단메뉴*/
.logo {/* position:absolute; *//* top:30px; *//* left:0; */}
.link_kaia {position:absolute;right:180px;top: 20px;}
/*상단 메뉴 버튼 모바일*/
.topbar>.row>.visible-xs {/*! height:70px; */}

.topbar .right {position:absolute;top:20px;/*! transform:translateY(-50%); */right: 15px;width:36px;background-color:transparent;padding:0;border:0;}

/*이전호보기 pc*/
@media(min-width:768px) {
  #bottomlist {position: absolute;right: 14px;top: 24px;}
  #bottomlist::before {
    content "|";
  }
  #bottomlist a{position: relative;color: lightgrey;}
  #bottomlist .showbtn {color: #333;padding: 5px 0;cursor: pointer;border-bottom:1px solid #333;position: static;width: 150px;}
  #bottomlist .showbtn::after{
    content:"▼";
  }
  #bottomlist .showbtn span {font-size: 13px;font-family: dotum;margin-left: 10px;margin-right: 50px;}
  #bottomlist .coverlist {display:none;position: absolute;top: 28px;width: 150px;z-index: 2;background: #3f3f3f;color: #d9d9d9;border: 1px solid #474747;padding: 10px 10px;font-size: 14px; list-style:none;}
  #bottomlist .coverlist li {padding: 5px 0px;}
}




/*메인 텍스트*/
.full.cover_slide {text-align:center;position: relative;}
.full.cover_slide .text_wrap .title_text1, .full.cover_slide .text_wrap .title_text2{font-size:2.8em;text-align:center;line-height:1.2em;}
.full.cover_slide .title_text2 {font-weight:bold;}
.full.cover_slide .text_wrap .title_text1{margin-top: 0;}
.full.cover_slide .text_wrap .title_text1::after {
  content:"";
  display:block;
  clear:both;
  width:100%;
}

/*메인 텍스트 애니메이션*/

.full.cover_slide .text_wrap .title_text1, .full.cover_slide .text_wrap .title_text2{
  display: inline-block;
  position: relative;
  overflow: hidden;
  color:transparent;
  font-size:2.2em;
}

.full.cover_slide .illust {/* position: absolute; *//* bottom: 200px; *//* height: 100px; *//* margin: 0 auto; */text-align: right;}
.full.cover_slide .illust .img_illust {/* position:absolute; *//* right:0; *//* bottom:200px; */margin-right: 0;margin-top: 20px;}
.full.cover_slide .text_wrap:first-child {margin-top: 8px;}

.full.cover_slide .text_wrap .title_text1::before, .full.cover_slide .text_wrap .title_text2::before {
  content:attr(text);
  padding:0;
	width:100%; height:100%;
  color:black;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  color: #111111;
  animation-iteration-count: infinite;
  animation-duration:6s;
}
.full.cover_slide .text_wrap .title_text1::before {
  animation-name:center_logo;

}
.full.cover_slide .text_wrap .title_text2::before {
  opacity:0;

  animation-name:center_logo2;
}


@keyframes center_logo {
  0% {width:0; opacity:0;}
  10%{opacity:1;}
  40% {width:100%; opacity:1;}
  95% {opacity:1}
  100% {opacity:0;}
}
@keyframes center_logo2 {
  0% {width:0; opacity:0;}
  40%{width:0; opacity:0;}
  50% {opacity:1;}
  70% {width:100%; opacity:1;}
  95% {width:100%;opacity:1;}
  100% {opacity:0;}
}
/*상단 커버 이미지 미디어쿼리*/
@media (max-width:767px) {
  .full.cover_slide .text_wrap:first-child {margin-top: 80px;}
  .full.cover_slide .text_wrap .title_text1, .full.cover_slide .text_wrap .title_text2{font-size:2em;}
  .full.cover_slide .text_wrap .title_text1{margin-top: 0.4em;}
  .full.cover_slide .name, .full.cover_slide .date {font-size:1.2em;}
  .full.cover_slide .date span {font-weight:bold; color:#fff;}
  .full.cover_slide .date span.vol {color:#222;}
  .full.cover_slide .topbar .logo {margin-top:10px;}
}
@media (max-width:480px) {
  .full.cover_slide .topbar .logo img{max-height:38px;}
  .topbar .right {top:15px;}
  .full.cover_slide .text_wrap:first-child {margin-top: 90px;}
  .full.cover_slide .text_wrap .title_text1, .full.cover_slide .text_wrap .title_text2{font-size:1.8em;}
}



/*꼭지 이미지*/
.full.item {background-color:#8cd9ef;margin-bottom: -180px;/* margin-top: -200px; *//* padding-bottom: 0; */}
.full.item .container {max-width:980px;}

.item_wrapper {padding: 40px;/* border:1px solid #ddd; */overflow:hidden;position:relative;top: 0;background-color:#fff;/* bottom: -200px; */margin-top: -200px;}
.item_wrapper ul {list-style:none;width:980px;/* margin:4em auto; */padding:0;}
.item_wrapper ul li {float:left; position:relative; background-size:cover; background-position:center;}

/*꼭지 이미지 hover*/
.item_wrapper ul li:hover::before {
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  top:0; left:0;
  background:rgb(5,153,217,0.5);
  -webkit-transition: all .7s;
     -moz-transition: all .7s;
       -o-transition: all .7s;
          transition: all .7s;
}
@media (min-width:768px) {
  .item_wrapper ul li:hover {
    background-size:110%;
    -webkit-transition: all .7s;
       -moz-transition: all .7s;
         -o-transition: all .7s;
            transition: all .7s;
  }

}





.item_wrapper ul li.item1 {
  width: 518px;
  height: 518px;
  margin-right: 12px;
  margin-bottom:14px;
  background-image:url(../img/vol/thumb1.png);
  }
.item_wrapper ul li.item2 {
  width: 370px;
  height: 253px;
  margin-bottom: 12px;
  background-image:url(../img/vol/thumb2.png);
  }
.item_wrapper ul li.item3 {
  width: 370px;
  height: 253px;
  margin-bottom: 30px;
  background-image:url(../img/vol/thumb3.png);
  }
.item_wrapper ul li.item4 {
  width: 444px;
  height: 250px;
  margin-right:14px;
  margin-bottom: 12px;
  background-image:url(../img/vol/thumb4.png);
  }
.item_wrapper ul li.item5 {
  width: 444px;
  height: 250px;
  margin-right:14px;
  margin-bottom: 12px;
  background-image:url(../img/vol/thumb5.png);
  }
.item_wrapper ul li.item6 {
  width: 444px;
  height: 250px;
  background-image:url(../img/vol/thumb6.png);
  margin-right: 12px;
  }
  .item_wrapper ul li.item7 {
  width: 444px;
  height: 250px;
  background-image:url(../img/vol/thumb7.png);
  margin-right: 12px;
  }

  .item_wrapper ul li.item8,.item_wrapper ul li.item9,.item_wrapper ul li.item10 {
    width:292px;
    height:360px;
    margin-right: 12px;
    margin-top:30px;

  }
  .item_wrapper ul li.item8 {
  background-image:url(../img/vol/thumb8.png);

  }
  .item_wrapper ul li.item9 {
  background-image:url(../img/vol/thumb9.png);
  }
  .item_wrapper ul li.item10 {
  background-image:url(../img/vol/thumb10.png);
  }

.item_wrapper ul li a {display:block;position:absolute;width:100%;height:100%;background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0));padding:16px;}
.item_wrapper ul li a .category {display:inline-block; padding:4px 8px; font-size:1.1em; color:#000; font-weight:bold; margin-bottom:0.8em;}
.item_wrapper ul li a .category.cate1 {background-color:#8cd9ef;}
.item_wrapper ul li a .category.cate2 {background-color:#ff99a7;}
.item_wrapper ul li a .category.cate3 {background-color:#ffd769;}
.item_wrapper ul li a .title {color:#fff; font-size:1.5em;}

/*꼭지 이미지 텍스트*/
.item_wrapper h3 {text-align:center; font-size:1.8em; margin:0;}
.item_wrapper h3:nth-child(2) {font-weight:bold;}
.item_wrapper h3 span {color:green;}

/*메인 글씨 크기 및 여백*/
@media(max-width:480px) {
.item_wrapper ul li a {padding:6px;}
}

@media (max-width:640px) {
  .item_wrapper ul li a .category {font-size:0.9em;}
  .item_wrapper ul li a .title {font-size:1.2em;}
}
@media (max-width:767px){
.item_wrapper {padding: 20px;}
.item_wrapper h3 {font-size:1.5em;}
.item_wrapper ul {/* margin-top:30px; */}
.full.item{padding:0 15px;}
.full.item .container {max-width: 662px;}
.full.item .container ul {max-width: 622px;width:100%;}
.item_wrapper ul li.item1 {
  width:100%;
  height:100%;
  padding-bottom:100%;
  margin-right:0px;
  margin-bottom:8px;
  }
.item_wrapper ul li.item2, .item_wrapper ul li.item3,
.item_wrapper ul li.item4, .item_wrapper ul li.item5,
.item_wrapper ul li.item6, .item_wrapper ul li.item7,
.item_wrapper ul li.item9, .item_wrapper ul li.item10
 {width: calc(50% - 5px);height:100%;padding-bottom: 67%;margin-right:0;}

.item_wrapper ul li.item2, .item_wrapper ul li.item4,
.item_wrapper ul li.item6, .item_wrapper ul li.item9 {margin-right:10px;}

.item_wrapper ul li.item8 {width:100%;height: 100%;padding-bottom: 67%;}
.item_wrapper ul li.item9, .item_wrapper ul li.item10 {margin-top:10px;}



/*모바일 배경*/
.item_wrapper ul li.item2 {background-image:url(../img/vol/thumb2_m.png);}
.item_wrapper ul li.item3 {background-image:url(../img/vol/thumb3_m.png);}
.item_wrapper ul li.item4 {background-image:url(../img/vol/thumb4_m.png);}
.item_wrapper ul li.item5 {background-image:url(../img/vol/thumb5_m.png);}
.item_wrapper ul li.item6 {background-image:url(../img/vol/thumb6_m.png);}
.item_wrapper ul li.item7 {background-image:url(../img/vol/thumb7_m.png);}
.item_wrapper ul li.item8 {background-image:url(../img/vol/thumb8_m.png);}
.item_wrapper ul li.item9 {background-image:url(../img/vol/thumb9_m.png);}
.item_wrapper ul li.item10 {background-image:url(../img/vol/thumb10_m.png);}



/*.item_wrapper ul li.item2, .item_wrapper ul li.item3 {margin-right:1%;height:100%;padding-bottom:68.4%;margin-bottom:8px;}
.item_wrapper ul li.item4 {width: calc(50% - 5px); height:100%; padding-bottom:70%; margin-right:8px;}
.item_wrapper ul li.item5 {width:calc(50% - 5px); height:100%; padding-bottom:70%; margin-right:0;}
.item_wrapper ul li.item6 {width:100%; height:100%; padding-bottom:80%; margin-top:8px;}*/
}
/* 작은 기기들 (태블릿, 768px 이상) */
@media (min-width:768px) and (max-width:992px) {

.item_wrapper {padding: 20px 24px;}
.item_wrapper ul {width: 702px;}

.item_wrapper ul li.item1 {
  width:404px; height:404px;
  margin-right:10px;margin-bottom:10px;}

.item_wrapper ul li.item2 {width:288px; height:196px;margin-bottom:10px;}
.item_wrapper ul li.item3 {width:288px; height:196px;margin-bottom:10px;}

.item_wrapper ul li.item4, .item_wrapper ul li.item5, .item_wrapper ul li.item6, .item_wrapper ul li.item7
{width:346px; height:196px; margin-right:0;}
.item_wrapper ul li.item4,.item_wrapper ul li.item6 {margin-right:10px;}

.item_wrapper ul li.item8, .item_wrapper ul li.item9, .item_wrapper ul li.item10 {width:226px; height:279px;}
.item_wrapper ul li.item10 {margin-right:0;}
  }



/*푸터*/
.footer {background:#222;padding-top:220px; padding-bottom:50px;}
.footer .footer_logo {display:block;text-align:center;margin-bottom: 10px;}
.footer .footer_logo img {max-width:100px;}
.footer .col-sm-9 p.footer_text { color:#fff; margin-bottom:5px; width:95%; margin-left:auto; margin-right:auto;}
.footer .footer_text span{ font-weight:bold;}
.footer .col-sm-9 {width:100%;display:table-cell;float:none;vertical-align: bottom;}
.footer .col-xs-12 {padding:0;}

@media (min-width:767px) {
  .footer .container {padding:0; max-width:980px;}
  .footer .row {display:table-row;}
  .footer .col-sm-9 p {
    display:block;font-size:15px; margin-left:30px; margin-bottom:20px; color:#000;}
}