/* - - - Element - - - */

/* article.archive */
article.archive {
  margin:90px 0 80px;
}
article.archive figure,
article.archive main {
  display:inline-block;
    vertical-align:middle;
}
article.archive figure {
  width:25%; width:calc(240px);
    border-radius:50%;
    overflow:hidden;
}
article.archive main {
  width:70%; width:calc(100% - 280px);
    margin-left:5%; margin-left:calc(40px);
}
article.archive h2 {
  display:inline;
  margin-right:30px;
}
article.archive hr {
  margin-top:35px;
}
article.archive p {
  font-size:24px;
  line-height:34px;
    margin:25px 0 0;
}
article.archive p:first-of-type:first-letter {
  font-size:inherit;
  line-height:inherit;
    float:none;
    padding:0;
}
article.archive span {
  color:rgba(0, 0, 0, 0.3);
  font-style:italic;
    display:inline;
}

/* - - - Division - - - */

/* .archiveIndex */
.archiveIndex {
  font-family:'Montserrat', Helvetica, sans-serif;
  font-size:16px; font-style:normal; font-weight:500;
  text-align:center;
    margin:60px auto;
}
.archiveIndex div {
  line-height:40px;
    width:40px;
      border-radius:5px;
      display:inline-block;
      margin:0 5px;
}
.archiveIndex .inactive {
  color:rgba(0, 0, 0, 0.3);
    box-shadow:0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* .archiveSearch */
.archiveSearch {
  width:640px;
    margin:80px auto 140px;
}
.archiveSearch fieldset {
  border:none;
    margin:0; padding:0;
}
.archiveSearch legend {
  display:none;
}

/* .archiveSearch .query */
.archiveSearch .query {
  background-color:#fff;
    border-radius:5px;
    box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding:6px 12px;
}
.archiveSearch .query input {
  color:#1777ff;
    background-color:transparent;
      display:inline-block;
      border:none;
      margin:0; padding:0;
      vertical-align:top;
}
.archiveSearch .query input[type='submit'] {
  background-image:url(/base/assets/icon/general/search/blue.png);
  background-image:url(/base/assets/icon/general/search/blue.svg);
  background-position:6px; background-repeat:no-repeat; background-size:32px;
  width:5%; height:32px;
    cursor:hand; cursor:pointer;
}
.archiveSearch .query input[type='text'] {
  font-family:'Montserrat', Helvetica, sans-serif;
  font-size:16px; font-style:normal; font-weight:500;
  line-height:32px;
  outline:none;
  text-transform:uppercase;
    width:95%;
}

/* .archiveSearch .radio */
.archiveSearch .radio {
  line-height:0;
    margin-top:20px;
}
.archiveSearch .radio input {
  display:none;
}
.archiveSearch .radio input:checked + .checkbox div {
  background-color:#1777ff;
}
.archiveSearch .radio label {
  line-height:32px;
    min-width:32px; height:32px;
      cursor:hand; cursor:pointer;
      display:inline-block;
      vertical-align:middle;
}
.archiveSearch .radioItem {
  font-size:0;
  text-align:center;
  white-space:nowrap;
    width:25%;
      display:inline-block;
}
.archiveSearch .radio .checkbox {
  position:relative;
}
.archiveSearch .radio .checkbox:after {
  content:'';
    background-color:#fff;
    width:20px; height:20px;
      border-radius:50%;
      box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
      position:absolute;
      top:6px; left:6px;
}
.archiveSearch .radio .checkbox div {
  background-color:transparent;
  width:12px; height:12px;
  z-index:1;
    border-radius:50%;
    display:inline-block;
    position:relative;
    vertical-align:middle;
}
.archiveSearch .radio .icon {
  opacity:0.3;
}
.archiveSearch .radio .text {
  color:rgba(0, 0, 0, 0.3);
  font-family:'Montserrat', sans-serif;
  font-size:16px; font-style:normal; font-weight:500;
}

/* - - - Responsive - - - */

/* tablet */
@media screen and (max-width:1079px) {

  /* article.archive */
  article.archive {
    margin:25px 0 10px;
  }
  article.archive hr {
    margin-top:5px;
  }
  article.archive p {
    font-size:18px;
    line-height:30px;
      margin:20px 0 0;
  }
  article.archive span {
    display:block;
  }

}

/* mobile */
@media screen and (max-width:799px) {

  /* article.archive */
  article.archive figure,
  article.archive main {
    display:block;
    vertical-align:top
  }
  article.archive figure {
    width:80%;
      margin:0 auto;
  }
  article.archive main {
    width:100%;
      margin:30px 0 0;
  }
  article.archive p {
    font-size:16px;
    line-height:25px;
  }

  /* .archiveIndex */
  .archiveIndex {
    margin:45px auto;
  }

  /* .archiveSearch */
  .archiveSearch {
    width:100%;
      margin:40px auto 50px;
  }
  .archiveSearch .query input[type='submit'] {
    background-position:center;
    width:10%; width:calc(32px);
  }
  .archiveSearch .query input[type='text'] {
    width:90%; width:calc(100% - 32px);
  }

}

/* - - - Exception - - - */

/* desktop */
@media screen and (pointer:fine) and (min-width:799px)  {

  /* .archiveSearch */
  .archiveSearch .radioItem:hover .checkbox div {
    background-color:rgba(0, 0, 0, 0.3);
  }

}

/* - - - Animation - - - */

/* .archiveSearch .radio */
.archiveSearch .radio .checkbox div {
  transition:background-color 0.1s ease-in-out;
  -o-transition:background-color 0.1s ease-in-out;
  -ms-transition:background-color 0.1s ease-in-out;
  -moz-transition:background-color 0.1s ease-in-out;
  -webkit-transition:background-color 0.1s ease-in-out;
}