

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
	background: #f5f5f5;
}
li { list-style: none; }


.navbar-custom {
	background: #6CC3AF;
}

.base_wrap { position: relative; }
.base_wrap ul, .base_wrap ol, .base_wrap li { margin: 0; padding: 0; }


/* archive
--------------------------------------------------------------- */
#archive header { box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); }
#archive header .scrollWrap { display: block; background: rgba(255, 255, 255, 0.9); }
#archive section.base_wrap { padding-top: 25.63vw; color: #333; }
#archive .title_wrap01 { padding: 0 6.4%; text-align: center; }
#archive .title_wrap01 h2 span, #archive .title_wrap01 h3 span { font-size: 0.5em; }
#archive ol.flex_wrap { width: 87.2%; margin: 9.07vw auto 0; padding-bottom: 8.54vw; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; flex-wrap: wrap; }
#archive ol.flex_wrap li { width: 50%; margin-bottom: 8.54vw; text-align: center; }
#archive ol.flex_wrap li img { width: auto; height: 46.7vw; }
#archive ol.flex_wrap li a { display: block; }
#archive ol.flex_wrap p.year { margin-top: 0.8vw; font-family: 'Montserrat', sans-serif; font-size: 1.5em !important; color: #6CC3AF; text-align: center; }
@media (min-width: 1025px) { #archive header nav { background: rgba(255, 255, 255, 0.9); }
  #archive header nav li.on a { color: #6CC3AF; }
  #archive header nav a { color: #555; }
  #archive header nav a:hover { color: #6CC3AF; }
  #archive section.base_wrap { padding-top: 118px; }
  #archive .title_wrap01 { padding: 0 6.4%; display: block; }
  #archive .title_wrap01 h2, #archive .title_wrap01 h3 { width: 100%; justify-content: center; }
  #archive .title_wrap01 h2 span, #archive .title_wrap01 h3 span { font-size: 0.5em; display: block; }
  #archive .title_wrap01 p { margin-top: 30px; font-size: 1.07em; }
  #archive ol.flex_wrap { width: 88.235%; max-width: 1200px; margin: 44px auto 0; padding: 0 1.8% 56px; justify-content: flex-start; }
  #archive ol.flex_wrap li { width: 23.68%; margin-bottom: 48px; margin-right: 1.75%; }
  #archive ol.flex_wrap li:nth-child(4n) { margin-right: 0; }
  #archive ol.flex_wrap li img { width: auto; height: 100%; max-height: 350px; }
  #archive ol.flex_wrap li a { transition: opacity 0.3s ease; }
  #archive ol.flex_wrap li a:hover { opacity: 0.7; }
  #archive ol.flex_wrap p.year { margin-top: 0.8vw; font-size: 1.5em !important }
}
@media (max-width: 1024px) and (min-width: 768px) { #archive section.base_wrap { padding-top: 140px; }
  #archive ol.flex_wrap { width: 88.235%; max-width: 1200px; margin: 44px auto 0; padding: 0 1.8% 56px; justify-content: flex-start; }
  #archive ol.flex_wrap li { width: 23.68%; margin-bottom: 48px; margin-right: 1.75%; }
  #archive ol.flex_wrap li:nth-child(4n) { margin-right: 0; }
  #archive ol.flex_wrap li img { width: auto; max-height: 200px; }
  #archive ol.flex_wrap li a { transition: opacity 0.3s ease; }
  #archive ol.flex_wrap li a:hover { opacity: 0.7; }
  #archive ol.flex_wrap p.year { margin-top: 0.54vw; font-size: 1.5em !important }
}

@media print { 
  #archive header nav { background: rgba(255, 255, 255, 0.9); }
  #archive header nav li.on a { color: #6CC3AF; }
  #archive header nav a { color: #555; }
  #archive header nav a:hover { color: #6CC3AF; }
  #archive section.base_wrap { padding-top: 118px; }
  #archive .title_wrap01 { padding: 0 6.4%; display: block; }
  #archive .title_wrap01 h2, #archive .title_wrap01 h3 { width: 100%; justify-content: center; }
  #archive .title_wrap01 h2 span, #archive .title_wrap01 h3 span { font-size: 0.5em; display: block; }
  #archive .title_wrap01 p { margin-top: 30px; font-size: 1.07em; }
  #archive ol.flex_wrap { width: 88.235%; max-width: 1200px; margin: 44px auto 0; padding: 0 1.8% 56px; justify-content: flex-start; }
  #archive ol.flex_wrap li { width: 23.68%; margin-bottom: 48px; margin-right: 1.75%; }
  #archive ol.flex_wrap li:nth-child(4n) { margin-right: 0; }
  #archive ol.flex_wrap li img { width: auto; height: 100%; max-height: 350px; }
  #archive ol.flex_wrap li a { transition: opacity 0.3s ease; }
  #archive ol.flex_wrap li a:hover { opacity: 0.7; }
  #archive ol.flex_wrap p.year { margin-top: 0.8vw; font-size: 1.5em !important }
}


