@charset "utf-8";
/* tag reset */
img{vertical-align: top;border: none;}
address{font-style: normal;}

.blind{width: 1px;height: 1px;overflow: hidden;margin: -1px;border: none;clip: rect(1px, 1px, 1px, 1px);clip-path: inset(50%);}

/* header 배경색 수정 */
#header{background: rgba(255,255,255,0.8);}

#container{padding: 95px 0 100px;}
.top_title{font-family: 'Noto Serif KR', sans-serif;padding: 100px 0;}
.top_title p{font-size: 4rem;color: #fff;}
.top_title strong{display: block;font-size: 10rem;opacity: 0.98;color: #996633;}
.country_list{display:flex;justify-content: flex-start;flex-flow: row wrap;}
.country_list li{width: calc((100% - 40px) / 3);margin-right: 20px;margin-bottom: 20px;position: relative;}
.country_list li:nth-child(3){margin-right: 0;}
.country_list li .link{display: block;position: relative;}
.country_list li .link:hover .photo img, .country_list li .link:focus .photo img{transform: scale(1.15);}
.country_list li .link .photo{overflow: hidden;}
.country_list li .link .photo img{transition: all 0.5s;width: 100%;}
.country_list li .link .txt{position: absolute;top: 10px;left: 15px;color: #000;font-size: 4rem;font-weight: bold;letter-spacing: -1px;line-height: 1;}
.country_list .preparing .link .txt{font-size: 3rem;color: #5c5c5d;font-weight: normal;}

#footer .footer_txt span{display: block;font-size: 16px;color:#d3d4de;font-weight: 300;}


/* ========== Media Query (tablet) : max-width:786px ========== */
@media all and (max-width:1024px) {
  .top_title{text-align: center;padding: 80px 0;}
  .country_list li{width: calc((100% - 20px) / 2);}
  .country_list li:nth-child(3){margin-right: 20px;}
  .country_list li:nth-child(even){margin-right: 0;}
  .country_list li:last-child .link .photo{border: 1px solid #222;box-sizing: border-box;}/* 밝기가 어두우면 배경색과 구분이 안되는 것 같아서 추가함, 테두리가 없는게 나을지 체크해 보기 */

  /* 태블릿과 모바일에서는 이미지에 transform / transition 효과 제거하려면 필요함 */
  .country_list li .link:hover .photo img, .country_list li .link:focus .photo img{transform: none;}
  .country_list li .link .photo img{transition: none;}
  
  #footer .footer_txt span{font-size: 14px;text-align: center;}
}

/* ========== Media Query (mobile) ========== */
@media all and (max-width:480px) {
  .country_list li{width: 100%;margin-right: 0 !important;}
}