@charset "UTF-8";


.cf:after {
  content: "";
  clear: both;
  display: block; }

/* reset */
figure, figcaption{
  margin: 0;
  padding: 0;
  font-weight: normal;
  word-wrap: break-word;
  word-break: break-all; }

aside, figure, figcaption {
  display: block; }


img {
	border: 0;
}

li {
  list-style: none; }

/* #vol */

#vol .thumb ul {
  margin:0;
  width:100%; 
  padding:2% 0 0 0;}
#vol .thumb ul li {
  float: left;
  margin: 0  0.9% 1.5% 0.9%; 
  box-sizing:border-box;
  }
  #vol .thumb ul li a {
    display: block;
    width: 100%; }

#vol .modalWrWr {
  display: none; }

#vol .modalWr {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center; 
  z-index: 200;
  }
  #vol .modalWr .modal {
    max-width: 890px;
    }
    #vol .modalWr .modal .termWindow {
      padding: 0px; }
      #vol .modalWr .modal .termWindow dt {
        font-weight: bold;
        margin-bottom: 5px; }
    #vol .modalWr .modal .carousel {
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center; }
      #vol .modalWr .modal .carousel .prev, #vol .modalWr .modal .carousel .next {
        width: 6%;
        height: 185px;
        margin: 0 2%; }
        #vol .modalWr .modal .carousel .prev a, #vol .modalWr .modal .carousel .next a {
          display: block;
          width: 100%;
          height: 100%;
          text-indent: -9999px; }
      #vol .modalWr .modal .carousel .prev {
        background: url("../images/carousel_l.png") 50% 50% no-repeat;
        -webkit-background-size: contain;
        background-size: contain; }
      #vol .modalWr .modal .carousel .next {
        background: url("../images/carousel_r.png") 50% 50% no-repeat;
        -webkit-background-size: contain;
        background-size: contain; }
      #vol .modalWr .carousel .figureWrWr {
	width: 100%;
	max-width: 680px;
	margin: 0;
	padding:0;
	overflow: hidden;
box-shadow:0px 0px 8px 7px rgba(51,51,51,0.42);
-moz-box-shadow:0px 0px 8px 7px rgba(51,51,51,0.42);
-webkit-box-shadow:0px 0px 8px 7px rgba(51,51,51,0.42);
}
        #vol .modalWr .modal .carousel .figureWrWr .figureWr {
          display: -webkit-flex;
          display: flex;
          -webkit-align-items: flex-start;
          align-items: flex-start; 
		  margin:0 0 -10px;}
          #vol .modalWr .modal .carousel .figureWrWr .figureWr figure {
            -webkit-flex: none;
            flex: none;
			margin:0; }
          #vol .modalWr .modal .carousel .figureWrWr .figureWr figcaption {
            margin: 0; }
  #vol .modalWr .ctrl {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	max-width: 700px;
	background-position: right center;
}
    #vol .modalWr .ctrl .delete {
      -webkit-flex: 1;
      flex: 1;
      text-align: right;
	  margin-right:10px;}
      #vol .modalWr .ctrl .delete a {
        display: inline-block;
        margin-left: 2%;
        padding: 3px 35px 0 0;
        background: url("../images/delete.png") 0 50% no-repeat;
		background-position:right top 1px;
        -webkit-background-size: contain;
        background-size: contain;
        color: #fff; 
		z-index:300;}
    #vol .modalWr .ctrl .indicator {
      -webkit-flex: 1;
      flex: 1;
      text-align: right;
      margin-right: 2%;
      color: #fff; }

/* /#vol */
@media screen and (max-width: 500px) {
  /* #vol */
  #vol .contents {
    position: relative; }
  #vol .thumb {
    padding: 0 0 0 0; }
    #vol .thumb li {
      width: 31.2%; 
	  }
  #vol .modalWr .modal,
  #vol .modalWr .ctrl {
    width: 100%; }
    #vol .modalWr .modal .delete a,
    #vol .modalWr .ctrl .delete a {
      font-size: 15px; }
    #vol .modalWr .modal .indicator,
    #vol .modalWr .ctrl .indicator {
      font-size: 20px; }
  /* /#vol */ }

@media screen and (min-width: 501px) and (max-width: 700px) {
  /* #vol */
  #vol .contents {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start; }
    #vol .contents .txt {
	-webkit-flex: 1;
	flex: 1;
}
  #vol .thumb {
    padding: 0 0 0 0; }
    #vol .thumb li {
      width: 23.2%; }
  #vol .modalWr .modal,
  #vol .modalWr .ctrl {
    width: 100%; }
    #vol .modalWr .modal .delete a,
    #vol .modalWr .ctrl .delete a {
      font-size: 20px; }
    #vol .modalWr .modal .indicator,
    #vol .modalWr .ctrl .indicator {
      font-size: 30px; }
  /* /#vol */ }

@media screen and (min-width: 701px) {

  /* #vol */
  #vol .contents {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start; }
    #vol .contents .txt {
      -webkit-flex: 1;
      flex: 1; }
  #vol .thumb {
    padding: 0 0 0 0; }
    #vol .thumb li {
      width: 14.8%; }
  #vol .modalWr .modal,
  #vol .modalWr .ctrl {
    width: 100%; }
    #vol .modalWr .modal .delete a,
    #vol .modalWr .ctrl .delete a {
      font-size: 18px; }
    #vol .modalWr .modal .indicator,
    #vol .modalWr .ctrl .indicator {
      font-size: 18px; }
  /* /#vol */ }